Passer au contenu principal
Utilisez les SDKs côté client correspondant au framework préféré pour exécuter des expériences ou des feature flags. Si le module Feature Experimentation n’est pas disponible ou si l’installation du SDK n’est pas souhaitée, suivez la solution de contournement décrite dans cet article pour exécuter des expériences en utilisant l’Activation API.

​
Contexte

Les frameworks JavaScript côté client modernes (React, Angular, Vue, etc.) gèrent l’arborescence DOM et les éléments (implémentant souvent un DOM virtuel). Cette gestion interne rend difficile l’implémentation de tests côté client en dehors du framework spécifique, car les manipulations du DOM entrent en conflit avec le comportement du framework. Les modifications externes apportées aux éléments ou à la logique sont souvent écrasées. Des solutions de contournement existent pour ces problèmes, telles que l’utilisation des Mutation Observers DOM, mais le code externe doit les gérer avec précaution. Plutôt que d’utiliser une approche externe intrusive, implémentez les variations directement dans la base de code React, Angular ou Vue existante et déclenchez les expériences de manière programmatique. Cette logique reflète l’utilisation des SDK — le moteur frontend Kameleoon sert d’équivalent au SDK JavaScript.
Les techniques décrites dans cet article nécessitent un redéploiement du code source JS pour lancer des expériences ou des personnalisations. Bien que cette approche simplifie le codage, elle manque de la flexibilité des méthodologies Kameleoon standard qui permettent des lancements sans déploiements IT. Un développeur ayant accès au dépôt doit effectuer l’implémentation.L’implémentation externe d’expériences JS (via le code injecté par Kameleoon) ou une combinaison des deux approches reste possible.
Pour utiliser les méthodes de l’Activation API présentées ici, installez Kameleoon dans l’application côté client en suivant cette documentation.
Le processus d’installation correspond à celui d’un site Web standard — ajoutez un fichier d’application JavaScript externe contenant le moteur Kameleoon et l’Activation API.
Vérifiez que Kameleoon est entièrement chargé avant d’exécuter le code de l’application qui déclenche les expériences en écoutant l’événement Kameleoon::Started. Vous pouvez également charger le script Kameleoon de manière synchrone dans la page de chargement HTML avant le code du framework.

​
Création et configuration de l’expérience

Les étapes correspondent à celles des expériences A/B standard (création de variations, sélection d’objectifs et intégration analytique). Notez les exigences suivantes :
  • Créez une expérience à l’aide de l’éditeur de code.
  • Sélectionnez la condition de ciblage Déclencheur explicite pour déclencher l’expérience manuellement via l’API.
Notez les identifiants de l’expérience et de la variation pour les utiliser dans le code.
Laissez le code JS des variations vide dans la plupart des cas. Cependant, inclure des données JSON dans les variations est utile pour récupérer des paramètres dans le code de l’application ; ces paramètres peuvent être mis à jour dans l’interface Kameleoon sans nécessiter de redéploiements supplémentaires.

​
Exemple de code pour déclencher une expérience

L’exemple de code ci-dessous montre comment déclencher une expérience et obtenir la variation associée pour l’utilisateur actuel. Kameleoon.API.Experiments.getAll() n’inclut pas les expériences qui ne sont pas lancées via l’interface. Cette configuration permet de préparer les déploiements de code et de lancer les expériences indépendamment — généralement, les équipes IT planifient les déploiements tandis que les product owners planifient les lancements. 
var variationID;

// Make sure Kameleoon is loaded and active at this point
var experiment = Kameleoon.API.Experiments.getById(75253);

/*
  The experiment is not currently live (not launched yet, or paused).
  The default behavior should take place.
*/
if (!experiment) {
  variationID = 0;
} else {
  Kameleoon.API.Experiments.trigger(experiment.id, false);

  /*
    The experiment is not activated, which usually means the user has not been
    assigned a variation (part of the traffic was not assigned to any variation),
    or capping requirements are not met. Again, the default behavior should happen.
  */
  if (!experiment.associatedVariation) {
    variationID = 0;
  } else {
    variationID = experiment.associatedVariation.id;

    /*
      Illustration of the JSON parameterization technique - the additionalParameters
      variable will now be equal to the JSON content we set in Kameleoon's back-office.
    */
    var additionalParameters = Kameleoon.API.Variations.execute(variationID);
  }
}

// This code implements the changes related to the experiment

if (0 == variationID) {
  // Default / reference number of products to display
  recommendedProductsNumber = 5;
} else if (148382 == variationID) {
  // Variation updating the number of recommended products to 10
  recommendedProductsNumber = 10;
} else if (187791 == variationID) {
  // Variation updating the number of recommended products to 8
  recommendedProductsNumber = 8;
}
Configurez le code JS de variation dans l’interface Kameleoon comme suit pour récupérer les données JSON dépendantes de la variation dans l’application : 
return {timeout: 500, errorMessage: "Something went wrong", productIDs: [536, 892]};