Conseils de commerce électronique pour Google Tag Manager

J’ai remarqué que la configuration du commerce électronique dans Google Tag Manager (et maintenant le nouveau commerce électronique amélioré) est très difficile pour beaucoup. Je suis sûr qu’une partie du problème est que le commerce électronique est pour de nombreux utilisateurs le moment où GTM vous oblige à prendre des mesures dans le domaine du développeur, car il est évident que vous devrez ajouter du code à la page Web.

Ce n’est pas un tutoriel sur la façon de faire du commerce électronique dans Google Tag Manager. Pour commencer, vous voudrez consulter la documentation officielle. Bien sûr, cela peut être inexact par endroits, et surtout les traductions manquent, mais dataLayer la forme et la fonction sont bien décrites à l’intérieur.

Guide du développeur de commerce électronique amélioré (UA) Google Analytics Ecommerce

Cet article contient des conseils et des réponses à certaines questions fréquemment posées sur le commerce électronique. J’espère qu’ils vous aideront à comprendre comment le commerce électronique et Google Tag Manager fonctionnent ensemble.

Le processus en quelques mots

Voici comment le commerce électronique et Google Tag Manager s’associent pour vous fournir les données les plus importantes de vos transactions Web.

1. Ton plateforme de commerce électronique et/ou votre Solution de gestion de contenu (CMS) rendre le code source

2. Si la page comprend des informations transactionnelles, ce code source doit inclure tous les détails requis sur la transaction dans le dataLayer objet

3. Lorsque la balise qui transporte la transaction vers GA se déclenche, elle examine le dataLayer objet

4. S’il trouve toutes les informations requises, il enverra le résultat de la transaction à GA

La plupart des chapitres suivants éclaireront davantage ces points, mais l’essentiel à retenir est ceci :

Votre plateforme de commerce électronique et/ou CMS fait presque tout le travail de suivi de vos transactions.

La solution backend, qu’il s’agisse de votre CMS ou d’une plate-forme de commerce électronique dédiée telle que Magento, ou même d’un plugin WordPress (tel que WooCommerce), doit faire le travail fastidieux de remplir les clés dans la couche de données.

Avec une application basée sur Python, le modèle de page peut ressembler à ceci :

dataLayer.push({     'transactionId' : '{{ transactionId }}', }); 

Avec PHP, cela pourrait ressembler à ceci :

dataLayer.push({     'transactionId' : '<?php echo $transactionId ?>', }); 

Avec QBASIC, cela pourrait ressembler à ceci :

dataLayer.push({     'transactionId' : 'PRINT T$; GOTO END' }); 

OK, le script QBASIC était fictif, j’essayais d’être drôle. Mais la nostalgie, non ? Droit?

Ne vous attendez donc pas à ce que GTM propose des valeurs pour ces variables comme par magie. Vous aurez besoin d’un développeur pour vous aider ici, et vous aurez besoin d’une plate-forme backend coopérative.

Maintenant, vous pourriez parfois être tenté de gratter le DOM pour obtenir des informations sur le commerce électronique. Cela signifie que vous avez du JavaScript en place qui récupère toutes les données transactionnelles nécessaires à partir des éléments de la page, tels que les en-têtes, le corps du texte et même les textes ALT des images.

Ce n’est pas l’approche recommandée !

Il existe de nombreuses et excellentes raisons de découpler les informations sémantiques (informations sans valeur inhérente à ce qui est rendu dans le document du navigateur) de la couche de présentation. C’est pour cela que la couche de données a été inventée. Je vous suggère fortement d’éviter de suivre la voie apparemment facile consistant à gratter des éléments sur la page, en particulier avec les balises transactionnelles critiques pour l’entreprise.

Notez, cependant, que certains aspects du commerce électronique amélioré tel qu’il se présente aujourd’hui pourraient en fait bénéficier d’une combinaison de grattage DOM et dataLayer utilisation. Nous reviendrons sur cela plus tard dans le post.

Voici les vrais conseils :

1. dataLayer avant GTM

2. Utiliser un événement personnalisé

3. Assurez-vous que toutes les données sont là

4. N’oubliez pas votre JavaScript

5. Le commerce électronique amélioré est spécial

Et nous allons conclure avec un résumé soigné.

dataLayer avant GTM

C’est un problème très courant. La balise qui contient vos informations de transaction se déclenche avant que les données de transaction sont dans dataLayer. Euh !

Lorsqu’une balise se déclenche, elle a accès au état actuel de toutes les variables dans l’espace de noms global. dataLayer est l’un d’eux. Si dataLayer n’a pas les variables requises au moment où la balise transactionnelle se déclenche, vous ne verrez pas les données de cet appel dans GA.

Voici un exemple. Voici à quoi ressemble votre balise de commerce électronique normale :

