Guide Google Tag Manager : dataLayer et événements GTM

Vous souhaitez comprendre Google Tag Manager et être capable d’en profiter rapidement ?

Vous souhaitez un guide qui vous explique avec des mots simples, de monsieur tout le monde, comment l’utiliser pour améliorer votre marketing ?

Alors vous êtes au bon endroit 🙂

Avant de commencer, prends 30 secondes pour t’abonner à ma newsletter et reçois régulièrement du contenu premium soit exclusif, soit avant tout le monde.

Bonne lecture !

Cet article est le deuxième de la série. Ici nous traiterons de concepts un poil plus compliqué que dans la partie 1 : datalayer et évenements datalayer.

Mais ces concepts sont extrêmement importants également. Ce sera la dernière partie théorique alors faites un effort.

Comme dans toute discipline, sans de bonnes bases, vous n’arriverez pas à masterer la suite.

Les autres chapitres du guide

Vous pouvez vous rendre directement aux autres articles si vous le souhaitez :

Sommaire de ce chapitre

Le concept du datalayer GTM

Tout d’abord qu’est ce que c’est ? Et bien c’est un container. (oui, un de plus 😄).

Comme celui que l’on installe au moment d’installer GTM sauf qu’il n’a pas la même utilité.

Il ressemble à ça :

A quoi il sert ? C’est un « endroit » dans lequel on va pouvoir placer des informations sur nos visiteurs et/ou leurs interactions avec le site.

On pourra ensuite les récupérer dans GTM pour les envoyer à quelqu’un d’autre (Google Ads, Google Analytics, Facebook, etc…)

Exemple concret pour comprendre

Un visiteur remplit un champ de formulaire lié au titre de son job.

On peut récupérer cette information et l’envoyer dans Google Analytics.

Et on pourrait ensuite comparer les performances selon le type de poste des visiteurs qui ont remplit des formulaires. Pratique non ?

En fait, grâce au datalayer, GTM devient un intermédiaire entre vos visiteurs, ce qu’ils font lors de leur visite ET tous les tiers (souvent analytics ou publicitaires) qui ont besoin de ces informations pour vous permettre de mieux cibler et/ou analyser.

Ok, mais concrètement comment ça marche ?

Le datalayer est un objet javascript (version simple : un endroit dans le code de votre site) dans lequel on va stocker et/ou envoyer et/ou récupérer des variables.

Ces variables peuvent être :

  • constantes (vous demandez à votre développeur de les mettre dedans),
  • dynamiques (des informations de la page sont poussées vers ces variables en fonction de ce que font les utilisateurs sur le site).

Exemple concret pour comprendre

Un cas concret de constantes que l’on voudrait mettre dans le datalayer serait par exemple la thématique d’une page.

Exemple cette page parle de GTM.

Je pourrai vouloir mettre cette information dans mon datalayer et la donner à Google analytics pour pouvoir analyser la popularité de mon site selon les thématiques.

C’est ce que l’on appelle un regroupement de contenu Google Analytics, on verra ça en détail dans les prochains tutos. 🙂

Autre cas concret de variables dynamiques :

On peut vouloir récupérer les ids de produit vus par les visiteurs pour les envoyer chez Google et Facebook et faire du remarketing dynamique (montrer aux gens des pubs du dernier produit consulté sur notre site).

Ca aussi, on verra en détail dans les prochains tutos.

Autre cas concret de variables dynamiques :

On peut savoir si un utilisateur est sur mobile et s’en servir comme une condition dans un déclencheur.

S’il l’est ET qu’il clique sur un numéro de téléphone, je déclenche une balise d’évènement Google Analytics.

En résumé

On peut utiliser les variables dynamiques pour :

  • envoyer des données liées à vos visiteurs et leur interactions avec votre site aux plateformes analytics et/ou publicitaire.
  • créer des variables personnalisées (comme on l’a vu dans la 1ère partie du guide) afin de créer des déclencheurs dynamiques basés sur le comportement des utilisateurs (on va y revenir).

Créer un datalayer

Déjà, doit-on le créer ?

Et bien oui et non. 😁

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 (ou demander à son dev) et mettre les valeurs qu’on veut à l’intérieur.

Ou utiliser un plugin qui les met pour nous (si on a un site de type CMS, on y reviendra dans les tutos WordPress et Prestashop 😉)

FAQ sur le datalayer

