Passer au contenu principal
Disons que vous souhaitez tester différentes variations de votre page produit et mesurer la façon dont les visiteurs interagissent avec elle en fonction de KPI clés, tels que le nombre d’actions « Add to cart », les entrées dans le tunnel de paiement, et finalement, le nombre de commandes finalisées. Imaginez une page produit typique, comme illustré dans l’image ci-dessous. Un utilisateur peut soit choisir d’acheter le produit immédiatement, soit l’ajouter à son panier. Mais que se passerait-il si la plupart de vos visiteurs n’achetaient généralement qu’un seul produit ? Dans ce cas, vous pourriez envisager de n’afficher qu’un seul CTA « Buy Now » pour simplifier le processus de paiement et réduire les frictions pour vos utilisateurs.
Il existe plusieurs façons de créer des expériences avec Kameleoon. Par exemple, vous pouvez :
  • Test par content swap : chaque variante de votre expérience réside sur un template Shopify différent, accessible via une URL de page dédiée (par exemple, www.mystore.com/products/products/produc-name?view=version-b). L’outil d’A/B testing permet d’échanger votre contenu avec la variante (par exemple, les pages B, C, etc.).
  • Utiliser un éditeur visuel : créez des variantes directement sur votre page produit à l’aide de notre Graphic editor, ou personnalisez-les en injectant du JS/CSS.
  • Tirer parti du Liquid de Shopify et d’un SDK JS : ajoutez de la logique dans votre template Liquid pour activer ou désactiver des variantes spécifiques pour un sous-ensemble d’utilisateurs.
Explorons chaque méthode plus en détail. Avant de commencer, assurez-vous que Kameleoon est installé sur votre boutique Shopify — cela est requis pour exécuter toute expérience.
  • Si vous exécutez des expériences web, nous recommandons d’utiliser notre application Shopify x Kameleoon, qui simplifie la configuration. Assurez-vous de consulter notre documentation pour des instructions étape par étape.
  • Si vous exécutez des feature flags ou des feature experiments, veuillez suivre les directives décrites dans notre documentation sur la feature experimentation.

​
Test par Content Swapping

Un test Content Swapping est une expérience A/B/n où différents contenus sont affichés aux utilisateurs sous la même URL, chacun représentant une variante de la même page. Contrairement aux redirections URL, cela ne crée pas de Sample Ratio Mismatch Avec Shopify, les tests de content swapping sont faciles à mettre en place en utilisant le paramètre URL ?view, qui vous permet de servir des templates alternatifs pour la même page. Par exemple :
  • https://kameleoon-segment-test.myshopify.com/products/vans-sh-8-hi
  • https://kameleoon-segment-test.myshopify.com/products/vans-sh-8-hi?view=version-b
Dans ce cas, ?view=version-b utilise la fonctionnalité de templates alternatifs de Shopify, vous permettant de créer plusieurs versions de templates pour les produits, collections, paniers et plus — parfait pour les expériences de content swapping. Maintenant, voyons comment configurer un test de content swap dans Shopify et Kameleoon. Dans votre admin Shopify, allez dans Online Store > Themes > Actions > Edit Code, et ouvrez le template product.liquid. Le template comprend deux sections principales :
  • product-template — contient le code source de la page produit.
  • product-recommendations — contient le code du bloc de recommandation « You may also like ».
Pour mettre en place votre expérience de content swap, vous devez créer un template alternatif pour la variante B et dupliquer la section product-template, en supprimant le code lié au bouton Add to Cart. Voici comment procéder :
  1. Cliquez sur Add a new template dans votre éditeur de thème Shopify.
  2. Choisissez le type de template Product et nommez-le (nous avons utilisé version-b, mais vous pouvez utiliser n’importe quel nom).
Le nom que vous choisissez apparaîtra dans l’URL (par exemple, ?view=version-b), alors choisissez quelque chose qui a du sens pour votre équipe mais qui n’est pas déroutant pour les utilisateurs.
  1. Cliquez sur Add a new section ; nommez-le product-template-version-b, et copiez et collez le code de votre fichier product-template.liquid original dans cette nouvelle section.
Vous devriez maintenant avoir quatre fichiers liquid.
  1. Supprimez le code du bouton Add to cart de la section product-template-version-b.liquid.
  1. Appelez votre section modifiée (product-template-version-b) depuis le template produit alternatif que vous avez créé (product.version-b.liquid).
