Dans la première partie de ce guide, nous avons fait une première approche théorique de GTM V2. Nous avons vu les avantages de la solution, son principe de base, la manière dont on déclenche les balises et un premier aperçu des événements et des variables.

Dans cette seconde partie, on va rester dans la théorie mais on va s’enfoncer un peu plus en profondeur dans les variables et surtout, on va découvrir la couche de données (le fameux datalayer) et voir à quoi elle sert et comment on l’utilise. Restez bien attentif, cette partie n’est pas facile.

Cet article est le deuxième d’une série de 4 articles sur Google Tag Manager. Cette série de 4 articles a l’ambition d’être le guide francophone le plus complet sur Google Tag Manager. Vous pouvez vous rendre directement aux autres articles si vous le souhaitez :

Google Tag Manager V2 : La couche de données (Le datalayer), c’est quoi ?

datalayerTout d’abord qu’est ce que c’est ? Et bien c’est un container. Comme celui que GTM nous demande d’installer pour propulser nos balises ? Oui, sur le principe c’est pareil. Il n’a pas la même utilité mais c’est un container aussi.

A quoi il sert ? C’est un endroit dans lequel on va placer des informations à envoyer dans GTM. GTM les dispatchent ensuite vers les différentes balises qui peuvent en avoir besoin et/ou s’en sert pour lui même (on va y revenir)