Question : Imaginons qu’on veuille créer un datalayer nous-même pour y mettre des constantes. On le placerait où ?

Réponse : juste avant le container GTM. C’est à dire entre la balise ouvrante <head> et votre code de container GTM.

Question : Pourquoi ?

Réponse : 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 est problématique si par exemple vous souhaitez utilisez l’une d’elle dans un filtre de condition au chargement de la page.

Exemple : pour un déclencheur de type page vue sur toutes les pages de la thématique GTM.

(vous comprendrez encore mieux avoir lu la partie suivante : évènements datalayer 😉)

Question : Est-on obligé d’utiliser le datalayer ?

Réponse : 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. (En résumé utilisateur de niveau 1 😃)

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 utiliser le datalayer. (utilisateur de niveau 2 🙌)

Evidemment, je recommande fortement l’utilisation du datalayer.

Ok, résumons tout ça :

  • 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),
  • de placer des informations spécifiques au contenu d’une page,
  • de 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.

Le concept d’événements datalayer dans GTM

Un autre concept important 😁(mais après celui-ci, terminé les concepts).

Déjà, je souhaiterais revenir sur l’un des points de la FAQ ci-dessus.

Est on obligé d’utiliser le datalayer ?

En fait, il y a plusieurs moyens d’utiliser le datalayer, comme expliqué ci-dessus (constantes, variables dynamiques, rappelez-vous 😁)

Mais il y en a un dont nous n’avons pas encore parlé.

Et celui-ci, vous l’utilisez obligatoirement, malgré vous.

Ce sont les événements datalayer (à ne pas confondre avec les évènements Google Analytics, ce ne sont pas les mêmes 😅).

Comme pour les variables (cf partie 1), il existe des événements datalayer standards, natifs.

Et l’on peut aussi créer des événements datalayer personnalisés.

Commençons par les événements standards.

Les événements datalayer natifs

Lorsque vous installez GTM et avant que vous n’ayez ajouté les différentes variables dont vous avez besoin, il y a nativement 3 événements datalayer :

  • la page vue (aussi appelé gtm.js ou Page view)
  • le DOM prêt (aussi appelé gtm.dom ou DOM ready)
  • la fenêtre chargée (aussi appelé gtm.start ou Window Ready)

Vous les trouvez dans la liste des déclencheurs :

Aller, tapons fort une bonne fois.

  • Un évènement datalayer constitue un changement d’état du datalayer.
  • Une balise ne peut être déclenchée que lors d’un changement d’état du datalayer.
  • L’activation des variables GTM de type clic, formulaire, visibilité, etc… débloquent de nouveaux evénements datalayer
  • A chaque changement d’état du datalayer, toutes les conditions des déclencheurs du container sont analysées pour déterminer si une balise doit être déclenchée.

Très bien. Respirons un bon coup et expliquons chaque point en détail 😃

Un évènement datalayer constitue un changement d’état du datalayer.

Redonnons un poil de contexte un peu technique.

Une page web affichée dans un navigateur est un fichier de code que le navigateur lit de haut en bas et « interprête ».

GTM.js

Au moment ou le navigateur lit le code du container GTM (placé sous la balise <head>, pour rappel), le datalayer est initialisé et un premier évenement datalayer est déclenché : gtm.js

Le datalayer prend donc son « premier état » sur lequel vous pouvez déclencher des balises.

C’est sur cet évènement que vous déclencherez la plupart des balises qui se mettent sur toutes les pages et ne sont pas liées à des interactions sur une page (exemple : pixel facebook, code de suivi analytics, balise de remarketing Google Ads, etc…).

GTM.dom

Le navigateur continue de parcourir le fichier de code et lorsqu’il l’a parcouru en entier il modélise la page qu’il va vous afficher (je simplifie volontairement).

On dit que le DOM est prêt.

Pour autant, ça ne veut pas dire que la page est affichée, le navigateur peut encore être en train de charger les scripts, images, fichiers de style, etc…

A ce moment ou le DOM est chargé, un nouvel évènement datalayer est déclenché : gtm.dom.

Le datalayer passe donc dans un second état et vous avez un deuxième point d’accroche pour déclencher des balises (DOM prêt dans la liste des déclencheurs).

Celui-ci est utile pour plusieurs raisons :

  • déclencher des balises ayant des conditions qui dépendent du DOM
  • déclencher des balises nécessitant qu’une autre balise ait été exécuté avant elle (exemple : un évènement de pixel Facebook ne peut pas fonctionner si le pixel de base n’a pas été exécuté avant).
  • étaler le chargement des scripts (idéal pour les scripts secondaires). La on optimise le temps de chargement.

