Passer au contenu principal
Contentful est un CMS headless : une plateforme de contenu composable qui répond aux exigences uniques du contenu numérique et de toutes les équipes qui le produisent et travaillent avec lui. Avec l’intégration Contentful, vous pouvez apporter des capacités d’expérimentation à votre CMS et exécuter des expériences sur le contenu directement depuis Contentful. Vous pouvez également utiliser la puissante solution analytique de Kameleoon pour analyser la performance des expériences Contentful. Principaux avantages :
  • Exécutez des expériences no-code avancées sur du contenu structuré.
  • Éliminez l’effet de flicker grâce au bucketing instantané server-side et sans latence.
  • Réduisez votre dépendance aux ressources développeur pour l’expérimentation.
  • Réduisez le travail manuel nécessaire pour créer des expériences dans Contentful et utilisez le puissant moteur d’expérimentation et les capacités analytiques de Kameleoon pour mesurer la performance de vos expériences.

​
Considérations

Gardez ces éléments à l’esprit lors de l’utilisation de cette intégration :
  • Vous ne pouvez utiliser cette intégration qu’avec les feature experiments.
  • Vous devez activer la solution Feature Experimentation dans votre compte Kameleoon.

​
Prérequis

Pour configurer cette intégration, vous avez besoin des informations suivantes provenant de Kameleoon :
  • Identifiants de connexion : Vos identifiants de connexion Kameleoon sont la combinaison d’adresse email et de mot de passe qui vous permettent d’accéder à votre compte Kameleoon. Cette intégration utilise l’authentification OAuth pour vous connecter à votre compte Kameleoon.
  • Sitecode : Vous devez fournir le Sitecode de votre projet. Consultez la documentation Kameleoon dédiée pour savoir où trouver votre Sitecode.

​
Installation

  1. Accédez à votre compte Contentful.
  2. Cliquez sur Apps > Marketplace, et recherchez Kameleoon.
  1. Installez l’app Kameleoon et autorisez l’accès.
  2. Sélectionnez le Sitecode de votre projet.
  3. Cliquez sur Install en haut à droite.
L’app Kameleoon est maintenant entièrement installée et prête à être utilisée.

​
Utilisation

​
Créer une feature experiment dans Kameleoon

Pour créer une nouvelle feature experiment :
  1. Connectez-vous à votre compte Kameleoon.
  2. Accédez au dashboard des feature flags.
  3. Cliquez sur New feature flag.
  4. Saisissez un nom, un projet et une feature key.
  5. Validate.
  6. Cliquez sur Add a rule > Experiment pour ajouter une règle de Delivery Experiment.
  7. Configurez la règle comme vous le souhaitez.

​
Créer une entrée Kameleoon Container dans Contentful

  1. Connectez-vous à votre compte Contentful.
  2. Cliquez sur Content.
  1. Cliquez sur Add Entry > Kameleoon Container.
  2. Ajoutez un Entry Name et sélectionnez une expérience dans la liste déroulante Kameleoon experiments.
    • Les variations associées à l’expérience que vous avez sélectionnée seront automatiquement affichées, ainsi que le pourcentage de trafic alloué.
  1. Pour chaque variation, cliquez sur Create entry and link pour créer une nouvelle entrée et l’utiliser comme contenu de votre variation, ou cliquez sur Link an existing entry si vous souhaitez utiliser une entrée existante comme contenu de la variation.

​
Préparez la publication de votre contenu

Votre Kameleoon Container est prêt à être publié lorsque vous avez complété ces quatre étapes :
Voici comment compléter chaque étape :
  • Select experiment : Vous pouvez compléter cette étape en sélectionnant une expérience dans la liste déroulante Kameleoon experiments.
  • Add content : Vous pouvez compléter cette étape en associant une entrée pour chaque variation.
  • Publish variations : Cette étape est marquée comme complétée lorsque toutes les entrées associées aux variations seront publiées.
  • Start experiment : Pour compléter cette étape, accédez à votre compte Kameleoon et utilisez la bascule manuelle pour activer le feature flag sur ON dans l’environnement de production.

​
Intégration avec votre front-end