Dis en plus sur les informations du Datalayer stp. C’est quoi au juste ? Ce sont des variables. Elles peuvent être soit constantes (elle sont écrites en dur dès le départ), soit dynamiques (des informations de la page sont poussées vers ces variables en fonction d’événements se produisant sur la page lorsqu’un utilisateur navigue.

Doit on le créer ou GTM le crée t’il tout seul ? GTM va le créer tout seul par défaut. Toutefois dans ce cas de figure, il n’y aura pas de variables constantes. Si l’on veut un datalayer avec des variables constantes, on doit le créer soi-même.

C’est quoi ces variables constantes ? Ca va être des informations spécifiques au contenu de la page. Par exemple pour une page article d’un blog, on pourra renseigner l’auteur, la catégorie. Pour une page produit d’un site e-commerce la catégorie du produit, sa marque, sa couleur, etc… L’interet de ces informations est de pouvoir les récupérer ensuite dans Google Analytics sous forme de dimensions personnalisées par exemple.

Et ces variables dynamiques ? Ce seront des variables dans lesquelles on va envoyer des informations de la page. Elles seront ensuite récupérées par GTM pour être communiquées aux balises qui peuvent en avoir besoin (par exemple un montant de transaction pour Adwords) ou utilisées par GTM.

Comment ça utilisées par GTM ? Et bien par exemple dans le cadre d’un filtre de déclenchement de balise. Comme on l’a vu dans la 1ère partie du guide, il est possible de créer des variables personnalisées que vous pouvez utiliser ensuite dans des filtres de déclenchement. (On va y revenir).

Et par rapport au container GTM, on le met ou ce datalayer ? Juste avant la balise </head> de la page, avant le container GTM. (Forcément puisque je le rappelle, le containeur GTM est placé juste après la balise <body>). Pourquoi ? Et bien s’il n’est pas placé avant, les variables qui sont à l’intérieur ne seront pas disponibles au chargement de la page, ce qui peut être problématique si par exemple vous souhaitez utilisez l’un d’elle dans un filtre au chargement de la page.

Est on obligé d’utiliser un datalayer ? En théorie non. Si vos balises n’ont pas à être déclenchées par des interactions autres qu’un chargement de la page et/ou si les données dont vous avez besoin sont disponibles au moment du chargement de la page directement à partir de variables JavaScript ou du DOM. Par contre, si vous voulez remonter des informations à GTM et/ou que vos balises puissent être déclenchées uniquement par des interactions sur la page, il vous faudra un datalayer.

Cela étant, je recommande fortement l’utilisation du datalayer. En effet, par défaut, GTM récupère les informations depuis votre HTML (DOM). Or, le DOM peut changer pour plusieurs raisons. L’avantage d’utiliser le Datalayer c’est de compartimenter et donc de réduire le risque. Et par ailleurs, le datalayer c’est ce pourquoi GTM est génial. Grâce à lui, vous pouvez passer chaque hit, dimension ou métrique dans une balise et l’envoyer dans votre compte Google Analytics.

Ok, résumons la théorie avant de passer au concret. Le datalayer c’est un container que l’on place avant le container GTM principal. Il sert de tampon entre le DOM et GTM. Il permet de réduire le risque que nos données à récupérer soient impactées par un changement du DOM (mise à jour automatique par exemple), placer des informations spécifiques au contenu d’une page, déclencher des balises en fonction d’événements réalisés pendant la navigation des utilisateurs et récupérer toutes sortes d’informations pouvant être utilisées elles-mêmes dans un déclencheur.

Google Tag Manager V2 : La couche de données (Le datalayer), plus concrètement

concept-datalayerLe Datalayer c’est un container. Un bout de code qui se présente sous cette forme :

<script>
dataLayer = [];
</script>

Je rappelle que vous n’aurez à le mettre en place vous-même que si vous souhaitez y placer des informations spécifiques au contenu des pages (en vue d’être récupérées dans GA notamment). Si vous ne le mettez pas en place manuellement, GTM le créera automatiquement.

Nous verrons dans la partie 3 comment mettre en place un datalayer sur des sites dynamiques type prestashop et/ou WordPress. En effet vous ne l’avez pas oublié, un datalayer doit être spécifique à une page. De plus il doit être placé avant la balise </head>. Mais avec un site dynamique qui utilise un seul fichier header pour générer chacune des pages, cela semble compliqué n’est ce pas ? Pas d’inquiétude, soyez patient.

Je fais un aparté ici. Google Analytics est un super outil qui propose des dizaines et des dizaines de dimensions et de métriques. Mais par rapport à votre activité, celles-ci sont forcément génériques et il est indispensable selon moi de pouvoir enrichir ces données de base par des données personnalisées qui sont ultra pertinentes pour votre activité. C’est pourquoi je crois que tout le monde devrait utiliser des dimensions et métriques personnalisées et donc un datalayer. Fin de l’apparté.

Renevons en à nos moutons. Par défaut, GTM transmet trois valeurs au datalayer : gtm.js (à l’initialisation du chargement de la page), gtm.dom (lorsque le DOM est prêt) et gtm.load (lorsque tous les éléments de la page sont chargés).

Si vous avez créer vous même votre datalyer, celui-ci contiendra vos variables et les trois valeurs ci-dessus s’y rajouteront à la suite. A moins d’un problème, ces trois événements seront toujours présent dans votre datalyer.

Mettons un exemple sur tout ceci. Je veux mettre un datalayer sur cette page de blog tiens. Je veux y faire figurer de base la catégorie, le nom de l’auteur et le thème dominant. Je créerai alors mon datalayer comme il suit :

<script>
dataLayer = [{
‘Auteur': ‘Bruno Guyot’,
‘Categorie': ‘Webanalytics’,
‘ThemeDominant': ‘Google Tag Manager’,
}];
</script>

Plutôt simple non ?

Donc ça c’était le cas ou l’on insère de base des données dans notre datalayer. Voyons maintenant comment faire pour envoyer des données depuis la page dans notre datalayer. L’idée est de continuer à ajouter des informations au fur et à mesure que les visiteurs interagissent avec la page. Pour envoyer des informations vers le datalayer, on va employer la méthode datalayer.push();

Par exemple si un visiteur télécharge un fichier, clique sur un lien, soumet un formulaire, vous pouvez demander à GTM d’envoyer automatiquement ces événements vers le datalayer. Imaginons un lien pour télécharger ce guide en version pdf, on aurait la syntaxe suivante :

<a href=”http://www.chablais-web.fr/guide-GTMV2.pdf” name=”GuideGtmV2Pdf” onclick=”datalayer.push({‘event': ‘pdf-download’});” >Guide GTMV2 Pdf</a>

La syntaxe générique pour les événements est la suivante : dataLayer.push({‘event': ‘event_name’});

Ce qui aurait pour résultat d’enregistrer l’événement dans le datalayer et de pouvoir le remonter dans Google Analytics. Ou bien de pouvoir déclencher une balise spécifique que je ne voulais déclencher que si le visiteur cliquait sur ce lien.

On peut aussi remonter des variables. Syntaxe générique : dataLayer.push({‘variable_name': ‘variable_value’}); Exemple : dataLayer.push({‘color': ‘red’});

On peut également faire du multipush. Plus d’infos ici : https://developers.google.com/tag-manager/devguide#multipush

Google Tag Manager V2 : La couche de données (Le datalayer), attention !

Le datalayer c’est règlementé. Vous devez faire attention à respecter ces règles sinon ça ne marche pas.

Le nom d’objet datalyer est sensible à la casse. DataLayer est différent de Datalayer. Le nom des variables doit être entre apostrophe : dataLayer.push({‘variable_name': ‘variable_value’}); Par exemple dataLayer.push({variable_name: ‘variable_value’}); ça ne marche pas.

Le nom des variables doit être le même sur toute les pages ou le datalayer est appliqué. Par exemple

dataLayer.push({‘pageview’: ‘/’}); Sur toutes les autres pages ça doit être pareil : dataLayer.push({‘pageview’: ‘merci.php’});. Et par exemple dataLayer.push({‘Pageview’: ‘ merci.php’}); ne marcherait pas.

Plus d’informations détaillées sur la page d’aide aux développeurs de Google : https://developers.google.com/tag-manager/devguide#thepits

Ok c’est super tout ça. Résumons un peu. On sait mettre en place le datalayer (ou et comment). On sait y mettre des variables de départ liées au contenu de la page. On sait également pousser des nouvelles informations à l’intérieur, que ce soit des variables ou des événements. Et on sait aussi qu’il faut faire attention à pas mal de détails qui peuvent générer des erreurs.

Un dernier point à voir avant de passer à la mise en pratique. Comment mettre en place un datalayer sur un site dynamique ? On va voir ça tout de suite sur un site wordpress et très prochainement sur un site prestashop.

Google Tag Manager V2 : La couche de données (Le datalayer), sites dynamiques!

Reprenons la problématique (dit comme ça, ça me ramène au lycée!). Le datalayer doit être placé dans le header (avant la balise </head>). C’est à dire généralement dans un header.php, fichier unique servant à générer le header de toutes les pages du site dynamiquement. Or le datalayer doit être spécifique à chaque page. Comment faire… ?

Et bien la réponse est simple, avec des modules. J’en ai deux très bons pour chacune des plateformes. Duracelltomi Google Tag Manager pour WordPress ici : https://wordpress.org/plugins/duracelltomi-google-tag-manager/ et le module GTM pour prestashop ici : http://addons.prestashop.com/fr/statistiques-analyses-modules-prestashop/17472-modulo-google-analytics-report-with-google-tag-manager.html

Pour les avoir tester les deux ça fonctionne parfaitement et ça répond à 95% des besoins. On ne peut pas faire tout ce que l’on veut mais comme le budget est souvent la priorité, passer par un module permet de gagner du temps, je ne vous fais pas de dessin.

Cela étant, pour ceux qui veulent aller plus loin (oui vous les puristes ^^) je ne peux pas m’empêcher de citer un très bon article de Julien Coquet sur son implentation GTM dans son WordPress (l’article ici : http://juliencoquet.com/en/2014/01/22/data-layer-google-tag-manager-for-wordpress/). Pour les puristes de Prestashop, je n’ai malheureusement pas trouvé de bon article comme celui de Julien.

Voila pour cette seconde partie. Qu’est ce qu’il nous manque maintenant ? Les terminaisons nerveuses peut être ? Comment tout ça fonctionne ensemble ? Je crois qu’il faut qu’on mette un peu en pratique pour bien comprendre qu’en dites vous ? On va se faire ça en partie 3. Et comme toujours, s’il y a des choses que vous ne comprenez pas ici, n’hésitez pas à poser des questions en commentaires :

La troisième partie du guide est ici : Partie 3 : Création de compte, installation sur WordPress, suivi Google Analytics,  évenements, dimensions personnalisées

Nos compétences

Chablais Web, agence spécialiste des solutions Google en Haute Savoie vous accompagne dans la mise en place de Google Tag Manager V2 sur votre site.

Nous réalisons pour vous la création du compte (ou sa migration depuis la version 1), le paramétrage des différentes balises et si vous le souhaitez la formation de vos collaborateurs.

N’hésitez pas à nous contacter.

A propos de l’auteur

Responsable E-commerce pendant 6 ans. Gérant de mon agence Chablais Web pendant 3 ans. Désormais à la tête du Marketing Digital chez FirstPoint Sàrl en Suisse et top contributeur de la communauté Google pour les annonceurs.

Spécialiste multi-certifié des solutions Google et Facebook, j’aide les entreprises à faire d’internet leur meilleur atout. Envie d’aller plus haut ? Contactez-moi.