Passer au contenu principal
Dans l’application Kameleoon, il existe plusieurs points d’entrée où vous pouvez ajouter du JavaScript personnalisé qui s’exécute sur votre site web. Cet article fournit des recommandations spécifiques pour chaque point d’entrée disponible. Veuillez noter que tous les scripts Kameleoon s’exécutent une fois par chargement de page. Avant d’implémenter des scripts personnalisés, envisagez d’utiliser la file de commandes Kameleoon pour une exécution optimisée.

​
File de commandes Kameleoon

La manière la plus efficace d’interagir avec l’API Kameleoon — que ce soit pour convertir des objectifs, définir des données personnalisées ou déclencher des événements — consiste à exploiter les déclencheurs existants de votre Tag Manager (par exemple, Google Tag Manager) en combinaison avec la file de commandes Kameleoon. Cela devrait être votre approche principale lors de l’ajout de JavaScript à Kameleoon. Au lieu d’écrire du code JavaScript long directement dans Kameleoon, vous pouvez obtenir les mêmes résultats avec seulement deux lignes de code dans votre Tag Manager.

​
Exemples

- Convertir un objectif de chiffre d’affaires Dans votre Tag Manager, créez un déclencheur sur la page de confirmation pour capturer le chiffre d’affaires, puis ajoutez le code suivant : 
// Replace kameleoonGoalID and {{revenue}} with your actual values
window.kameleoonQueue = window.kameleoonQueue || [];
window.kameleoonQueue.push(['Goals.processConversion', kameleoonGoalID, {{revenue}}])
Pour obtenir des conseils sur la création d’une conversion d’objectif depuis GTM, consultez cette documentation. -Définir une valeur de donnée personnalisée lorsque le visiteur se connecte Au lieu d’écrire du JS personnalisé dans Kameleoon, définissez la valeur directement via votre Tag Manager : 
// Replace "customDataName" and "customDataValue" with your actual values
window.kameleoonQueue = window.kameleoonQueue || [];
window.kameleoonQueue.push(['Data.setCustomData', "customDataName", "customDataValue"]);
- Déclencher un événement lorsqu’un produit est ajouté au panier Utilisez ceci pour cibler les visiteurs en fonction d’actions spécifiques : 
// Replace "customEventName" with your actual event name
window.kameleoonQueue = window.kameleoonQueue || [];
window.kameleoonQueue.push(['Events.trigger', "customEventName"]);
Si kameleoonQueue ne peut pas être utilisé, veuillez vous référer aux recommandations spécifiques pour chaque script disponible détaillées ci-dessous.

​
Script global et scripts de variation

​
Optimiser l’exécution JavaScript avec l’API d’activation

Utilisez l’API d’activation de Kameleoon pour appliquer les variations au moment approprié. Cette approche permet d’éviter les problèmes de performance et garantit une expérience fluide pour les visiteurs. Voici quelques fonctions essentielles de l’API d’activation pouvant être utilisées pour améliorer l’expérience des visiteurs :
  • runWhenConditionTrue : Exécute le code lorsqu’une condition spécifique est remplie. Par défaut, il s’exécute toutes les 200 millisecondes. Cependant, soyez prudent avec les conditions qui pourraient ne jamais se résoudre, car cela peut entraîner des boucles inutiles. Notez que la boucle continuera à s’exécuter jusqu’à ce que la fonction renvoie explicitement true. Renvoyer false ou undefined n’arrêtera pas la boucle ni ne déclenchera le rappel.
❌ Utilisation incorrecte (risque de boucle infinie) : L’exemple suivant ne renverra jamais true sur toutes les pages autres que la page produit, ce qui fera tourner la boucle indéfiniment : 
Kameleoon.API.Core.runWhenConditionTrue(() => {
    return window.dataLayer && window.dataLayer.find(layer => layer.pageType === "product");
}, () => {
    // Product page logic here
});
✅ Approche recommandée : Renvoyez toujours true pour sortir de la boucle, puis gérez la logique à l’intérieur du rappel : 
let pageTypeLayer;
Kameleoon.API.Core.runWhenConditionTrue(() => {
    pageTypeLayer = window.dataLayer && window.dataLayer.find(layer => layer.pageType);
    return pageTypeLayer; 
}, () => {
    if (pageTypeLayer?.pageType === "product") {
        // Product page logic here
    }
});
Il est préférable de récupérer les informations en utilisant l’URL ou les cookies/localStorage plutôt que de dépendre de runWhenConditionTrue pour attendre le dataLayer ou d’autres objets à chargement tardif, comme lors de la tentative d’obtention d’informations sur le type de page. Cette approche garantit une exécution plus rapide et de meilleures performances.
  • runWhenElementPresent : Cette méthode garantit que votre code s’exécute uniquement lorsqu’un élément spécifique est présent dans le DOM, évitant les retards inutiles causés par des éléments chargés dynamiquement.