Votre code mis à jour devrait ressembler à ceci :
Une fois vos modifications enregistrées, vous êtes prêt ! Vous avez maintenant une deuxième variante de votre page produit. Shopify vous permet de charger des fichiers de template alternatifs en utilisant le paramètre d’URL ?view=. Tant que la valeur correspond à un fichier template de votre thème, Shopify rendra cette version de la page. Par exemple, visiter https://kameleoon-store.myshopify.com/products/vans-sh-8-hi?view=version-b affichera désormais la page produit sans le bouton Add to Cart — comme prévu.
La majeure partie du travail difficile est faite — il est maintenant temps de configurer votre expérience de content swap dans Kameleoon, afin que 50 % de vos visiteurs voient la variation B au lieu de la page produit originale. C’est un processus simple :
  1. Allez sur l’application Kameleoon.
  2. Cliquez sur New experiment > With the code editor.
  3. Saisissez les informations requises et cliquez sur Create.
Le Code editor s’ouvrira. À partir de là, vous pouvez configurer et lancer votre expérience.
  1. Cliquez sur le chevron à côté de Add variation > Add code variation.
  1. Ajoutez le code suivant, en adaptant les variables VIEW et SELECTOR à votre cas d’usage
var VIEW = 'version-b';        // Alternate template handle, e.g. 'version-b'
var SELECTOR = '#MainContent'; // Main container selector

Kameleoon.API.Core.runWhenElementPresent(
  SELECTOR,
  function () {
    fetch(window.location.pathname + '?view=' + encodeURIComponent(VIEW), {
      credentials: 'same-origin'
    })
      .then(function (r) { return r.text(); })
      .then(function (html) {
        var doc = new DOMParser().parseFromString(html, 'text/html');
        var newContent = doc.querySelector(SELECTOR) || doc.body;

		var main = document.querySelector(SELECTOR);
        main.replaceWith(newContent);
      })
      .catch(function (err) {
        console.error('[Kameleoon] Swap failed:', err);
      });
  }
);
La variation B est maintenant configurée. Vous n’êtes plus qu’à un pas de lancer votre expérience. Utilisez les onglets de la barre latérale de gauche pour définir :
  • Targeting : définissez qui doit voir l’expérience (tous les utilisateurs, des segments d’utilisateurs spécifiques).
  • Traffic allocation : choisissez comment répartir les visiteurs entre l’original et la variation B.
  • Goals : définissez comment vous mesurerez le succès (clics, conversions, commandes).
Étant donné que nous voulons exécuter cette expérience pour 50 % de notre trafic sur les pages produits, nous allons configurer le ciblage comme suit :
  • Inclure les URL qui contiennent /products/.
  • Exclure les URL avec le paramètre view=version-b pour éviter une boucle de redirection infinie.
Ensuite, choisissez l’objectif principal utilisé pour mesurer le succès de votre expérience. Dans ce cas, nous voulons augmenter le nombre de commandes. Si vous avez installé l’application Shopify x Kameleoon, sélectionnez l’objectif Shopify orders automatiquement suivi.
Votre expérience est maintenant prête à être mise en ligne ! Nous recommandons fortement de simuler votre expérience avant de la lancer. La simulation vous permet de vérifier que les visiteurs assignés à la variation Buy it now voient correctement le contenu de l’URL B. Une fois votre expérience simulée, retournez dans Kameleoon et cliquez sur Launch pour lancer votre expérience. La collecte de données commencera dès la fin de la première visite ciblée sur votre boutique. En règle générale, nous recommandons d’exécuter l’expérience pendant 2 à 3 semaines, en fonction de votre volume de trafic, avant d’évaluer les résultats. Kameleoon vous aidera à déterminer quand arrêter l’expérience en analysant des indicateurs clés tels que la signification statistique, l’uplift et la stabilité des données dans le temps. Pour une compréhension complète du fonctionnement du modèle statistique de Kameleoon, nous vous recommandons vivement de lire cette documentation. Lorsque le template version-b est le gagnant, aucun code supplémentaire n’est nécessaire. Le client peut simplement utiliser ce template comme template par défaut. Vous pouvez utiliser la méthode de content swap que vous venez d’implémenter sur d’autres pages Shopify en utilisant la même approche.

​
Créer des variantes avec un éditeur graphique ou de code

