Kameleoon.API.Core - Kameleoon Documentation

Ce module contient des fonctions permettant d’implémenter des variations de tests A/B côté frontend sans scintillement. Il inclut également les méthodes d’initialisation du moteur, y compris celles destinées au respect des lois sur la vie privée et à la collecte du consentement légal.

enableLegalConsent

Appelez la méthode enableLegalConsent() après avoir obtenu le consentement légal du visiteur pour activer Kameleoon. Cette méthode active le mode de fonctionnement normal de Kameleoon. Pour plus d’informations, consultez l’article Gestion du consentement.

var agreedButton = Kameleoon.API.Utils.querySelectorAll("#agreed")[0];

Kameleoon.API.Utils.addEventListener(agreedButton, "mousedown", function (event) {
  Kameleoon.API.Core.enableLegalConsent();
});

Arguments

Name	Type	Description
module	String	Nom du module à activer : `PRODUCT_RECOMMENDATION`, `AB_TESTING`, `PERSONALIZATION` ou `BOTH`. Par exemple, `PRODUCT_RECOMMENDATION` exécute le point d’entrée exclusivement avec les fonctionnalités de recommandation de produits. `AB_TESTING` active les tests A/B et la recommandation de produits (sauf si l’option personnalisée de distinction du consentement est active). `BOTH` active toutes les fonctionnalités. Si ce paramètre est omis, la méthode active par défaut le consentement légal pour tous les modules (`BOTH`).

Une option personnalisée permet également une gestion séparée du consentement pour la recommandation de produits. Lorsque cette option est active, appelez explicitement enableLegalConsent("PRODUCT_RECOMMENDATION") pour activer le module. Contactez votre gestionnaire de succès client pour activer cette fonction.

disableLegalConsent

Appelez la méthode disableLegalConsent() lorsqu’un visiteur refuse l’utilisation de Kameleoon. Cette méthode désactive le mode de fonctionnement normal. Pour plus d’informations, consultez l’article Gestion du consentement.

var disableButton = Kameleoon.API.Utils.querySelectorAll("#disable")[0];

Kameleoon.API.Utils.addEventListener(disableButton, "mousedown", function (event) {
  Kameleoon.API.Core.disableLegalConsent();
});

Arguments

Name	Type	Description
module	String	Nom du module à désactiver : “AB_TESTING”, “PERSONALIZATION” ou “BOTH”. Si omis, la méthode désactive le consentement légal pour tous les modules (`BOTH`).

Une option personnalisée permet également une gestion séparée du consentement pour la recommandation de produits. Lorsque cette option est active, appelez explicitement disableLegalConsent("PRODUCT_RECOMMENDATION") pour désactiver le module. Contactez votre gestionnaire de succès client pour activer cette fonction.

enableSinglePageSupport

La méthode enableSinglePageSupport() recharge le moteur Kameleoon lorsque l’URL actif change, indépendamment du chargement des pages du navigateur. Utilisez cette méthode pour les applications monopages (SPA) avec plusieurs URL et un seul chargement initial. Kameleoon traite chaque changement d’URL comme une nouvelle page, en activant le ciblage par URL et le suivi précis des métriques comme les pages vues.

if (location.href.indexOf("mySPAWebsitePart") != -1) {
  Kameleoon.API.Core.enableSinglePageSupport();
}

Kameleoon supprime également automatiquement tous les éléments ajoutés à la page dont les ID HTML commencent par « kameleoonElement » ou « kameleoonStyleSheet » lorsque la SPA se recharge.

enableDynamicRefresh

La méthode enableDynamicRefresh() détecte les changements d’éléments et réapplique les modifications de l’éditeur graphique. Cette méthode supporte les SPA qui modifient dynamiquement le DOM sans changements d’URL ni recharges de page, empêchant les mises à jour dynamiques de supprimer les expériences. Consultez enableSinglePageSupport() pour les autres types de SPA.

if (location.href.indexOf("cart") != -1) {
    Kameleoon.API.Core.enableDynamicRefresh();
}

getConfiguration

La méthode getConfiguration() retourne une référence à l’objet Configuration, qui contient les valeurs constantes globales pour la configuration Kameleoon de votre site.