​
Points clés à considérer

  • Utilise les Mutation Observers par défaut (recommandé pour la performance).
  • Si les Mutation Observers sont désactivés sur votre site, vous pouvez spécifier un intervalle d’interrogation comme 3e argument de cette méthode.
  • Si l’élément est inséré dynamiquement dans le DOM, définissez isDynamicElement sur true comme 4e argument de cette méthode :
Utilisez le code ci-dessous avec parcimonie et uniquement lorsque c’est absolument nécessaire. Limitez son utilisation au nombre minimal de cas et évitez de l’appliquer à plusieurs éléments simultanément afin de maintenir des performances optimales de la page.Soyez attentif au risque potentiel de boucle infinie si le code source de la page modifie l’élément à chaque mise à jour.
Kameleoon.API.Core.runWhenElementPresent('#myDynamicElement', ([elem]) => {
	// Logic once the element loaded
}, null, true); // isDynamicElement is set to true

​
Définissez la portée de votre code pour des pages spécifiques

Pour optimiser la performance, assurez-vous que votre code s’exécute uniquement sur les pages pertinentes. Cela est particulièrement important lors de l’utilisation de méthodes basées sur des boucles comme runWhenConditionTrue et runWhenElementPresent, car l’exécution de ces méthodes sur l’ensemble du site peut entraîner des exécutions inutiles et affecter les performances. Par exemple, si vous attendez des informations de chiffre d’affaires dans le dataLayer, encapsulez votre code dans une condition qui vérifie si l’URL correspond à la page de confirmation. Cette approche garantit que le code ne s’exécute que sur la page de confirmation au lieu d’être déclenché sur tout le site. Exemple : Cibler une page de confirmation spécifique avant d’exécuter une boucle 
if (document.location.href.includes('/confirmation')) {
    let revenueLayer;
    Kameleoon.API.Core.runWhenConditionTrue(() => {
        revenueLayer = window.dataLayer && window.dataLayer.find(layer => layer.revenue);
        return revenueLayer;
    }, () => {
        Kameleoon.API.Goals.processConversion(goalId, revenueLayer.revenue);
    });
}
De même, si vous attendez qu’un élément soit chargé sur la page, assurez-vous que l’élément est censé être affiché à un moment donné et n’exécutez le script que sur la page pertinente. 
if (document.location.href.includes('/subscription')) {
    Kameleoon.API.Core.runWhenElementPresent("#form", () => {
        // Add the rest of your logic here
    });
}

​
3. Préférez le CSS pour les modifications visuelles plutôt que JavaScript, notamment lorsque vous traitez des variations dans des scripts

Utiliser le CSS au lieu du JavaScript se traduit par un rendu plus rapide et plus fluide. Le CSS peut être utilisé pour masquer ou modifier des éléments, échanger des blocs et changer des styles ou du texte.

​
Gestion des Single Page Applications (SPA)

Si une expérience s’exécute sur une application monopage (SPA) ou une page mise à jour dynamiquement, des étapes d’implémentation spécifiques sont requises. Contrairement aux sites web traditionnels, les SPA ne rechargent pas les pages entières, donc Kameleoon doit identifier le moment où les mises à jour de contenu se produisent. Veuillez consulter le guide sur la mise en place d’une expérience sur une application monopage pour les meilleures pratiques.

​
Segments / Déclencheurs

La première bonne pratique consiste à baser le ciblage sur des données immédiatement disponibles lors du chargement de la page. Cela comprend des informations telles que l’URL de la page, le type de navigateur, le type d’appareil et toutes les données stockées dans les cookies ou le stockage local. Si votre ciblage nécessite des données qui ne sont pas immédiatement accessibles, suivez ces directives pour assurer une exécution efficace et éviter les retards inutiles.

​
1. Condition JavaScript personnalisée

Cette condition vous permet d’utiliser du JavaScript personnalisé pour cibler les visiteurs. Deux options principales sont disponibles : ####- a. Vérifier la condition immédiatement Ce script s’exécute toutes les 75 millisecondes avant que le DOM ne soit entièrement chargé, puis toutes les 250 millisecondes par la suite. Par défaut, il renvoie undefined, ce qui fait que le script continue de s’exécuter en boucle jusqu’à ce qu’il renvoie explicitement true (pour inclure le visiteur) ou false (pour l’exclure). Assurez-vous toujours que votre condition finisse par se résoudre en true ou false pour éviter des boucles inutiles. Voici un exemple optimisé : 
if (window.dataLayer && window.dataLayer.some(layer => layer.pageType == "homepage")) return true; 