Dans la section précédente, nous avons exploré comment configurer un test de content swapping en utilisant le paramètre d’URL de template alternatif de Shopify — une méthode puissante si vous savez exactement quelles sections de template mettre à jour et possédez les compétences techniques pour modifier vos fichiers Liquid. Une autre approche flexible et efficace consiste à créer des variantes de page à l’aide d’un éditeur graphique ou de code. Au lieu de rediriger les visiteurs vers une URL alternative, cette méthode modifie les pages à la volée — par exemple, en masquant le bouton Add to Cart en temps réel. L’avantage ? Les changements se produisent si rapidement que les utilisateurs ne remarqueront pas qu’ils font partie d’un A/B test. La plus grande différence ici est la facilité d’utilisation. Le Graphic editor de Kameleoon vous permet de supprimer, modifier ou réorganiser visuellement des éléments sans toucher au code. Cependant, pour des changements plus avancés, des connaissances en JavaScript et CSS seront utiles. Heureusement, Kameleoon propose également un puissant Code editor pour cela. Voyons comment configurer cette expérience dans Kameleoon :
  1. Ouvrez l’application Kameleoon.
  2. Cliquez sur New experiment > With the graphic editor.
  3. Saisissez les informations requises et cliquez sur Create.
Le Graphic editor de Kameleoon s’ouvrira directement sur l’URL de page produit de votre choix.
  1. Sélectionnez le bouton Add to Cart.
  2. Pour masquer le bouton :
    • Cliquez sur le menu à trois points dans la barre latérale gauche > Hide ;
    • Ou cliquez sur l’icône Hide dans la barre d’outils qui apparaît sous l’élément sélectionné.
C’est tout — la variation B est maintenant prête ! Finalisez votre expérience en la configurant comme la configuration split URL :
  • Allouez 50 % du trafic.
  • Ciblez toutes les pages avec des URL contenant /products/.
  • Définissez Shopify Orders comme votre KPI principal.
Comme pour l’expérience split URL, nous vous recommandons fortement de simuler votre expérience sur votre appareil pour vous assurer que la variation s’affiche correctement sur toutes les pages produit. Enfin, cliquez sur Launch pour démarrer l’expérience sur votre boutique. Vous pouvez également obtenir le même résultat en ajoutant du CSS ou du JavaScript directement dans la variation à l’aide du Code editor de Kameleoon.

​
Utiliser le SDK JS dans Liquid pour activer/désactiver des fonctionnalités

L’activation ou la désactivation de code directement dans votre fichier product.liquid en utilisant des feature flags et le SDK JavaScript de Kameleoon est l’option la plus avancée parmi les trois techniques que nous avons couvertes. Bien que plus technique, elle est extrêmement puissante si vous souhaitez déployer progressivement des fonctionnalités à vos utilisateurs. En règle générale, les feature flags nécessitent un SDK côté serveur intégré dans votre infrastructure backend. Ces SDK gèrent des tâches telles que le bucketing des utilisateurs, le ciblage et le suivi des résultats des expériences. Cependant, sur Shopify, vous ne contrôlez pas le serveur, donc les SDK côté serveur ne sont pas une option. C’est là que le SDK JS côté client de Kameleoon entre en jeu. Le SDK vous permet d’exécuter des feature experiments entièrement dans le navigateur, dans les fichiers de votre thème Shopify. Si vous êtes à l’aise avec l’édition de templates Liquid, c’est l’approche recommandée. Pour commencer :
  1. Allez sur l’application Kameleoon
  2. Naviguez vers le menu Feature flags.
  3. Cliquez sur New feature flag et suivez les étapes de ce guide.
Votre feature flag doit contenir une règle d’expérience avec plusieurs variations, avec Off comme contrôle (comportement original). Une fois votre feature flag créé dans Kameleoon, notez la clé du feature flag (par exemple, shopify-pdp-page). Vous aurez besoin de cette clé pour référencer le flag dans le code de votre thème Shopify. Maintenant, il est temps d’écrire la logique dans votre fichier product.liquid (ou product-template.liquid) qui contrôlera l’affichage ou le masquage du CTA Add to Cart en fonction de la variation du visiteur. Voici l’objectif :
  • Si le visiteur est dans la variation B, nous masquerons le CTA.
  • Si le visiteur est dans la variation A (le contrôle), nous afficherons le CTA.
Ce que fait le script :
  • S’assure que le SDK JS Kameleoon est chargé et initialisé.
  • Vérifie si le feature flag est actif et dans quelle variation le visiteur est bucketé.
  • Applique la logique pour masquer ou afficher le CTA en conséquence.
Pour mettre en œuvre :
  1. Dans votre admin Shopify, allez dans Online Store > Themes > Actions > Edit Code.
  2. Ouvrez le fichier product-template.liquid (ou équivalent).
  3. Insérez la logique de feature flag Kameleoon.
  1. Cliquez sur Save pour appliquer les modifications à votre thème.
C’est tout ! Votre nouvelle feature experiment utilisant le SDK JS Kameleoon est maintenant en ligne.