En général, gtm.dom intervient en moyenne entre 1 et 4 secondes après gtm.js selon la taille de la page.

GTM.start

Cette fois le navigateur a complètement affiché la page et chargé toutes les ressources qui lui sont attaché.

Un troisième évènement datalayer et déclenché : gtm.start.

Le datalayer passe donc dans un troisième état et vous avez un troisième point d’accroche pour déclencher des balises (Fenêtre chargée dans la liste des déclencheurs).

En général, gtm.start intervient en moyenne entre 1 et 5 secondes après gtm.dom selon le nombre de scripts, d’images, de styles de la page.

Cela signifie qu’entre le moment où la page commence à charger et l’évenement gtm.start, il peut facilement se passer 10 secondes.

Attention donc de ne pas déclencher des balises vitales sur cet évènement.

Vous pourriez louper pas mal de monde.

Apparté sur l’outil de prévisualisation

L’outil de prévisualisation est un outil natif de GTM qui vous permet de voir dynamique en temps réel les tags déployés ou non sur votre site.

Il s’agit d’une fenêtre en surimpression qui vous permet de debugger et de voir si les balises que vous avez paramétré se déclenchent comme prévu lorsque vous interagissez avec votre site.

Il vous permet aussi de voir tous les changements d’état du datalayer :

Ce qui vous permet de vérifier les balises déclenchées (Tags fired on this event) à chacun des états du datalayer.

Mais aussi celles non déclenchées (Tags not fired on this event).

Exemple ici sur l’état DOM Ready :

Savoir se servir de la console de débug est primordial et ce que je vous ai expliqué la n’est que toucher la surface de ce qu’il faut savoir.

Ca mériterait un chapitre de guide à lui tout seul.

En attendant que je le fasse, voici 2 excellentes ressources :

Une balise ne peut être déclenchée que lors d’un changement d’état du datalayer

Effectivement, comme dit plus haut, seul un changement d’état du datalayer (autrement appelé un évènement datalayer) peut déclencher une balise.

Il n’y a pas d’intermédiaire.

L’activation des variables GTM de type clic, formulaire, visibilité, etc… débloquent de nouveaux evénements datalayer

En activant les variables natives supplémentaires dont vous avez besoin telles que les clics, les formulaires, etc… cela active de nouveau évènements datalayer.

Ou pour être plus précis, cela les rend disponible.

Mais pour qu’ils soient actifs, vous devez créer un déclencheur utilisant l’une des variables de clic.

Admettons que vous créiez un déclencheur qui déclenche lorsqu’un visiteur clic sur un email cliquable (c’est à dire un lien qui contient mailto:).

On le paramètrerait ainsi :

A partir du moment ou ce déclencheur est enregistré, chaque clic sur un lien entrainera un changement d’état du datalayer (ici gtm.linkClick)

Ce changement d’état deviendra donc un point de déclenchement possible pour vos balises.

Et il en va de même pour tous les autres types d’événements datalayer : formulaires, vidéos, visibilité d’éléments, scroll, etc…

La liste complète des évènements datalayer natif est disponible ici.

A chaque changement d’état du datalayer, toutes les conditions des déclencheurs du container sont analysées pour déterminer si une balise doit être déclenchée.

C’est ainsi que fonctionne GTM.

Tout évènement datalayer déclenche en interne une évaluation de toutes les conditions présentes dans tous les déclencheurs.

Si l’une des conditions est vraie, alors le déclencheur s’active et… déclenche la ou les balises qui lui sont rattachées.

Les événements datalayer personnalisés

Nous l’avons vu, il existe de nombreux événements datalayer natifs. Et GTM ne nous limite pas à uniquement ceux-ci.

Nous pouvons créer des événements datalayer personnalisés :

Pour ce faire, vous aurez besoin de l’aide d’un développeur.

Ou savoir modifier un peu le code de votre site web.

A quoi servent-ils ?

  1. à compenser certaines limitations que peuvent avoir les déclencheurs natifs.

Il peut arriver par exemple que certains formulaires ne soient pas traquables (s’ils ne submit pas pour les plus avancés d’entre vous).

Il peut également y avoir un problème de propagation dans votre javascript, empêchant les détecteurs de GTM d’entendre les clics par exemples.

