Saltar al contenido principal
Use los SDKs del lado del cliente correspondientes al framework preferido para ejecutar experimentos o feature flags. Si el módulo Feature Experimentation no está disponible o si no se desea instalar el SDK, siga la solución descrita en este artículo para ejecutar experimentos mediante la Activation API.

​
Contexto

Los frameworks modernos del lado del cliente en JavaScript (React, Angular, Vue, etc.) gestionan el árbol DOM y sus elementos (a menudo implementando un DOM virtual). Esta gestión interna dificulta la implementación de tests en cliente fuera del framework concreto, ya que las manipulaciones del DOM entran en conflicto con el comportamiento del framework. Las modificaciones externas a los elementos o a la lógica suelen ser sobrescritas. Existen soluciones para estos problemas, como el uso de Mutation Observers del DOM, pero el código externo debe manejarlas con cuidado. En lugar de utilizar un enfoque externo intrusivo, implemente las variaciones directamente en el código existente de React, Angular o Vue y dispare los experimentos de forma programática. Esta lógica refleja el uso de un SDK: el motor frontend de Kameleoon actúa como el equivalente del SDK de JavaScript.
Las técnicas descritas en este artículo requieren volver a desplegar el código fuente JS para lanzar experimentos o personalizaciones. Aunque este enfoque simplifica el desarrollo, carece de la flexibilidad de las metodologías estándar de Kameleoon, que permiten lanzar campañas sin despliegues por parte de IT. Un desarrollador con acceso al repositorio debe realizar la implementación.La implementación externa de experimentos JS (mediante el código inyectado por Kameleoon) o una combinación de ambos enfoques sigue siendo posible.
Para usar los métodos de la Activation API presentados aquí, instale Kameleoon en la aplicación del lado del cliente siguiendo esta documentación.
El proceso de instalación coincide con el de un sitio web estándar: añadir un archivo JavaScript externo de la aplicación que contiene el motor de Kameleoon y la Activation API.
Verifique que Kameleoon esté completamente cargado antes de ejecutar el código de la aplicación que dispara los experimentos, escuchando el evento Kameleoon::Started. Alternativamente, cargue el script de Kameleoon de forma sincrónica en la página HTML loader antes del código del framework.

​
Creación y configuración del experimento

Los pasos coinciden con los de los experimentos A/B estándar (creación de variaciones, selección de objetivos e integración de analítica). Tenga en cuenta los siguientes requisitos:
  • Cree un experimento usando el editor de código.
  • Seleccione la condición de segmentación Explicit trigger para disparar el experimento manualmente mediante la API.
Tome nota de los IDs del experimento y de la variación para usarlos en el código.
Deje vacío el código JS de las variaciones en la mayoría de los casos. No obstante, incluir datos JSON en las variaciones resulta útil para recuperar parámetros en el código de la aplicación; estos parámetros pueden actualizarse en la interfaz de Kameleoon sin necesidad de nuevos despliegues.

​
Código de ejemplo para disparar un experimento

El siguiente código de ejemplo muestra cómo disparar un experimento y obtener la variación asociada para el usuario actual. Kameleoon.API.Experiments.getAll() no incluye experimentos que no se hayan lanzado desde la interfaz. Esta configuración permite preparar los despliegues de código y lanzar los experimentos de forma independiente: normalmente, los equipos de IT planifican los despliegues mientras los product owners programan los lanzamientos. 
var variationID;

// Asegúrese de que Kameleoon esté cargado y activo en este punto
var experiment = Kameleoon.API.Experiments.getById(75253);

/*
  El experimento no está actualmente en directo (aún no lanzado o pausado).
  Debe aplicarse el comportamiento por defecto.
*/
if (!experiment) {
  variationID = 0;
} else {
  Kameleoon.API.Experiments.trigger(experiment.id, false);

  /*
    El experimento no está activado, lo que normalmente significa que al usuario no se le ha
    asignado una variación (parte del tráfico no se asignó a ninguna variación),
    o que no se cumplen los requisitos de capping. De nuevo, debe aplicarse el comportamiento por defecto.
  */
  if (!experiment.associatedVariation) {
    variationID = 0;
  } else {
    variationID = experiment.associatedVariation.id;

    /*
      Ejemplo de la técnica de parametrización mediante JSON: la variable additionalParameters
      será igual al contenido JSON que hayamos definido en el back-office de Kameleoon.
    */
    var additionalParameters = Kameleoon.API.Variations.execute(variationID);
  }
}

// Este código implementa los cambios relacionados con el experimento

if (0 == variationID) {
  // Número de productos a mostrar por defecto / referencia
  recommendedProductsNumber = 5;
} else if (148382 == variationID) {
  // Variación que actualiza el número de productos recomendados a 10
  recommendedProductsNumber = 10;
} else if (187791 == variationID) {
  // Variación que actualiza el número de productos recomendados a 8
  recommendedProductsNumber = 8;
}
Configure el código JS de la variación en la interfaz de Kameleoon como se muestra a continuación para recuperar en la aplicación datos JSON dependientes de la variación: 
return {timeout: 500, errorMessage: "Something went wrong", productIDs: [536, 892]};