Saltar al contenido principal
Contentful es un headless CMS: una plataforma de contenido componible que satisface las demandas únicas del contenido digital y de todos los equipos que lo producen y trabajan con él. Con la integración de Contentful, puede llevar las capacidades de experimentación a su CMS y ejecutar experimentos sobre contenido directamente desde Contentful. También puede utilizar la potente solución de analítica de Kameleoon para analizar el rendimiento de los experimentos de Contentful. Ventajas clave:
  • Ejecute experimentos no-code avanzados sobre contenido estructurado.
  • Elimine el efecto flicker con bucketing instantáneo del lado del servidor y sin latencia.
  • Reduzca su dependencia de los recursos de desarrollo para la experimentación.
  • Reduzca el trabajo manual necesario para crear experimentos en Contentful y utilice el potente motor de experimentación y las capacidades de analítica de Kameleoon para medir el rendimiento de sus experimentos.

​
Consideraciones

Tenga en cuenta lo siguiente al usar esta integración:
  • Solo puede utilizar esta integración con experimentos de funcionalidades.
  • Debe habilitar la solución Feature Experimentation en su cuenta de Kameleoon.

​
Requisitos previos

Para configurar esta integración, necesita la siguiente información de Kameleoon:
  • Credenciales de inicio de sesión: Sus credenciales de inicio de sesión de Kameleoon son la combinación de dirección de correo electrónico y contraseña que le permite acceder a su cuenta de Kameleoon. Esta integración utiliza la autenticación OAuth para iniciar sesión en su cuenta de Kameleoon.
  • Sitecode: Debe proporcionar el Sitecode de su proyecto. Consulte la documentación específica de Kameleoon para saber dónde encontrar su Sitecode.

​
Instalación

  1. Vaya a su cuenta de Contentful.
  2. Haga clic en Apps > Marketplace y busque Kameleoon.
  1. Instale la aplicación de Kameleoon y autorice el acceso.
  2. Seleccione el Sitecode de su proyecto.
  3. Haga clic en Install en la esquina superior derecha.
La aplicación de Kameleoon está ahora completamente instalada y lista para usar.

​
Uso

​
Crear un experimento de funcionalidad en Kameleoon

Para crear un nuevo experimento de funcionalidad:
  1. Inicie sesión en su cuenta de Kameleoon.
  2. Vaya al panel de feature flags.
  3. Haga clic en New feature flag.
  4. Introduzca un nombre, proyecto y feature key.
  5. Haga clic en Validate.
  6. Haga clic en Add a rule > Experiment para añadir una Experiment Delivery Rule.
  7. Configure la regla como desee.

​
Crear una entrada Kameleoon Container en Contentful

  1. Inicie sesión en su cuenta de Contentful.
  2. Haga clic en Content.
  1. Haga clic en Add Entry > Kameleoon Container.
  2. Añada un Entry Name y seleccione un experimento en el menú desplegable Kameleoon experiments.
    • Las variaciones asociadas al experimento que seleccionó se mostrarán automáticamente, junto con el porcentaje de tráfico asignado.
  1. Para cada variación, haga clic en Create entry and link para crear una nueva entrada y usarla como contenido de su variación, o haga clic en Link an existing entry si quiere utilizar una entrada existente como contenido de la variación.

​
Preparar la publicación de su contenido

Su Kameleoon Container está listo para publicarse cuando haya completado estos cuatro pasos:
Aquí tiene cómo completar cada paso:
  • Select experiment: Puede completar este paso seleccionando un experimento en el menú desplegable Kameleoon experiments.
  • Add content: Puede completar este paso asociando una entrada para cada variación.
  • Publish variations: Este paso se marca como completado cuando todas las entradas asociadas a las variaciones se publiquen.
  • Start experiment: Para completar este paso, vaya a su cuenta de Kameleoon y use el interruptor manual para activar el feature flag en el entorno de producción.

​
Integración con su front-end

Kameleoon Container es un nuevo tipo de contenido que se introduce en la respuesta de Contentful. Es un contenedor que apunta a dos o más valores reales que queremos probar. Ahora necesita integrar su front-end con Kameleoon y el Kameleoon Container. Necesitará la ayuda de un desarrollador para cambiar la forma en que funciona su front-end para aceptar y gestionar programáticamente las entradas de Kameleoon Container. Gestionar programáticamente el Kameleoon Container es algo que solo necesita hacer una vez. A continuación, el código utilizado para gestionar el Kameleoon Container puede reutilizarse cada vez que reciba una entrada de Kameleoon Container desde Contentful. A partir de aquí, debemos profundizar técnicamente en la configuración del cliente y cómo se integra con Kameleoon. Es beneficioso que los desarrolladores se familiaricen con el contenido descrito anteriormente antes de pasar a la guía técnica que se muestra a continuación. Los objetivos de la configuración son:
  • Habilitar la experimentación del lado del servidor sin enviar código nuevo por experimento.
  • Controlar el contenido en Contentful y los experimentos en Kameleoon.
  • Selección de variaciones del lado del servidor para una entrega rápida y para evitar el efecto flicker.

​
Cómo la aplicación de Kameleoon cambia la respuesta de la API de Contentful

Como se ha mencionado anteriormente, la aplicación de Kameleoon crea un nuevo tipo de contenido: el Kameleoon Container. El Kameleoon Container es un tipo de contenido que anida los posibles valores para el experimento y contiene metadatos sobre el experimento de Kameleoon y los nombres de las variaciones.