var configuration = Kameleoon.API.Core.getConfiguration();

if (configuration.siteCode == "abcde12345") {
  document.cookie = "MyMainSite=true;";
} else if (configuration.siteCode == "12345abcdef") {
  document.cookie = "MySubSite=true;";
}

Valeur de retour

Name	Type	Description
configuration	Object	Configuration object.

load

La méthode load() initialise le moteur Kameleoon. Bien que l’initialisation se produise généralement automatiquement lors du chargement du fichier d’application, vous devrez peut-être effectuer des appels manuels. Pour recharger Kameleoon après chaque changement d’URL dans une application monopage, utilisez enableSinglePageSupport() au lieu de surveiller l’URL vous-même.

Kameleoon.API.Core.load();

Kameleoon supprime également automatiquement tous les éléments ajoutés à la page dont les ID HTML commencent par « kameleoonElement » ou « kameleoonStyleSheet » lorsque la SPA se recharge.

processRedirect

La méthode processRedirect() redirige le navigateur vers une autre URL, généralement pour les expériences A/B divisées. Utilisez cette méthode au lieu de window.location.href = redirectionURL; pour assurer un suivi précis en arrière-plan.

var experiment = Kameleoon.API.Experiments.getByName("RedirectExperiment");

if (experiment.associatedVariation.id == 123456) {
  Kameleoon.API.Core.processRedirect("https://www.mywebsite.com?variation=A");
}

Si l’URL de redirection se trouve sur un domaine différent de l’URL de base et que l’installation de Kameleoon n’inclut pas les données de session unifiées, le moteur ajoute un paramètre kameleoonRedirect-{experimentID} à l’URL cible pour garantir un suivi précis.

Arguments

Name	Type	Description
redirectionURL	String	URL pour la redirection. Ce champ est obligatoire.

runWhenConditionTrue

La méthode runWhenConditionTrue() exécute la fonction de rappel lorsque la conditionFunction retourne true. La méthode utilise un mécanisme d’interrogation, qui peut causer un scintillement. Utilisez runWhenElementPresent() à la place pour une meilleure performance. Consultez la description de runWhenElementPresent() pour plus de détails.

Kameleoon.API.Core.runWhenConditionTrue(function () {
  return typeof jQuery != "undefined";
}, function () {
  jQuery("#bloc-2345").text("Mon nouveau texte");
}, 200);

Arguments

Name	Type	Description
conditionFunction	Function	Fonction JavaScript retournant true ou false. Ce champ est obligatoire.
callback	Function	Fonction JavaScript exécutée lorsque la conditionFunction retourne true. Ce champ est obligatoire.
pollingInterval	Number	Le moteur exécute la conditionFunction périodiquement à cet intervalle. Lorsque `runWhenElementPresent()` n’est pas disponible, un pollingInterval plus bas réduit le scintillement mais augmente l’utilisation du CPU. Si omis, la méthode utilise par défaut 200 millisecondes.

runWhenElementPresent

La méthode runWhenElementPresent() exécute la fonction de rappel lorsqu’un élément précis apparaît dans le DOM. Cette méthode utilise des observateurs de mutations pour assurer la technologie anti-scintillement. Identifiez les éléments clés d’une variation, puis appelez runWhenElementPresent() avec l’élément comme premier argument et le code d’implémentation comme fonction de rappel. Cet appel garantit que les modifications s’exécutent dès que l’élément apparaît, avant que le navigateur lance un cycle de rafraîchissement de l’affichage. Pour agir sur plusieurs éléments, appelez runWhenElementPresent() séparément pour chaque élément plutôt que de ne cibler que l’élément final attendu. Un seul appel peut entraîner du scintillement si un cycle d’actualisation se produit entre l’apparition de différents éléments.

// With mutation observers management.
Kameleoon.API.Core.runWhenElementPresent("#bloc-2345", function (elements) {
 elements[0].innerText = "My new Text";
});

// Avec plusieurs sélecteurs CSS. S'exécute si l'un des éléments est présent.
Kameleoon.API.Core.runWhenElementPresent("#bloc-567, .cta-button, #bloc-789", function (elements) {
 elements[0].innerText = "More new text";
});