Pour ceux qui souhaitent creuser ce sujet, rendez-vous chez Simo.

2. à ajouter du contexte à une action réalisée sur votre site

Nous allons le voir juste après, la manière dont nous créons un évènement datalayer personnalisé nous permet d’ajouter du contexte à l’évènement (comprendre des informations envoyées dans le datalayer).

Notamment des informations que ce qui est natif dans GTM nous nous permettrait pas d’avoir.

3. à ajouter davantage de fiabilité à votre tracking

C’est notamment le cas pour les formulaires de contact (mais pas que).

La fiabilité de mesure des formulaires est souvent problématique.

En effet, selon comment le formulaire a été codé (comprendre la technologie utilisée), vous risquez d’avoir pas mal de faux positifs.

Je m’explique :

Dans bien des cas, si un utilisateur essaie d’envoyer un formulaire mais ne l’a pas remplit complètement (ou a fait une erreur), l’évènement form.submit va se déclencher quand même.

Pourtant, au sens propre, le formulaire n’aura pas été envoyé.

Et dans 10 à 15% des cas, le visiteur ne va pas renvoyer le formulaire en corrigeant son erreur. On aura donc des faux positifs.

(Aparté : j’ai récemment eu le cas de formulaires non envoyés mais pourtant tracké suite à des campagnes Google Display.

Il est malheureusement fréquent qu’il y ait de la fraude à la conversion sur ce type de campagnes Google Ads.

D’où l’importance d’un tracking parfait.

Fin de l’aparté.)

On va parfois pouvoir contrer ce problème en passant par un autre déclencheur, par exemple visibilité de l’élément, afin de détecter l’apparition du message de confirmation d’envoi du formulaire.

Mais parfois cette solution n’est pas possible non plus.

C’est dans de tels cas ou l’on voudra utiliser un évènement dataLayer personnalisé pour déclencher nos balises.

Pour s’assurer à 100% que nos tags se déclenchent uniquement lorsqu’un formulaire a été envoyé.

Cela passe par un taggage spécifique au niveau du site.

Et c’est ce que nous allons voir maintenant. 😊

dataLayer.push ou comment créer un évènement datalayer personnalisé

On va employer la méthode datalayer.push();

Ok j’explique. 😁

datalayer.push(); est une méthode javascript. C’est-à-dire une action que l’on peut faire exécuter à un objet javascript.

Le datalayer est un object javascript. Et donc je vais pousser des éléments à l’intérieur.

Je vais pousser quoi ? D’abord un évènement. Et comme il est personnalisé, je devrais définir son nom.

Exemple :  window.dataLayer || [] window.dataLayer.push({‘event’: ‘event_name’});

Maintenant, on ne peut pas faire ça n’importe quand. On doit le faire sur un évènement javascript. C’est à dire sur un clic, au moment ou un formulaire est envoyé, etc… La liste des possibles est énorme.

Par exemple, imaginons un lien pour télécharger ce guide en version pdf, on aurait la syntaxe suivante :

<a href= »https://www.bruno-guyot.com/guide-GTM-datalayer.pdf » name= »GuideGtmDataLayerPdf » onclick= »window.dataLayer || [] window.dataLayer.push({‘event’: ‘pdf-download’}); » >Guide GTM Datalayer en Pdf</a>

Ce qui aurait pour résultat de créer un nouvel état dans mon datalayer :

Mais question à 1 million 🤔

Comment je déclenche un balise la dessus ?

Et bien en fait, vous devez créer cet évènement personnalisé dans GTM (lui apprendre à le reconnaitre en fait) pour ensuite pouvoir vous en servir comme déclencheur.

On crée donc un nouveau déclencheur de type évènement personnalisé :

Et on définit que la condition c’est de déclencher sur tous les évènements qui s’appellent pdf-download :

Restera ensuite simplement à accrocher ce déclencheur à une balise (au hasard une balise d’évènement Google analytics ou une balise de suivi des conversions Google Ads).

Ajouter du contexte aux évènements datalayer personnalisés

Comme dit précédemment, on peut aussi remonter informations contextuelles (par le biais de variables).

Syntaxe générique :window.dataLayer || [] window.dataLayer.push({‘variable_name’: ‘variable_value’, ‘event’: ‘event_name’ });

Exemple : window.dataLayer || [] window.dataLayer.push({‘color’: ‘red’,’event’: ‘addToCart’});