Comme vous pouvez le voir, il y a TRÈS peu d’options avec lesquelles travailler. Il vous suffit de définir le type de suivi sur Transaction, d’ajouter une règle et vous êtes prêt à partir.

Le fait est que cette balise se déclenche dès que l’extrait de conteneur est chargé, c’est-à-dire lorsque l’extrait de conteneur pousse 'event' : 'gtm.js' dans dataLayer. Parce que la balise regarde dans dataLayer pour les détails de la transaction, ils doivent être là au moment où la balise se déclenche !

Ainsi, cela fonctionnera:

<script>   window.dataLayer = window.dataLayer || [];   dataLayer.push({     'transactionId': '1234',     'transactionAffiliation': 'Acme Clothing',     'transactionTotal': 38.26,     'transactionTax': 1.29,     'transactionShipping': 5,     'transactionProducts': [{         'sku': 'DD44',         'name': 'T-Shirt',         'category': 'Apparel',         'price': 11.99,         'quantity': 1     },{         'sku': 'AA1243544',         'name': 'Socks',         'category': 'Apparel',         'price': 9.99,         'quantity': 1     }]   }); </script> <!-- Google Tag Manager --> <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-P8XR"   height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':   new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],   j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=   '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);   })(window,document,'script','dataLayer','GTM-P8XR');</script> <!-- End Google Tag Manager -->

Comme vous pouvez le voir, les données sont avant que l’extrait de conteneur, de sorte que le dataLayer object est renseigné avec toutes les variables requises au moment où la balise se déclenche.

Cependant, cela ne fonctionnera PAS :

<!-- Google Tag Manager -->; <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-P8XR" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-P8XR');</script> <!-- End Google Tag Manager --> <script>   dataLayer.push({     'transactionId': '1234',     'transactionAffiliation': 'Acme Clothing',     'transactionTotal': 38.26,     'transactionTax': 1.29,     'transactionShipping': 5,     'transactionProducts': [{         'sku': 'DD44',         'name': 'T-Shirt',         'category': 'Apparel',         'price': 11.99,         'quantity': 1     },{         'sku': 'AA1243544',         'name': 'Socks',         'category': 'Apparel',         'price': 9.99,         'quantity': 2     }]   }); </script>

Cette fois, les données de transaction sont poussées après l’extrait de conteneur a été chargé et il est très probable que les données ne soient pas affichées dans dataLayer lorsque la balise de transaction se déclenche.

Il en va de même pour toutes les données que vous pourriez essayer de déplacer dans une balise HTML personnalisée. La balise HTML personnalisée se déclenche au plus tôt avec {{event}} est égal à gtm.js, car il s’agit de l’événement le plus précoce possible pour déclencher vos balises. Cependant, votre balise de transaction se déclenche ÉGALEMENT lors de cet événement, ce qui signifie qu’il est possible que votre balise de transaction se déclenche en premier et ne trouve donc pas les détails de la transaction dans dataLayer. Vous pouvez essayer de rectifier cela avec Tag Priority, mais dans ce cas il vaudrait mieux regarder l’astuce suivante.

Utiliser un événement personnalisé

Si vous ne pouvez pas transférer vos données dans dataLayer avant que {{event}} est égal à gtm.js incendies, ou s’il y a la moindre possibilité que les données ne soient pas rendues à temps, vous pouvez tout aussi bien pousser votre propre événement personnalisé.

Par exemple, si vous utilisez une balise HTML personnalisée pour créer votre site de commerce électronique dataLayerajoutez-y un push “événement”, que vous utiliserez ensuite comme règle de déclenchement pour vos balises transactionnelles :

<script>   dataLayer.push({     ... eCommerce properties ...,     'event' : 'transactionComplete'   }); </script>

Ensuite, votre balise transactionnelle doit se déclencher {{event}} est égal à transactionComplete. De cette façon, vous serez sûr à 100 % que les données sont en dataLayer au moment où la balise se déclenche, car l’événement déclencheur est poussé en même temps que les données transactionnelles !

Assurez-vous que toutes les données sont là

Les guides du développeur vous indiquent exactement quelles variables sont requises. Dans le commerce électronique traditionnel, voici ce que recherchera votre balise de transaction :

identifiant de transaction – transactionId
Total des transactions – transactionTotal
Nom du produit – name
Référence du produit – sku
Prix ​​du produit – price
La quantité de produit – quantity

Si l’un de ces champs manque dans dataLayerle tag de transaction ne sera pas envoyé.

Ah, et aussi : transactionId et sku besoin d’être unique. Si vous avez plusieurs transactions avec le même ID, ou si vous avez de nombreux produits avec le même SKU, vos données seront faussées.

Avec le commerce électronique amélioré, il y a beaucoup plus de champs à observer, alors assurez-vous de lire à la fois le guide du développeur de Google Tag Manager (lié au début de cet article), ainsi que le guide général pour le commerce électronique amélioré dans Google Analytics.