// Sans gestion des observateurs de mutations, Kameleoon interroge toutes les 200 ms pour vérifier si l'élément est sur la page.
Kameleoon.API.Core.runWhenElementPresent("#MyPopup.showed", function (elements) {
 Kameleoon.API.Events.trigger("popup displayed");
}, 200);

// Avec gestion des observateurs de mutations et support des applications d'une seule page, Kameleoon applique les modifications chaque fois que de nouveaux éléments sont ajoutés au DOM ou lorsqu'il y a une actualisation dynamique de l'application d'une seule page qui supprime les modifications précédentes.
Kameleoon.API.Core.runWhenElementPresent(".product-button", function (elements) {
 elements.forEach(element => {
  element.innerText = "Add To Cart";
 });
}, null, true);

Fournir cette valeur désactive les observateurs de mutation et l’anti-scintillement, revenant à l’interrogation héritée. Utilisez cet argument uniquement dans des cas spécifiques, tel que les requêtes de sélecteur complexes ayant un impact CPU élevé.

Arguments

Name	Type	Description
selector	String	Sélecteur CSS de l’élément. Pour spécifier plusieurs sélecteurs CSS, fournissez une chaîne unique séparée par des virgules. Le rappel s’exécute lorsqu’un ou plusieurs éléments existent. Ce champ est obligatoire.
callback	Function	Fonction JavaScript à exécuter lorsque l’élément apparaît dans le DOM. Ce champ est obligatoire.
pollingInterval	Number	Fournir cette valeur désactive les observateurs de mutation et revient le moteur à l’interrogation héritée, qui peut causer un scintillement. Ce champ est facultatif.
isDynamicElement	Boolean	Lorsque actif, Kameleoon suit le sélecteur s’il n’est pas trouvé immédiatement au chargement de la page et exécute le rappel à mesure que les éléments apparaissent. Le rappel se déclenche à nouveau pour chaque nouvel élément correspondant au sélecteur. Ce paramètre supporte les menus dynamiques, le défilement infini et les fenêtres contextuelles. Ce champ est facultatif.

runWhenShadowRootElementPresent

La méthode runWhenShadowRootElementPresent() exécute la fonction callback lorsqu’un élément spécifique apparaît dans un Shadow DOM défini sur mode: open.

const wrapper = document.querySelector(".shadow-wrapper");
const shadow = wrapper.attachShadow({ mode: "open" });
const span = document.createElement("span");
span.classList.add("selector-inside-wrapper");
span.textContent = "I'm in the shadow DOM";
shadow.appendChild(span);

Kameleoon.API.Core.runWhenShadowRootElementPresent('.shadow-wrapper', '.selector-inside-wrapper', (elements) => {
    elements[0].innerText = "New text" 
});

Arguments

Name	Type	Description
parentSelector	String	Sélecteur CSS pour l’élément parent. Ce champ est obligatoire.
shadowRootElementSelector	String	Sélecteur CSS à l’intérieur du shadow DOM. Ce champ est obligatoire.
callback	Function	Fonction JavaScript à exécuter lorsque l’élément apparaît dans le Shadow DOM. Ce champ est obligatoire.
isDynamicElement	Boolean	Lorsque actif, Kameleoon suit le sélecteur s’il n’est pas trouvé immédiatement et exécute le rappel à mesure que les éléments apparaissent. Le rappel se déclenche à nouveau pour chaque nouvel élément correspondant au sélecteur. Ce paramètre supporte les menus dynamiques, le défilement infini et les fenêtres contextuelles.

APIs

​enableLegalConsent

​disableLegalConsent

​enableSinglePageSupport

​enableDynamicRefresh

​getConfiguration

​load

​processRedirect

​runWhenConditionTrue

​runWhenElementPresent

​runWhenShadowRootElementPresent

enableLegalConsent

disableLegalConsent

enableSinglePageSupport

enableDynamicRefresh

getConfiguration

load

processRedirect

runWhenConditionTrue

runWhenElementPresent

runWhenShadowRootElementPresent