Kameleoon Container est un nouveau type de contenu introduit dans la réponse Contentful. Il s’agit d’un conteneur qui pointe vers deux ou plusieurs valeurs réelles que nous voulons tester. Vous devez maintenant intégrer votre front-end à Kameleoon et au Kameleoon Container. Vous aurez besoin de l’aide d’un développeur pour modifier la façon dont votre front-end fonctionne afin d’accepter et de gérer programmatiquement les entrées Kameleoon Container. La gestion programmatique du Kameleoon Container est quelque chose que vous n’avez besoin de faire qu’une seule fois. Ensuite, le code utilisé pour gérer le Kameleoon Container peut être réutilisé chaque fois que vous recevez une entrée Kameleoon Container de Contentful. À partir de là, nous devons plonger plus techniquement dans la configuration du client et dans la manière dont il s’intègre à Kameleoon. Il est utile pour les développeurs de se familiariser avec le contenu que nous avons décrit ci-dessus avant de passer au guide technique ci-dessous. Les objectifs de la configuration sont :
  • Permettre l’expérimentation server-side sans pousser de nouveau code par expérience
  • Contrôler le contenu dans Contentful et les expériences dans Kameleoon
  • Sélection server-side des variations pour une livraison rapide et pour éviter l’effet de flicker

​
Comment l’app Kameleoon modifie la réponse de l’API Contentful

Comme mentionné ci-dessus, l’app Kameleoon crée un nouveau type de contenu : le Kameleoon Container. Le Kameleoon Container est un type de contenu qui imbrique les valeurs possibles pour l’expérience et contient des métadonnées sur l’expérience Kameleoon et les noms des variations.

​
Utiliser Kameleoon pour choisir la bonne variation

Nous allons créer un pseudo-back-end qui prend la réponse de l’API Contentful et utilise notre SDK NodeJS pour déterminer quelle variation afficher à l’utilisateur. Commençons par examiner la réponse JSON du Kameleoon Container renvoyée par Contentful. Notez que le type de contenu expose plusieurs champs liés à l’expérience Kameleoon : une featureKey et un meta avec les clés de variation. 
{
    "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"
                }
             }
          ]
       }
    }
 }
Avant de pouvoir choisir quelle entrée sélectionner dans notre Kameleoon Container, nous devons voir comment obtenir la bonne variation depuis Kameleoon. Ci-dessous se trouve un exemple avec la feature key codée en dur contentful_black_friday_cta dans la méthode Kameleoon getFeatureFlagVariationKey(), qui obtient une variation pour l’utilisateur. 
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();
Dans le code ci-dessus, la méthode getFeatureFlagVariationKey() détermine si l’utilisateur (ou visiteur) doit voir l’une des variations ou le contenu original. La valeur correspond à une variation que nous pouvons obtenir depuis le champ meta du Kameleoon Container. 
"meta":{
          "en-US":{
             "off":"5IF12vtaKcFJXtj8ljaDVr",
             "variation_1":"2UrVZemBoltsxHKcqRgjKk",
             "variation_2":"73GxfiNActyOZvP9Hn3sEC"
          }
       }
Maintenant, nous allons mettre à jour notre code pour inclure la récupération automatique du Kameleoon Container et l’utilisation de ses valeurs pour alimenter l’expérience Kameleoon afin que vous n’ayez pas à le faire à chaque fois que vous créez et exécutez une nouvelle expérience.
Il s’agit d’une configuration unique qui fonctionnera pour toutes les expériences ultérieures que vous créez.
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,
    });
Nous utilisons l’ID du Kameleoon Container provenant de l’exemple JSON ci-dessus. Dans une implémentation réelle, l’ID serait défini dynamiquement via un slug, par exemple. 
const kameleoonContainerEntry = await
sdk.getEntry('5XJ5TWDvAzPh7QgWN4ysaV');
Nous obtenons la feature key depuis l’entrée Kameleoon Container : const featureKey = kameleoonContainerEntry.featureKey; Nous obtenons la clé de variation : 
const variationKey = client.getFeatureFlagVariationKey(
    visitorCode,
    featureKey,

    );
Nous obtenons l’entrée Contentful associée à la variation en utilisant la clé de variation : 
const variationEntry = kameleoonContainerEntry.meta[variationKey];
}
 init();
À partir de là, vous pouvez apporter des modifications minimales à votre logique d’affichage pour afficher la bonne entrée.

​
Utiliser Kameleoon pour cibler un segment d’utilisateurs

Vous pouvez cibler un segment spécifique d’utilisateurs dans Kameleoon. Vous pouvez lire cette documentation qui explique comment créer des segments d’utilisateurs et les inclure/exclure de votre expérience.