N’oubliez pas votre JavaScript

Nous sommes ici dans le domaine des développeurs. N’oubliez pas cela. Voici quelques points à vérifier en premier si vos balises ne se déclenchent pas :

Chaque clé d’objet nécessite une valeur – Si vous souhaitez omettre une propriété du push, envoyez-la avec une chaîne vide ou supprimez-la complètement du push. Ne l’envoyez pas du tout sans valeur :

dataLayer.push({   'ecommerce' : {     'purchase' : {       'actionField' : , // WRONG! This key requires a value       ... }); dataLayer.push({   'ecommerce' : {     'purchase' : {       'actionField' : '', // BETTER!       ... }); 

Savoir quand ajouter une virgule à la fin de la ligne – Si les propriétés sont sœurs l’une de l’autre, c’est-à-dire qu’elles ont le même parent, alors chaque ligne doit se terminer par une virgule sauf la dernière ligne. Voici comment cela devrait se passer :

dataLayer.push({   'ecommerce' : { // No comma, starts a new hierarchy     'purchase' : { // No comma, starts a new hierarchy       'actionField' : {'list' : 'Apparel Gallery'}, // Comma, followed by a sibling       'products' : [{ // No comma, starts a new hierarchy         'name' : 'product1', // Comma, followed by a sibling         'id' : '12345' // No comma, last member in current object       },{ // Comma, since there are two objects in this 'products' Array          'name' : 'product2', // Comma, followed by a sibling         'id' : '23456' // No comma, last member in current object       }] // No comma, last member in current object     }  // No comma, last member in current object   }, // Comma, followed by a sibling   'event' : 'transactionComplete' // No comma, last member in current object });   

Respecter les exigences de type – Parlons d’abord de l’éléphant dans la pièce. Toujours, toujours n’oubliez pas d’utiliser un point comme séparateur décimal dans un nombre, pas une virgule. Lors du passage d’une valeur numérique, la virgule peut être horriblement mal interprétée :

... 'price' : 33,75, // WRONG! 'quantity' : 1 ... 

Ici, le navigateur interprète la première virgule comme séparateur de propriété, et le 75, qui suit n’est pas une paire clé-valeur syntaxiquement valide et entraînera une erreur. Voici à quoi cela devrait ressembler :

... 'price' : 33.75, 'quantity' : 1 ... 

Maintenant, le nombre est en fait un nombre, avec un point comme séparateur décimal.

Avec le commerce électronique amélioré, le type de prix et d’autres valeurs monétaires prête à confusion Devisequi n’est pas un type JavaScript, mais utilisez simplement une chaîne avec la décimale comme séparateur, par exemple

dataLayer.push({   'ecommerce': {     'currencyCode': 'EUR', // Local currency, type string     'impressions': [      {        'name': 'Triblend Android T-Shirt', // Name, type string        'id': '12345', // ID, type string        'price': '15.25', // Price, type string        'brand': 'Google', // Brand, type string        'category': 'Apparel', // Category, type string        'variant': 'Gray', // Variant, type string        'list': 'Search Results', // List, type string        'position': 1 // Position, type number      }]      ... 

Alors rappelez-vous : respectez les exigences de type. UNE number est écrit sous la forme d’un simple nombre, en utilisant un point comme séparateur décimal : 15h35. Aucune citation là-bas. UNE string est une combinaison de caractères entourés de guillemets simples ou doubles : ‘T-shirt’.

Le commerce électronique amélioré est spécial

J’ai déjà fait plusieurs fois allusion au commerce électronique amélioré, mais il est maintenant temps de s’attaquer à la bête. Si vous pensiez qu’il y avait beaucoup de dataLayer ceci et JavaScript que dans les conseils précédents, vous allez surcharger avec tous les efforts de développement requis par Enhanced eCommerce.

Commençons par l’évidence :

Vous n’utilisez pas le type de balise de transaction pour le commerce électronique amélioré.

La balise Transaction est destinée au commerce électronique traditionnel et, comme l’indique clairement le guide de développement du commerce électronique amélioré :

“Important : le plug-in Enhanced Ecommerce ne doit pas être utilisé avec le plug-in Ecommerce (ecommerce.js) pour la même propriété.”

Alors ne confondez pas les deux. Le commerce électronique amélioré vous donne un aperçu beaucoup plus granulaire et semblable à un entonnoir de la progression des visites en termes de votre entonnoir d’achat.

Le fait est qu’avec Enhanced eCommerce, tous les hits sont superposés aux balises existantes, telles que Pageview et Event. La clé est de se rappeler d’activer les fonctionnalités de commerce électronique améliorées dans les paramètres de vos balises, ET d’utiliser dataLayer pour transmettre les données via la balise à Google. Encore une fois, vous devrez vous assurer que dataLayer est initialisé avec toutes les données requises avant le déclenchement des balises.

Avec Enhanced eCommerce, tous les conseils précédents s’appliquent au décuple. C’est parce qu’il y a tellement plus de variables à apprécier, tellement plus d’exigences de type à respecter, tellement plus de façons d’acheminer les données vers GA.

Une autre chose importante à propos de la nouvelle fonctionnalité est que toute balise pour laquelle le commerce électronique amélioré est activé ne traitera que ce qui se trouvait dans le le plus récent poussée de la variable ‘ecommerce’ vers le dataLayer. Donc si vous avez par exemple :

dataLayer.push({   'ecommerce' : {     'impressions' : ...   } }); dataLayer.push({   'ecommerce' : {     'detail' : ...   } }); 

Seul ce dernier push sera traité par votre balise qui se déclenche le {{event}} est égal à gtm.js. En effet, l’objet ‘ecommerce’ est toujours traité avec la “version 1” de la couche de données, où les poussées répétées du même nom d’objet sont ne pas fusionné. Ainsi, chaque nouvelle poussée écrase la valeur précédente de l’objet. Dans tous les cas, il est crucial que vous en teniez compte. Ce que cela signifie, en pratique, c’est :

Si vous avez de nombreuses actions / éléments de commerce électronique amélioré que vous devez envoyer dans une seule balise, vous devez les combiner en une seule dataLayer.push()!

Inutile de dire qu’il sera pratiquement impossible de mettre en œuvre le commerce électronique avec les nouvelles fonctionnalités sans pour autant impliquant vos développeurs. Après tout, vous combinez les actions sur la page (clics, impressions) avec les informations contenues dans dataLayer. Même les meilleurs jours, ces deux-là ne font pas bon ménage.

Voici quelques conseils généraux pour le commerce électronique amélioré :

• dataLayer a une longueur maximale de 300 éléments. Une page de recherche sur une grande boutique en ligne peut contenir des centaines et des centaines de produits, en particulier si vous utilisez des méthodes de chargement paresseux ou quelque chose de similaire. Essayez donc de peupler dataLayer avec autant d’informations préchargées que possible et s’abstenir d’ajouter dynamiquement des données dans la structure.

• Parfois, les éléments de la page peuvent être dynamiques. Par exemple, vous devrez peut-être tenir compte du tri des éléments selon différents critères, ou le même élément peut se trouver dans différentes catégories, selon les méthodes de tri choisies par l’utilisateur. Dans ces cas, vous devrez peut-être récupérer la catégorie de page, par exemple, à partir du DOM, et la pousser dans la liste des produits dans le modèle de données. Assurez-vous de lire ce guide pour savoir comment mettre à jour les produits existants dans la couche de données de GTM.

• Commencez petit et augmentez, si la tâche semble trop grande pour être comprise. Commencez par suivre le panier, l’entonnoir de paiement et les achats. Ensuite, planifiez et mettez en œuvre le chemin de l’impression du produit, au clic sur le produit, à la vue détaillée du produit. Enfin, travaillez vous-même sur les promotions, les campagnes et les remboursements, si vous le souhaitez.

• Si vous souhaitez envoyer plusieurs éléments à l’aide d’une seule balise GTM compatible avec le commerce électronique amélioré, vous devez combiner les éléments en un seul push. Seul le plus récent dataLayer.push() avec la clé “ecommerce” est traité par votre tag GTM activé pour le commerce électronique amélioré ! Une pratique encore meilleure consiste à toujours inclure une clé “événement” dans vos poussées post-extrait de conteneur, et à utiliser cette clé “événement” pour déclencher votre balise à chaque poussée “ecommerce” vers dataLayer.

Résumé

Le problème avec le commerce électronique est qu’il est si profond dans le domaine des développeurs, mais il implique un outil principalement destiné aux spécialistes du marketing. Naturellement, cela exige que la communication entre les parties prenantes techniques et non techniques se fasse naturellement.

Les plus gros problèmes surviennent lorsque les développeurs ne comprennent pas le commerce électronique, ses objectifs ou la manière dont les informations transactionnelles sont transmises. dataLayer dans la plateforme d’analyse. De plus, parfois, les non-développeurs veulent s’attaquer au commerce électronique par eux-mêmes, car ils ont eu du succès avec le TMS jusqu’à présent, et bientôt ils ont mordu plus qu’ils ne peuvent mâcher.

La vérité est que le commerce électronique nécessite beaucoup de transfert de connaissances entre les personnes qui planifient et celles qui mettent en œuvre. Sinon, des problèmes simples comme l’incapacité d’apprécier les exigences de type JavaScript ou les détails du produit qui doivent être représentés dans dataLayerentraînera des erreurs.