Le commerce électronique amélioré est une très belle amélioration du suivi du commerce électronique assez boiteux et basé sur les transactions dans Universal Analytics. Au lieu de regarder aveuglément ce qui se passe sur une page de reçu, le commerce électronique amélioré développe l’ensemble de votre boutique en ligne en un seul grand entonnoir intitulé “Comportement d’achat”, et vous pouvez également zoomer sur l’entonnoir de paiement. De plus, l’ajout d’un suivi à l’échelle du produit est incroyablement utile, et cela nous a permis de penser à tout actif (notre contenu, par exemple) sur notre site comme quelque chose que nous pourrions suivre via les rapports sur le commerce électronique amélioré.
Le suivi du commerce électronique amélioré via Google Tag Manager est assez simple. Cela se résume à une couche de données correctement formatée, que GTM utilisera ensuite pour envoyer les résultats à Google Analytics.
Maintenant, le problème avec la couche de données, c’est que vous voulez essayer pour le rendre aussi indépendant que possible de la plate-forme. Je veux dire, cela n’a pas de sens d’encoder des objets dans la couche de données pour les seuls besoins d’une plate-forme, car une syntaxe d’objet complexe rendra assez difficile la réutilisation des mêmes informations pour des plates-formes qui pourraient avoir une syntaxe complètement différente.
Le commerce électronique amélioré nécessite un très syntaxe spécifique dans l’objet Data Layer. En plus de cela, il existe des personnalisations très mal conçues, spécifiques à Google Analytics, que vous devrez mettre en œuvre si vous souhaitez utiliser la couche de données pour le commerce électronique amélioré. Un exemple de ces personnalisations consisterait à ajouter des dimensions et/ou des statistiques personnalisées au niveau du produit à la charge utile.
Définitions personnalisées à l’échelle du produit à la manière de GTM
Voici un exemple. Envoyons une dimension personnalisée à l’échelle du produit avec notre action “Ajouter au panier”. La dimension personnalisée indiquera si le produit est une promotion ou un article standard. Le code dont vous auriez besoin dans votre couche de données ressemblerait à ceci :
window.dataLayer = window.dataLayer || []; window.dataLayer.push({ 'event' : 'addToCart', 'ecommerce' : { 'add' : { 'products' : [{ 'id' : '12345', 'name' : 'ACME Flame Thrower', 'dimension2' : 'Promotion' }] } } }); Ce hit préparerait la couche de données pour une action “Ajouter au panier”, où la valeur ‘Promotion’ est envoyé à Google Analytics vers l’index de dimension personnalisée 2.
Maintenant, ce serait bien dans un monde parfait, où vous avez un modèle de coopération incroyablement agile avec vos propres développeurs et avec les développeurs de plateformes tierces que vous avez sur votre site. Si la dimension personnalisée doit changer, vous pouvez simplement leur demander rapidement de pousser une mise à jour vers la couche de données, où dimension2 est remplacé par le nouveau numéro d’index.
Cependant, c’est rarement la réalité. En outre, toutes les autres parties de l’objet Data Layer ci-dessus peuvent être facilement réutilisées dans d’autres plates-formes, et les noms de clé (par exemple, ‘id’, ‘name’) sont explicites, mais ‘dimension2’ ne sonnera tout simplement pas une cloche avec plates-formes qui ne pensent pas en termes de dimensions. Nous avons donc pris une couche de données agnostique et l’avons rendue très propriétaire, en respectant les besoins d’une seule plate-forme (Google Analytics) seule.
Utilisez plutôt une variable JavaScript personnalisée
Il s’avère que vous pouvez également utiliser une variable JavaScript personnalisée pour transférer les charges utiles de commerce électronique amélioré vers Google Analytics :
Nous pouvons ainsi utiliser une variable JavaScript personnalisée pour effectuer toutes les personnalisations spécifiques à la plate-forme, et nous pouvons laisser notre couche de données aussi générique que possible.
Supposons donc que nous ayons toujours la couche de données dans son état normal, mais sans la clé ‘dimension2’ :
window.dataLayer = window.dataLayer || []; window.dataLayer.push({ 'event' : 'addToCart', 'ecommerce' : { 'add' : { 'products' : [{ 'id' : '12345', 'name' : 'ACME Flame Thrower' }] } } }); Nous voulons déclencher la balise GA, qui envoie l’action Ajouter au panier à Google Analytics, lorsque cette charge utile est poussée dans la couche de données, mais nous voulons également ajouter la dimension personnalisée à la charge utile sans avoir à modifier le dataLayer.push() méthode.
Pour ce faire, vous devez d’abord créer un nouveau Variable de couche de donnéesqui renvoie la charge utile “ecommerce” :
Cette variable renvoie la valeur de la clé ‘ecommerce’ dans le modèle de données. Remarque, j’utilise Version 1 de la couche de données, car c’est ce que GTM utilise pour le commerce électronique amélioré. Il protège vos objets de commerce électronique amélioré contre ce qu’on appelle un fusion récursivece qui entraînerait la persistance de chaque charge utile de “commerce électronique” dans tous les objets précédents, par exemple les “promotions” et les “impressions” dans chaque hit, ce qui entraînerait l’envoi de nombreuses informations supplémentaires non valides à Google Analytics.
Une fois que vous avez cette variable en place, vous aurez besoin de la variable JavaScript personnalisée réelle, que j’ai nommée {{EEC – Ajouter au panier avec dimension}}.
function() { var dIndx = '2'; // This is the Custom Dimension Index // Make a shallow copy of the ecommerce object var ecom = JSON.parse(JSON.stringify({{DLV - ecommerce}})); var ecomAddProducts = ecom['add']['products']; ecomAddProducts[0]['dimension' + dIndx] = ecomAddProducts[0]['id'] === '12345' ? 'Promotion' : 'Regular'; return {'ecommerce' : {'add' : {'products' : ecomAddProducts}}}; } Sur la première ligne, vous définissez l’index de la dimension personnalisée. Ensuite, vous créez une petite variable d’espace réservé pour la clé ‘products’ dans le {'ecommerce' : {'add' : {}} } chose.
Ensuite, vous allez faire une copie de la variable originale {{DLV – ecommerce}} en utilisant le JSON.parse(JSON.stringify(obj)) duper. Cela permet d’éviter que plusieurs itérations de la variable JS personnalisée n’exécutent par inadvertance les modifications que vous effectuez encore et encore sur la variable source, ce qui entraînerait des résultats inattendus.
Ensuite, vous vérifiez essentiellement si le premier (unique) produit du tableau ‘products’ a l’ID ‘12345’. Si c’est le cas, vous ajoutez la clé de dimension personnalisée “dimension2” dans l’objet produit avec la valeur “Promotion”. Si l’ID est autre chose, la valeur de la dimension est définie sur “Normal”.
Vous pouvez être très créatif ici, en récupérant des identifiants valides à partir d’une table de consultation, par exemple. L’essentiel est de retourner un objet ‘ecommerce’ complet dans la variable JavaScript personnalisée. C’est ainsi que GTM fonctionne. Si vous ne renvoyez pas un objet ‘ecommerce’ syntaxiquement valide, Enhanced Ecommerce ne fonctionnera pas.
Juste pour clarifier : un valide L’objet ‘ecommerce’ signifie que la charge utile doit être conçue en fonction de la façon dont vous créeriez l’objet de la couche de données. Un bon endroit pour trouver plus d’informations est dans le guide du développeur pour la couche de données de commerce électronique améliorée.
Choses à garder à l’esprit
Pour que la méthode Custom JavaScript Variable fonctionne avec GTM, vous devrez vous souvenir des étapes simples suivantes :
-
Utilisez une variable JavaScript personnalisée qui renvoie une valeur valide
{'ecommerce' : {}}chose -
Décochez Utiliser la couche de données dans vos paramètres de balise GA
-
Sélectionnez la variable que vous avez créée en (1) dans le menu déroulant intitulé Lire les données de la variable
C’est tout ce qu’il faut changer. Votre balise doit toujours se déclencher sur le déclencheur d’événement personnalisé pour le nom de l’événement : Ajouter au panier. Cette fois, cependant, au lieu d’utiliser l’objet “ecommerce” de la couche de données, il utilise l’objet “ecommerce” renvoyé par votre variable JavaScript personnalisée.
Cas d’utilisation
La meilleure façon d’utiliser la variable JavaScript personnalisée a déjà été mentionnée à plusieurs reprises dans cet article. Utilisez la variable JS personnalisée pour transformer un objet de couche de données générique en une charge utile spécifique à Google Analytics. Cela signifie que vous pouvez demander à vos développeurs d’implémenter une charge utile de commerce électronique très générique avec l’action “Ajouter au panier”. Cela permet aux autres plates-formes d’exploiter plus facilement les données, car vous n’avez pas besoin de savoir comment fonctionne Google Analytics pour pouvoir comprendre comment l’objet est construit.
Un autre bon cas d’utilisation concerne les dimensions et statistiques personnalisées spécifiques à un produit, dont j’ai montré un exemple dans cet article. Cela n’a pas vraiment de sens de les ajouter à la couche de données, car les dimensions et les métriques peuvent changer, et d’ajouter des clés qui sont seul utilisé par une plate-forme est un peu contre-intuitif.
Je me suis retrouvé à utiliser la méthode Custom JavaScript Variable dans presque toutes les implémentations avec lesquelles je travaille, même si l’objet ‘ecommerce’ de la couche de données est bien formé pour commencer. J’aime l’idée de pouvoir modifier de manière flexible la charge utile sur un coup de tête, sans avoir à mettre à jour la couche de données.
Naturellement, si les modifications sont fondamentales, telles que la modification des noms de produits ou la réception d’un nouveau format d’ID, vous souhaiterez mettre à jour la couche de données sur la page au lieu d’encoder ces modifications dans votre variable JavaScript personnalisée. Mais la variable JavaScript personnalisée est parfaite pour implémenter une syntaxe de charge utile spécifique à la plate-forme dans votre suivi de commerce électronique.
Avez-vous d’autres cas d’utilisation de la méthode Custom JavaScript Variable ? S’il vous plaît, partagez!