On peut également faire du multipush.

C’est à dire un évènement de plusieurs variables. Vous trouverez plusieurs exemples ici.

C’est notamment la technique utilisée pour envoyer des informations de ecommerce à Google Analytics :

Mais, nouvelle question à 1 million 😄

Comment je récupère mes variables et leur valeur dans GTM ?

Créer des variables personnalisée de couche de données

Et bien, on crée de nouvelles variables.

Je vous en parlais rapidement dans le chapitre précédent.

L’une des raisons les plus communes pour lesquelles nous créons des variables personnalisées, c’est pour récupérer des informations envoyées dans le datalayer lors de push.

Pour faire ça, on va dans Variables >Variables définies par l’utilisateur > Nouvelle

De là vous choisissez le type variable de couche de données.

Il s’agit ensuite de lui donner le nom de la variable envoyée dans le datalayer.

Reprenons mon exemple plus haut : window.dataLayer || [] window.dataLayer.push({‘color’: ‘red’,’event’: ‘addToCart’}); on créera donc une variable color.

Et elle aura pour valeur « red » lorsque le datalayer sera à l’état « addToCart ».

Vous pourrez ensuite passer ces informations additionnelles à Google Analytics sous forme de dimension personnalisée et ainsi pouvoir comparer par exemple la performance de vos produits par couleur.

Ou vous pourrez également utiliser cette variable dans vos conditions de déclenchement.

Par contre, j’attire votre attention sur le fait que tant que l’évènement datalayer addToCart n’est pas arrivé, la valeur de cette variable est nulle (undefined pour être précis).

Le datalayer, des règles à respecter

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

Le nom d’objet datalayer est sensible à la casse. dataLayer est différent de datalayer.

Le nom des variables doit être entre apostrophe : dataLayer.push({variable_name: ‘variable_value’});

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

Résumé de cette deuxième partie

  • On sait mettre en place le datalayer (où et comment).
  • On sait y mettre des variables de départ liées au contenu de la page.
  • On sait utiliser les évènements de datalayer natifs
  • On sait également pousser des nouvelles informations à l’intérieur, que ce soit des variables ou des événements personnalisés.
  • Enfin on sait aussi qu’il faut faire attention à pas mal de détails qui peuvent générer des erreurs.

La troisième partie du guide est ici : GTM et WordPress. A partir de maintenant on beaucoup moins théoriser et rendre ça beaucoup plus concret, pratique et actionnable. 🙌

En attendant, si vous avez des questions/remarques/recommandations d’amélioration sur cette première partie, n’hésitez pas à laisser vos commentaires 🙂

PS : avant de partir, prends 30 secondes pour t’abonner à ma newsletter. Tu recevras régulièrement du contenu premium comme celui-ci soit exclusivement, soit avant tout le monde.

Auteur : Bruno Guyot

Docteur hollistique en marketing digital avec bien des kilomètres au compteur (ouch!). Triple approche, transverse : tracking, page de ventes & copywriting, campagnes Google à la performance. Formateur des professionnels Google Ads d'aujourd'hui et de demain, salariés ou freelances : https://www.bruno-guyot.com/formations-google/