​
Utilizar Kameleoon para seleccionar la variación correcta

Vamos a crear un pseudo-back-end que toma la respuesta de la API de Contentful y utiliza nuestro SDK de NodeJS para determinar qué variación mostrar al usuario. Empecemos por ver la respuesta JSON del Kameleoon Container devuelta por Contentful. Observe que el tipo de contenido expone varios campos relacionados con el experimento de Kameleoon: un featureKey y un meta con claves de variación. 
{
    "metadata":{
       "tags":[
 `  ]`
 },
    ……
    "fields":{
       "entryName":{
          "en-US":"Black Friday - CTA"
       },
       "experimentName":{
          "en-US":"Black Friday - CTA - Experiment"
       },
       "experimentId":{
          "en-US":"229925"
       },
       "featureKey":{
          "en-US":"contentful_black_friday_cta"
       },
       "siteCode":{
          "en-US":"kqfwz0rys3"
       },
       "meta":{
          "en-US":{
             "off":"5IF12vtaKcFJXtj8ljaDVr",
             "variation_1":"2UrVZemBoltsxHKcqRgjKk",
             "variation_2":"73GxfiNActyOZvP9Hn3sEC"
          }
       },
       "variations":{
          "en-US":[
             {
                "sys":{
                   "type":"Link",
                   "linkType":"Entry",
                   "id":"5IF12vtaKcFJXtj8ljaDVr"
                }
             },
             {
                "sys":{
                   "type":"Link",
                   "linkType":"Entry",
                   "id":"2UrVZemBoltsxHKcqRgjKk"
                }
             },
             {
                "sys":{
                   "type":"Link",
                   "linkType":"Entry",
                   "id":"73GxfiNActyOZvP9Hn3sEC"
                }
             }
          ]
       }
    }
 }
Antes de poder elegir qué entrada seleccionar de nuestro Kameleoon Container, necesitamos ver cómo obtener la variación correcta de Kameleoon. A continuación, se muestra un ejemplo con la feature key codificada contentful_black_friday_cta en el método de Kameleoon getFeatureFlagVariationKey(), que obtiene una variación para el usuario. 
import { KameleoonClient, CustomData } from '@kameleoon/nodejs-sdk';

 const client = new KameleoonClient({
   siteCode: 'a8st4f59bj',
   credentials: { clientId: 'my_client_id', clientSecret: 'my_client_secret' },
   configuration: { domain: 'www.example.com' },
 });
 async function init(): Promise {
   await client.initialize();

 // -- Get visitor code using server `request` and `response`
   const visitorCode = client.getVisitorCode({
     request: req,
     response: res,
   });

 // -- Get visitor feature flag variation key
   const variationKey = client.getFeatureFlagVariationKey(
     visitorCode,
     'contentful_black_friday_cta',
   );
 }
 init();
En el código anterior, el método getFeatureFlagVariationKey() determina si el usuario (o visitante) debe ver una de las variaciones o el contenido original. El valor corresponde a una variación que podemos obtener del campo meta del Kameleoon Container. 
"meta":{
          "en-US":{
             "off":"5IF12vtaKcFJXtj8ljaDVr",
             "variation_1":"2UrVZemBoltsxHKcqRgjKk",
             "variation_2":"73GxfiNActyOZvP9Hn3sEC"
          }
       }
Ahora actualizaremos nuestro código para incluir la obtención automática del Kameleoon Container y la utilización de sus valores para rellenar el experimento de Kameleoon, de modo que no necesite hacerlo cada vez que cree y ejecute un nuevo experimento.
Esta es una configuración única que funcionará para todos los experimentos posteriores que cree.
import { KameleoonClient, CustomData } from '@kameleoon/nodejs-sdk';
 import sdk from 'contentful-sdk';

  const client = new KameleoonClient({
    siteCode: 'a8st4f59bj', // Your Kameleoon project sitecode
    credentials: { clientId: 'my_client_id', clientSecret: 'my_client_secret' }, // Your Kameleoon API credentials 
    configuration: { domain: 'www.example.com' },
  });

  async function init(): Promise {
    await client.initialize();
  // -- Get visitor code using server request and response
    const visitorCode = client.getVisitorCode({
      request: req,
      response: res,
    });
Estamos utilizando el ID del Kameleoon Container del ejemplo JSON anterior. En una implementación real, el ID se establecería dinámicamente a través de un slug, por ejemplo. 
const kameleoonContainerEntry = await
sdk.getEntry('5XJ5TWDvAzPh7QgWN4ysaV');
Obtenemos la feature key de la entrada del Kameleoon Container: const featureKey = kameleoonContainerEntry.featureKey; Obtenemos la clave de variación: 
const variationKey = client.getFeatureFlagVariationKey(
    visitorCode,
    featureKey,

    );
Obtenemos la entrada de Contentful asociada a la variación utilizando la clave de variación: 
const variationEntry = kameleoonContainerEntry.meta[variationKey];
}
 init();
A partir de aquí, puede realizar cambios mínimos en su lógica de visualización para mostrar la entrada correcta.

​
Utilizar Kameleoon para segmentar un grupo de usuarios

Puede segmentar un grupo específico de usuarios en Kameleoon. Puede leer esta documentación que explica cómo crear segmentos de usuarios e incluirlos/excluirlos de su experimento.