else if (window.dataLayer && window.dataLayer.some(layer => layer.pageType != "homepage")) return false;
####- b. Exécuter la condition de manière asynchrone Utilisez ce script lorsque vous devez attendre une réponse d’un service web externe ou d’une API avant de cibler le visiteur. Une fois la réponse reçue, appelez setTargeting(true) ou setTargeting(false). Voir le code ci-dessous.
  • Si vous voulez cibler un élément spécifique, utilisez plutôt la condition native “Élément sur la page”.
  • Si vous voulez attendre des informations sur la page, utilisez l’option “vérifier la condition immédiatement” ci-dessus.
const userId = localStorage.getItem("user_id"); 
if (!userId) {
   setTargeting(false);
}
// Example API endpoint - replace with your actual endpoint
const apiUrl = `https://api.example.com/check-segment?userId=${userId}`;

fetch(apiUrl, { method: "GET", headers: { "Content-Type": "application/json" } })
  .then(response => response.json())
  .then(data => {
    if (data && data.isInSegment) {
      setTargeting(true);
    } else {
      setTargeting(false);
    }
  })
  .catch(error => {
    setTargeting(false);
  });

​
2. Événement personnalisé

L’utilisation d’événements personnalisés est un moyen efficace et passif de cibler les visiteurs. Plutôt que de surveiller continuellement les conditions, cette méthode écoute un événement personnalisé spécifique que vous définissez et déclenche le ciblage lorsque cet événement se produit. Cette approche est particulièrement utile dans deux scénarios clés :

​
Scénario 1 : Lorsque la logique de ciblage est complexe

Il est préférable d’éviter d’intégrer toute la logique directement dans une condition JavaScript au sein du ciblage. À la place, vous pouvez définir un événement personnalisé dans le script global. Par exemple, si vous voulez cibler les visiteurs sur la page panier qui ont au moins trois produits dans leur panier et un montant total supérieur à 30 $, vous devriez déclencher un événement dans le script global une fois ces conditions remplies, plutôt que d’écrire toute la logique dans la condition de segment JavaScript.

​
Scénario 2 : Lorsque plusieurs segments partagent une logique similaire

Si plusieurs segments nécessitent la même variation ou des variations légèrement différentes de la même condition, l’utilisation d’un événement personnalisé évite le code redondant et améliore la maintenabilité. Exemple : Vous devez cibler les visiteurs selon différents montants de panier. Au lieu de dupliquer la logique dans plusieurs segments, vous définissez un script unique dans le script global et déclenchez différents événements personnalisés pour chaque segment : 
if (document.location.href.includes('/cart')) {
    Kameleoon.API.Core.runWhenElementPresent("#cartContainer", ([cartContainer]) => {
        if (cartContainer.length >= 3) {
            const totalAmount = Number(cartContainer.querySelector('#totalAmount').innerText);
          
            if (totalAmount >= 90) 
                Kameleoon.API.Events.trigger("3ArticlesAbove90"); // Segment 1
            else if (totalAmount >= 60) 
                Kameleoon.API.Events.trigger("3ArticlesAbove60"); // Segment 2
            else if (totalAmount >= 30) 
                Kameleoon.API.Events.trigger("3ArticlesAbove30"); // Segment 3
        }
    });
}

​
Données personnalisées

Les données personnalisées, comme les événements personnalisés, permettent d’éviter le code en double en vous permettant de stocker et de réutiliser des valeurs. Vous pouvez définir des données personnalisées dans le script global ou dans d’autres scripts, puis les utiliser au sein des segments. Cependant, les données personnalisées diffèrent des événements personnalisés sur deux points clés :

​
a. Par les options de portée : “Page”, “Visite” ou “Visiteur”

Contrairement aux événements personnalisés, qui ne s’appliquent qu’à la page en cours, les données personnalisées peuvent persister sur plusieurs pages et sessions :
  • Portée Visite : Conserve la valeur pendant toute la session d’un visiteur.
  • Portée Visiteur : Stocke la valeur jusqu’à 365 jours, selon la politique relative aux cookies.
Par exemple, si vous voulez afficher une bannière sur toutes les pages une fois qu’un visiteur s’est connecté, vous pouvez définir une valeur de donnée personnalisée à “true” avec une portée de visite. Cela garantit que le visiteur reste ciblé avec la bannière sur toutes les pages pendant sa session après s’être connecté.

​
b. Par des insights expérimentaux améliorés

Les données personnalisées peuvent servir de filtres et de critères de ventilation sur la page de résultats des expériences. Cela permet des insights plus approfondis et une analyse plus efficace du comportement des visiteurs. Pour découvrir toutes les conditions de ciblage disponibles dans le générateur de segments, veuillez consulter cette documentation.