32 réflexions sur « Guide Google Tag Manager : dataLayer et événements GTM »

  1. Bonjour bruno, pourrais tu me dire pourquoi j’ai des remonté erroné dans analytics. Exemple dans la partie organic search il me compte 1 transaction, 5 transaction en direct ayant comme url /commande | 2 urls admin30…. qui est celle de mon back office et se phénomène se produit juste après avoir suivi ton tuto.

    Donc pour moi cela foire mes stats et j’ai l’impression que cela est dû à « UA – Event – Ecommerce helper » mais je en comprends pas poiurquoi cela me remonte des transactions pire issu du back office.

    ps: j’ai refais plusieurs fois tes tutos et j’ai appliqué à la lettre, si tu as une idée merci

    1. Hello,

      Difficile de te répondre sans voir ton compte. La c’est pas générique mais très spécifique à ton config. Je suis navré mais je ne saurai pas te répondre 🙁

  2. PARFAIT

    Vraiment bien expliqué !!
    Est ce que par hasard vous savez comment gérer les cookies apparaissant lors de l’ajout d’un GTM ?

    Merci encore pour cet article et merci d’avance pour vos réponses.

    1. Hello Krystel,

      Merci pour ton appréciation et ton retour.

      Peux-tu être un poil plus explicite ? De quel cookies spécifiques parles-tu ? Et qu’entends-tu par gérer ?

  3. Bonjour Bruno,

    Je vous remercie pour vos articles et vidéos.
    Je suis au balbutiement de l’article et j’ai surement une information qui m’a échappé.
    Je n’arrive pas à intégrer mon datalayer à un formulaire de contact qui s’exécute du côté client.

    j’ai essayé d’intégrer mon datalayer dans le code au niveau de la balise form :

    Mais aucune action. Avez vous une idée de mon erreur ?

    1. Bonjour Théo,

      Je ne suis pas sur de bien comprendre.

      On n’intègre pas de datalayer à un formulaire de contact. On peut éventuellement intégrer un push lorsque le formulaire est envoyé. C’est ça que tu veux dire / faire ?

      Concernant le code actuel, peux-tu joindre un lien vers une copie d’écran pour être sur que je comprenne bien ?

  4. Bonjour Bruno,

    Merci beaucoup pour ce tuto ainsi que les autres articles supers instructifs!

    Je cherche une méthode pour récupérer des champs formulaires en valeurs du datalayeur puis les passer en custom dimension. As-tu une méthode pour ce faire ?

    Merci pour ton aide !
    Clément

    1. Hello,

      Ca vient de ton GTM t’es sur ?

      J’ai jamais eu l’erreur.

      Je sais qu’on peut appliquer un toLowerCase aux variables depuis quelques temps. Vérifies tes variables pour voir si ca viendrait pas de la 😉

      1. Merci Bruno pour ta réponse et ton aide.
        Je voulu supprimer mon commentaire car entre temps j’avais trouvé d’où venait le problème.
        Ça vient d’une variable dans un tag dans gtm et ça ne vient pas en effet de l’intégration de gtm.

        Merci encore,

        Côme

  5. Hello Bruno,

    Super article mais certains points sont un peu confus pour moi.

    Quand on utilise du tracking d’event GA « en dur » (sans GTM), on demande au développeur de poser le tag d’event « sur » le bouton qu’on veut tracker. Du style : ga(‘send’, ‘event’,’…)

    Mais quand on utilise un data layer + GTM, on va simplement demander au développeur de pousser les variables de notre event dans le datalayer, avec un datalayer.push.
    Donc, le développeur ne doit pousser ces variables dans le data layer que lorsque le bouton est cliqué.

    Autrement dit, dans tous les cas, le développeur doit quand même « cibler » le bouton à tracker (soit pour y poser un tag en dur, soit pour y pousser les variables dans le datalayer). Pourquoi est-ce plus gagnant de passer par un data layer dans ce cas ? Puisque, dans tous les cas, le dev doit quand même aller localiser le bouton pour y poser quelque chose ?

    Merci de tes lumières !

    1. Hello Stan,

      En fait, quand tu utilises GTM tu n’es pas obligé de faire un datalayer.push. Cette méthode est en dernier recours si tous les déclencheurs natifs de GTM ne fonctionnent pas. Mais dans la plupart des cas ils fonctionnent et ainsi tu n’as pas besoin du dev.

      Un autre avantage d’utiliser GTM c’est centralisation de ton tracking à un seul endroit. C’est donc plus simple à maintenir.

      Enfin, il y a aussi la scalabilité. Une fois un déclencheur créé dans GTM tu peux le réutiliser pour envoyer à d’autres endroits. Par exemple un seul déclencheur pour envoyer une balise d’évènement analytics, de pixel facebook et/ou de conversion Google Ads.

      En espérant que cela t’éclaire davantage 🙂

  6. Bonjour Bruno,
    Un grand merci pour cet article très instructif que j’ai encore un peu de mal à mettre en pratique.
    Voici un exemple de ce que j’essaye de faire:
    Sur ma page avant la balise pour installer GTM dans le head je mets:

    dataLayer = [{
    ‘event’:’eventRGPD’,,
    ‘gtm_cookie_consent_optout’:’wait’,
    ‘eventCategory’:’RGPD’,
    ‘eventAction’:’modal-first’,
    ‘eventLabel’:’view-cookie-create’,
    ‘eventValue’: »,
    ‘eventNonInteraction’:1
    }];

    Donc normalement ça veut dire que quand j’arrive sur ma page j’ai déjà une variable gtm_cookie_consent_optout à ‘wait’.

    Dans GTM ensuite je fais un truc tout bête:
    – j’ai créé une variable (Cookie Propriétaire) gtm_cookie_consent_optout
    – je crée une balise HTML personnalisée dans laquelle je crée une div qui contient une popup
    – comme déclencheur je choisis All pages et je rajoute une Exception « Evénement personnalisé », je rentre eventRGPD dans nom de l’événement, je coche « Utiliser la correspondance avec expression régulière », je sélectionne certains éléments personnalisés et je choisis ma variable cookie gtm_cookie_consent_optout / Correspond à l’expression régulière /wait.

    Donc vu que j’ai mis à wait la variable dans le head, normalement la popup ne devrait pas s’afficher et pourtant c’est le cas..

    Qu’est-ce que je fais de mauvais?
    Merci d’avance pour votre aide.

    1. Hello Sophie,

      C’est difficile de te répondre sans voir. Le code de ton datalyer me semble faut, le problème vient potentiellement de la.

      Tu as 2 virgules après ‘event’:’eventRGPD’.

      Ta variable ‘eventValue’ a la valeur » (sans les  »).

      En plus de ça, eventCategory, eventAction, eventLabel, eventNonInteraction sont des éléments analytics, pas GTM. Ca me semble étrange de mettre ça dans un datalayer.

      Il faudrait que tu checkes dans ton tag assistant debug si l’evenement eventRGPD est bien pris en compte. Ensuite vérifier si tu as bien la valeur gtm_cookie_consent_optout qui est = à wait à ce moment la.

      Ensuite vérifier que ta popup modifie bien cette valeur

      Enfin, vérifier que ta popup ne se déclenche pas quand la valeur gtm_cookie_consent_optout est différente de wait.

  7. Hello Bruno,

    Merci pour cet article très complet.

    Cependant je suis toujours en difficulté.

    J’essaie de faire quelque chose qui pourtant est simple techniquement, j’ai un peu honte. Mais bon ce n’est pas mon « background ».

    ***Ce qu’il me faut:
    Simplement ajouter un global site tag à un site wordpress pour pouvoir commencer à ajouter/construire des audiences dans shared library puis les re-targeter par la suite via des campagnes display.
    Il me faut l’option #1 dont vous parlez dans l’article à savoir « utilisateur basique » :). Je veux pouvoir retargeter TOUS les gens qui ont visité le site sur une période récente.
    Page chargée = on retarget. Pour l’ensemble du site.
    Ce sera déjà un super début.

    ***Ce que j’ai copié depuis Audience Manager (je remplace juste l’ID du site par XXXXXX):

    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag(‘js’, new Date());

    gtag(‘config’, ‘AW-XXXXXXXX’);

    Dois-je simplement enlever toute la partie avec window.dataLayer? « De où à où? » : ).

    ça fait 8 ans que je fais du digital marketing en freelance, je dépasse tjrs tous les objectifs en nombre de visites du site, leads, ventes… mais niveau technique, c’est très galère quand le développeur est en congés et qu’il faut s’occuper du « set up » sur la partie remarketing pour un nouveau site héhé. Même si pour vous, c’est sûrement la base de la base, mais pas évident quand on ne connait aucun code mis à part un peu de HTML pour editer des campagnes email… : )

    Merci par avance et à bientôt.
    B.D.

  8. Bonjour,

    J’ai une différence entre le dataLayer que j’observe dans ma console et celui présent dans ma prévisualisation de Google tag manager. Comment est-ce possible et comment régler ce souci? Car de ce fait, certaines variables sont manquantes dans mon gtm alors que mon développeur me dit qu’il les a bien intégrées (et en effet elles sont présentes dans l’objet dataLayer de la console).

    Merci

    1. Hello,

      Normalement si tu les vois dans ton datalayer console elles sont forcément dans ta prévisu. Si tu ne les y voit pas c’est que tu ne les as pas créé en tant que variable de datalayer personnalisées 😉

      1. Hello Bruno,

        Je parlais uniquement de l’onglet « dataLayer » de la prévisualisation de gtm par rapport au dataLayer console, ce qui me paraît vraiment très étrange c’est bien la première fois que je vois cela… si jamais tu as une idée..

        merci

        1. Sans diagnostiquer et voir impossible de te répondre. Mais la comme ça ça me parle pas (et en même temps je suis sur c’est un tout petit truc à la con). Je peux pas t’en dire plus la comme ça, désolé 🙁

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *