Les articles de votre blog ici ? Inscrivez votre blog !

Guide complet pour configurer Google Tag Manager avec Google Analytics

Publié le 14 mars 2020 par Webanalyste @webanalyste

Comment configurer Google Tag Manager ou Google gestionnaire de balises.

Avant de configurer Google Tag Manager, vous devez faire sa connaissance. Si vous ne le connaissez pas encore, je suis heureux de vous présenter votre nouveau meilleur ami Analytics.

Google Tag Manager est en quelque sorte le mari de Google Analytics. Séparés, c'est compliqué, ensemble c'est le bonheur. Monsieur Google Tag Manager collecte, traite et envoie les données à Madame Google Analytics pour les configurer, les stocker et les reporter. Par nature, Monsieur est volage, il peut satisfaire de nombreux partenaires de jeu (ex. AdWords, TradeDoubler, CrazyEgg, At-Internet...). Vous souriez, vous faites bien. Une fois GTM intégré dans toutes vos pages, fini la douloureuse gestion de vos tags Analytics, marketing, etc., codés en dur dans chaque page de votre site. Votre sourire s'accentue, c'est beau à voir.
Bienvenue dans le monde fantastique du Tag Management System !

Configurer Google Tag Manager ?

Dans ce post, je vais vous guider pour intégrer et configurer Google Tag Manager sur votre site. À la fin de cet article, vous devriez être capable de configurer Google Tag Manager pour déclencher les principaux tags Google Analytics.

Voici les étapes clés pour intégrer et configurer Google Tag Manager.

Créer un compte et un conteneur Google Tag Manager.

Rien de plus simple, RV https://www.google.com/analytics/tag-manager/ puis suivez les instructions jusqu'à accéder au code GTM à intégrer dans vos pages.

Copiez-collez ce code dans un fichier bloc-note, puis communiquez-le à votre IT pour l'intégrer dans les pages de votre site. Important, précisez-leur qu'il ne faut pas l'encapsuler dans un DIV et idéalement, le positionner juste après l'ouverture de la balise <body>.

Pour vous assurer que l'intégration est bien faite, quelle est la chose la plus simple à faire ?

[collapse title='Réponse']Regarder le code source CTL+U ;). Pour vous assurer que le tag est intégré sur toutes vos pages, utilisez Screaming Frog, la méthode est expliquée point 4 de l'article " méthodes et outils pour valider vos tags" [/su_spoiler][/su_accordion]

Comprendre Google Tag Manager.

Google Tag Manager est divisé en 2 grandes parties :

  • Le compte qui représente souvent l'entreprise, dans lequel sont gérés les paramètres de haut niveau, comme la gestion des utilisateurs.
  • Les conteneurs qui représentent les sites / les applications de l'entreprise. Le conteneur regroupe les 3 composants essentiels de tout bon TMS (Tag Management System), à savoir les tags, les règles et les variables.

La gestion des utilisateurs.

La gestion des utilisateurs est gérée au niveau du compte " view account user only " ou " manage user account ". Etant donné qu'une mauvaise configuration de Google Tag Manager peut menacer la stabilité de votre site web, en faisant par exemple une erreur de script personnalisé, autant confier les clés à un " gardien " (souvent un responsable IT) qui pourra gérer rigoureusement les accès et attribuer les droits au bonnes personnes.
Les droits associés au conteneur :

  • " view only ", pour toucher avec les yeux,
  • ou " view & edit only " pour utiliser également les mains,
  • ou " view, edit, delete & publish ", pour gérer avec la tête.

Vous observerez que malheureusement, il est impossible de gérer les droits utilisateurs au niveau des tags. Ce qui complique parfois la gouvernance de Google Tag Manager entre les utilisateurs de différents métiers, comme l'IT et le marketing. Ce serait pratique de pouvoir " figer " certains tags " constants ", comme ceux de l'Analytics, empêchant d'être modifiés par une personne non autorisée ou pouvoir marquer les tags en cours de test qui ne doivent pas être publiés...


Comprendre les balises Google Tag Manager.

Une balise (ou tag) est un script ou une image pixel utilisés par les outils pour collecter des données sur une page. Sans GTM, ce sont les balises que vous deviez insérer dans le code source de votre site.

Comme son nom l'indique, un gestionnaire de tags gère des tags (ou balises), et plus précisément, il gère les valeurs embarquées dans ses derniers ainsi que leur déclenchement.

Il existe deux grands types de tags dans GTM :

  • Balises intégrées (template de tag éditeur), qui sont prédéfinies dans GTM, dans lesquelles vous n'avez qu'à configurer les valeurs de sorties (ex. id).
  • Balises personnalisées, HTML/JavaScript ou image pixel. Ces dernières vous permettent de couvrir tous les tags asynchrones qui ne seraient pas prédéfinis dans GTM. C'est-à-dire la majorité des tags courants, à l'exception des tags AB testing qui sont synchrones pour être déclenchés très tôt dans la page (haut du header), pour diriger l'utilisateur vers une version de page (A ou B).


Comprendre les variables Google Tag Manager.

Les variables servent à stocker des informations collectées depuis la page active. Elles permettent d'être exploitées dans les balises, en tant que valeur à reporter et également dans les déclencheurs, comme valeur de référence.

Comme les balises, il existe deux grandes familles de variables :

  • Les variables intégrées sont prédéfinies et non personnalisables. Activez-les pour pouvoir les utiliser dans une balise, déclencheur ou autre variable.
  • Les variables personnalisées permettent d'appliquer un traitement spécifique pour obtenir une valeur donnée.

Les variables intégrées GTM.

Pages :

  • " Page URL " - correspond à l'URL de la page active - ex. " https://www.webanalyste.com/formations-google-universal-analytics-google-tag-manager/?search=webanalyste ".
    Utile par exemple pour vérifier la présence d'un paramètre, comme " search ".
  • " Page hostname " - correspond au nom de domaine de la page active - ex " www.webanalyste.com ".
    Utile par exemple pour associer une valeur à un " hostname ", comme dans un tableau de correspondance, si " hostname " = " dev.monsite.com " alors variable constante " GA code de suivi " = " UA-abcdef-1 ", si " hostname " = " www.monsite.com " alors " GA code de suivi " = " UA-abcdef-2 ".
  • " Page path " - correspond à l'URI de la page active - ex. " /formations-google-universal-analytics-google-tag-manager/ ".
    Utile par exemple pour identifier un segment d'URL pour déclencher un tag. Si " Page path " contient " /formations-" , alors variable " Page content " = " formation ".
  • " Referrer" - correspond à l'URL de la précédente page, que ce soit sur le site actif ou bien d'un autre site - ex. " https://fr.linkedin.com/in/fscandolera ".
    Utile par exemple pour identifier l'origine d'une recherche sur le site. Dans la page résultat de recherche, variable " search from " = " Refferrer ".

Clics :
Exemple de lien actif : " <a href=https://www.webanalyste.com/formations-google-universal-analytics-google-tag-manager/ " class="link" id="formation-gtm-ga" target="_blank ">devenez un ninGA avec le webAnalyste</a> ".

  • " Click Element " (=gtm.element dans le dataLayer) - correspond à l'élément HTML cliqué - ex. <a>.
  • " Click Classes " (=gtm.elementClasses dans le dataLayer) - correspond à au moins une valeur référencée dans l'élément Class de l'élément cliqué - ex. " link ".
  • " Click ID " (=gtm.elementId dans le dataLayer) - correspond à au moins une valeur référencée dans l'élément ID de l'objet cliqué - ex. "formation-gtm-ga ".
  • " Click Target " (=gtm.elementTarget dans le dataLayer) - correspond à au moins une valeur référencée dans l'élément Target de l'élément cliqué - ex " _blank ".
  • " Click URL " (=gtm.elementUrl dans le dataLayer) - correspond à au moins une valeur référencée dans l'élément HREF de l'élément cliqué - ex. " https://www.webanalyste.com/formations-google-universal-analytics-google-tag-manager/ ".
  • " Click Text " (=gtm.elementText dans le dataLayer) - correspond à au moins une valeur référencée dans l'élément URL de l'élément cliqué - ex. " devenez un ninGA avec le webAnalyste ".

Ces variables sont principalement utiles pour identifier un clic donné.

Formulaires : reprendre les éléments du Click en remplaçant click par form et transposer l'URL cliquée par l'URL du paramètre " action " du formulaire.

Exemple de form : " <form action=https://www.webanalyste.com/formations-google-universal-analytics-google-tag-manager/ " class="form" id="formation-gtm-ga" target="_blank ">...</form> ".

  • " Form Element " (=gtm.element dans le dataLayer) - correspond au formulaire cliqué - ex. <form>.
  • " Form Classes " (=gtm.elementClasses dans le dataLayer) - correspond à au moins une valeur référencée dans l'élément Class du formulaire cliqué - ex. " form ".
  • " Form ID " (=gtm.elementId dans le dataLayer) - correspond à au moins une valeur référencée dans l'élément ID du formulaire cliqué - ex. "formation-gtm-ga ".
  • " Form Target " (=gtm.elementTarget dans le dataLayer) - correspond à au moins une valeur référencée dans l'élément Target du formulaire cliqué - ex " _blank ".
  • " Form URL " (=gtm.elementUrl dans le dataLayer) - correspond à au moins une valeur référencée dans l'élément HREF du formulaire cliqué - ex. " https://www.webanalyste.com/formations-google-universal-analytics-google-tag-manager/ ".
  • " Form Text " (=gtm.elementText dans le dataLayer) - correspond au texte visible au sein du formulaire cliqué.

Ces variables sont utiles pour identifier l'envoi (submit) d'un formulaire donné.

Utilitaires :

  • " Event " (=gtm.event dans le dataLayer) - correspond à l'event actif - ex. event:gtm.click (l'utilisateur a cliqué sur la page).
    Utile par exemple pour identifier un event donné pour créer un déclencheur.
  • " Environment name " - correspond à nom de l'environnement actif - ex. " life " par défaut ou autre si personnalisé dans GTM.
    Utile par exemple pour déterminer l'environnement actif, ex. live, dev, statging. A configurer dans GTM -> objet d'un prochain.
  • " Container ID " - correspond à l'identifiant du conteneur (" GTM-xxxxx "). Utile par exemple dans un script pour modifier la valeur d'une variable dans le conteneur GTM.
  • " Container version " - correspond à la version du conteneur sous forme de chaîne - ex. " 123 " ou 'QUICK_PREVIEW', en mode de prévisualisation. Utile par exemple pour alimenter une dimension secondaire qui permettrait d'évaluer l'impacte de chaque version du container sur les performances.
  • " Randon number " - correspond à un nombre aléatoire entre 0 et 2147483647 - ex. " 123 ".
  • " HTML ID " - correspond à l'identifiant d'une balise HTML. Utile par exemple pour activer le callback " onSucess " ou " onFailure " d'une balise HTML ex " google_tag_manager[{{Container ID}}].onHtmlSuccess({{HTML ID}}); " - un callback " onSucess " indispensable pour séquencer le déclenchement de balises HTML.
Erreurs :
  • " Error Message " (=gtm.errorMessage " dans le dataLayer) - correspond au message d'erreur JavaScript, les mêmes que ceux qui sont notifiés dans la console JavaScript du navigateur.
    Utile à reporter dans un event pour mesurer la densité et le contenu des erreurs générées sur le site.
  • " Error URL " (=gtm.errorUrl " dans le dataLayer) - correspond à l'URL d'origine de l'erreur.
  • " Error Line " (=gtm.errorLine " dans le dataLayer) - correspond à la ligne de l'erreur dans le code source de la page.
  • " Debug Mode " - vérifie si le mode débug de GTM est activé sur la page en cours, true ou false.
    Utile par exemple dans une variable " tableau de conversion " pour faire correspondre un code de suivi GA selon l'activation de mode de débogage. Exemple, FALSE = UA-123456-1 (ex. propriété prod), TRUE= UA-123456-2 (ex. propriété de test).
Historique :

Les événements d'historique se produisent généralement lorsque le fragment d'URL (hachage ex. /produit/#detail-technique) change dans une application Ajax ou lorsqu'un site utilise les API pushState HTML5.

  • " NewHistoryFragment " (=gtm.newUrlFragment " dans le dataLayer) - correspond a la valeur actuelle du fragment d'URL " hash " à partir de l'historique.
  • " OldHistoryFragment " (=gtm.oldUrlFragment " dans le dataLayer) - correspond à la valeur de l'ancien fragment d'URL.
  • " NewHistoryState " (=gtm.newHistoryState " dans le dataLayer) - correspond au nouvel état de l'historique, contrôlé par les appels du site à pushState (création d'une nouvelle entrée dans l'historique de navigation).
  • " OldHistoryState " (=gtm.oldHistoryState " dans le dataLayer) - correspond à l'ancien état de l'historique, contrôlé par les appels du site à pushState.
  • " HistorySource " (=gtm.historyChangeSource " dans le dataLayer).

Les variables GTM définies par l'utilisateur.

En complément des variables intégrées, les variables utilisateurs vous permettront de personnaliser les informations collectées sur la page active.

  • " Constant " - stocke une valeur fixe (string).
    Utile notamment pour stocker une valeur qui serait amenée à être appelée régulièrement dans les balises ou déclencheurs, comme le code de suivi Google Analytics (UA-XXXXX-X), le nom d'une entreprise ou une valeur conditionnelle.
  • " Cookie propriétaire " - récupère et stocke la valeur d'un cookie propriétaire donné.
    Utile par exemple pour récupérer l'identifiant utilisateur GA (cid) pour la reporter dans une dimension secondaire GA ou calculer la date (timestamp) de la première session (dernière partie de l'ID, ex. GA1.2.820803776.1455634833).
  • " Élément DOM " - récupère le contenu de n'importe quel élément DOM (Document Object Model) spécifié dans la page active.
    Utile par exemple pour récupérer la valeur du panier sur chaque page active, ex. <div id= "popin_panier_value "> 100€</div> - variable Element Dom : " Mode de sélection " = ID; " ID de l'élément " = " popin_panier_value ".
  • " Événement personnalisé " - fait référence à la valeur personnalisée d'un event " pushé " depuis un dataLayer dataLayer.push({'event' : 'myEvent'}), qui correspondrait à " myEvent " dans l'exemple.
    Inutile depuis l'intégration de la variable intégrée " Event ", qu'il est préférable d'utiliser pour activer un déclencheur, " Event " contient " myEvent ".
  • " JavaScript personnalisé " - correspond au résultat retourné par une fonction JavaScript. C'est sans aucun doute le type de variable le plus puissant, car elle vous permet de composer une valeur sur mesure, à partir d'autre variable et/ou à partir d'information disponible dans la page.
    La fonction JavaScript doit respecter deux simples règles.
  • Utiliser une fonction anonyme, en ne nommant pas la fonction : (function() { ... }), ce qui permet de la déclarer et de l'exécuter tout de suite.
  • Retourner une valeur, même vide (undefined);
    (function() { var a =1, b=1; return a+b }).
  • Variable utile par exemple pour concaténer d'autres variables à reporter dans l'un des paramètres d'une balise event GA;
    (function() {
    var v1= {{product_filter_1}}, v2={{product_filter_2}}, v3={{product_filter_3}};
    return v1+"_"+v2+"_"+v3; }).
  • " Mode débogage " - similaire à la variable intégrée éponyme avec personnalisation du nom de la variable.
  • " Nom de l'environnement " - similaire à la variable intégrée éponyme avec personnalisation du nom de la variable.
  • " Nombre aléatoire " - similaire à la variable intégrée éponyme avec personnalisation du nom de la variable.
  • " Numéro de version du conteneur "- similaire à la variable intégrée éponyme avec personnalisation du nom de la variable.
  • " Tableau de conversion " ou tableau de correspondance, qui permet selon la valeur d'une variable entrante de personnaliser la valeur d'une variable sortante, celle du tableau de conversion. Correspond à un switch en JavaScript, si valeur de la variable A = " a1 " alors valeur de la variable B = " b1 ", si valeur de la variable A = " a2 " alors valeur de la variable B = " b2 ".
    Utile par exemple pour dynamiser une valeur, comme celle du code de suivi Google Analytics qui selon la valeur de la variable {{Page Hostname}} pourrait varier si le nom de domaine de la page active correspond au site de pré-production ou au site de production.
    A noter qu'à ce jour, la correspondance doit être parfaite, il n'est pas possible par exemple de préciser " commence par " ou " contient " ou encore créer un REGEX... Pour conditionner les correspondances, vous devez faire appel à une autre variable qui aura traité la valeur de correspondance, ou bien utiliser une variable " JavaScript Personnalisée " en scriptant en JavaScript un tableau de correspondance en Regex (sujet d'un prochain article).
  • " URL " - correspond à un élément de l'URL active.
    Exemple d'URL active " https://www.webanalyste.com/formations-google-universal-analytics-google-tag-manager/?utm_campaign=nl-201604&utm_source=sarbacane&utm_medium=email#anchor "
    • URL complète = " https://www.webanalyste.com/formations-google-universal-analytics-google-tag-manager/ ".
    • Protocole = "https ".
    • Nom d'hôte = " www.webanalyste.com ".
    • Port, correspond au numéro de port de l'URL, sinon définit alors la valeur sera égale à 80 pour le protocole HTTP ou 443 pour HTTPS.
    • Chemin = " /formations-google-universal-analytics-google-tag-manager/ ".
    • Requête = " utm_campaign=nl-201604&utm_source=sarbacane&utm_medium=email " (sans clé de requête).
        Clé de requête = ex. " utm_medium " = " email ".
    • Fragment = " anchor ".
  • " URL de provenance " - similaires aux variables URL, mais avec l'URL de la page précédente (referral).
  • " Variable d'événement automatique " - on retrouve les variables intégrées, à utiliser de préférence pour éviter de surcharger inutilement le conteneur GTM.
  • " Variable de couche de données " permet de récupérer la valeur d'une variable présente dans le dataLayer de la page active ou bien générée depuis une balise HTML.
    Exemple de dataLayer :
    [su_column size= "1/2″]
    Utiliser des " . " (point) pour descendre d'objet en objet jusqu'à atteindre la variable recherchée.
    Exemples : Variable dataLayer " ecommerce product detail name " = ecommerce.detail.products.0.name (0 correspond au 1er index du tableau JavaScript de l'objet products[]).
    Variable dataLayer " ecommerce product category " = ecommerce.detail.products.0.category .
    [/su_column][su_column size= "1/2″]
    [/su_column]
  • " Variable JavaScript " correspond à la valeur d'une variable JavaScript globale déclarée dans un script dans la page ou bien dans une balise HTML. A ne pas confondre avec la variable " JavaScript personnalisé " qui concerne le traitement d'une fonction.
    Utile par exemple pour alimenter la valeur " input " d'une variable " Tableau de conversion ", comme un compteur qui en s'incrémentant conditionnerait la correspondance de la valeur " output ".

Comprendre les déclencheurs GTM.

Comme on l'a vue les variables couvrent tous les aspects de la collecte d'information, utile pour alimenter les balises et également pour conditionner les déclencheurs, SI var " compteARebours " = " 0 " alors décollage de la fusée !

  • Les déclencheurs décrivent dans quelle circonstance un tag est activé ou bloqué.
  • Les déclencheurs correspondent à des events poussés dans le dataLayer GTM quand ils ont lieu.

On construit un déclencheur toujours de la même manière,

  1. on choisi l'événement de déclenchement (page vue, clic, envoi de formulaire...),
  2. on configure le déclenchement,
  3. on conditionne le déclenchement - " tous les ... " ou " certains... " qui utilise des opérateurs de correspondances pour préciser un déclencheur GTM donné.
  • est égal(e) à,
  • contient,
  • commence par,
  • se termine par,
  • correspond au sélecteur CSS,
  • correspond à l'expression régulière,
  • correspond à l'expression régulière (insensible à la casse),
  • n'est pas égal(e) à,
  • ne contient pas,
  • ne commence pas par,
  • ne se termine pas par,
  • ne correspond pas au sélecteur CSS,
  • ne correspond pas à l'expression régulière,
  • ne correspond pas à l'expression régulière (insensible à la casse),
  • inférieur(e) à,
  • inférieur(e) ou égal(e) à,
  • supérieur(e) à,
  • supérieur(e) ou égal(e) à.
  • " Page vue " - à utiliser pour déclencher un tag sur toutes ou certaines pages de votre site.
    • " Page vue " : correspond à l'événement 'event':'gtm.js' dans le dataLayer GTM et " Page View " dans la fenêtre debugger GTM. L'événement est déclenché une fois que la librairie gtm.js a été chargée depuis le script GTM. Un script qui doit être intégré juste après l'ouverture de la balise <body> ou le plus haut possible dans le <body> afin d "accélérer le chargement de la librairie GTM pour améliorer la précision des mesures des tags qui seront associés à ce déclencheur.
      Utile par exemple pour déclencher la balise Google Analytics " pages vues ", à condition que les éventuelles valeurs (dimension personnalisée, regroupement de contenu...) qui doivent être embarquées dans le tag soient disponibles avant le script GTM. En cas contraire, le hit page vue risque de ne pas reporter l'ensemble des valeurs attendues, il faudra donc déclencher votre tag Google Analytics " page vue " sur le " DOM prêt ".
    • " DOM prêt " : correspond à l'événement 'event':'gtm.dom' dans le dataLayer et " Dom Ready " dans la fenêtre debugger GTM, qui signifie que le contenu de la page est chargé et perçu comme tel par l'utilisateur.
      Utile par exemple pour déclencher les tags qui ont besoin d'attendre que les informations soient disponibles pour être reportées par les tags dépendants des déclencheurs basés sur le DOM ready.
    • " Fenêtre chargée " : correspond à l'événement 'event':'gtm.load' dans le dataLayer et " Page Load " dans la fenêtre debugger GTM, qui signifie que la page est totalement chargée.
      Évitez d'utiliser ce déclencheur pour vos tags Analytics et marketing, car le déclenchement peut intervenir plusieurs secondes après l'event 'gtm.js' ou 'gtm.dom', des secondes durant lesquelles les utilisateurs peuvent partir, ou déclencher un tag Google Analytics " event ", qui reporté avant la " page vue " généra un " not set " dans votre rapport landing pages GA. Utile donc pour des tags utilitaires.
  • " Clic " - à utiliser pour déclencher un tag sur tous ou certains clics sur vos pages.
    • " Tous les éléments " : correspond à l'événement 'event':'gtm.click' dans le dataLayer, autrement dit à un clic sur un élément du DOM. Fondamentalement, il écoute tous les clics et pousse les éléments DOM relatifs au clic dans le dataLayer GTM. En observant les informations contenues dans le dataLayer de l'event " gtm.click ", peut vous aider à identifier les éléments distinctifs qui préciseront le déclencheur sur un élément donné.
      Utile par exemple pour tracker les clics dans un champ de recherche pour reporter un event GA " intention de recherche "...
      ex. <input type="search" id="product-search-field" class="search-field" placeholder="Recherche produits..." value="" name="s" title="Recherche pour&nbsp;:">
      Au clic dans notre champ de recherche, voici le dataLayer qui sera pushé:
      event:"gtm.click"
      gtm.element:input#product-search-field.search-field
      gtm.elementClasses:"search-field"
      gtm.elementId:"product-search-field"
      gtm.elementTarget:""
      gtm.elementUrl:""
      A partir des informations contenues dans le dataLayer de l'event " gtm.click ", vous allez pouvoir conditionner le déclenchement d'un tag sur ce seul clic. Exemple : " elementId " = " product-search-field ".
    • " Liens uniquement " : correspond à l'événement 'event':'gtm.linkClick' dans le dataLayer, autrement dit à un clic sur un élément <a /> (<a href= " ">).
      Usage similaire à l'écouteur de " Tous les éléments ", à la différence qu'il se concentre uniquement sur l'élément <a />. En général, la finalité d'un lien <a href> et de vous diriger vers une autre page, pour être certain que tous les tags associés à ce type de déclencheur soient déclenchés avant le changement de page, vous avez la possibilité de créer un délai d'attente. Si vous configurez ce temps d'attente, le déclencheur attendra que tous les tags associés soient déclenchés ou que le temps d'attente soit atteint.
  • " Envoi de formulaire " - correspond à l'événement 'event':'gtm.formSubmit' dans le dataLayer, autrement dit à l'envoi " submit " effectif du formulaire.
    Au submit de formulaire exemple, voici par exemple le dataLayer qui sera poussé.
    event:"gtm.formSubmit"
    gtm.element:form#commentform.comment-form
    gtm.elementClasses:"comment-form"
    gtm.elementId:"commentform"
    gtm.elementTarget:""
    gtm.elementUrl:"http://training.webanalyste.com/wp-comments-post.php"
    A partir des informations contenues dans le dataLayer de l'event " gtm.formSubmit ", vous allez pouvoir conditionner le déclenchement d'un tag sur l'envoi de ce seul formulaire. Exemple : " elementId " = " commentform ".
    Comme pour l'event linkClick, vous avez la possibilité de configurer un temps d'attente pour le déclencheur formSubmit.
    A noter, une autre fonctionnalité indispensable à activer dans le déclencheur formulaire (moins pour les liens), c'est " vérifier la validation " du formulaire avant d'activer le déclenchement. C'est à dire déclencher les balises qu'une fois l'envoi du formulaire effectué. Si cette option n'est pas activée, déclencher les balises dès qu'un utilisateur essaie d'envoyer le formulaire. Donc pour éviter de mesurer les clics sur le bouton " envoyer " activez l'option " vérifier la validation ", votre mesure gagnera en précision.
  • " Modification de l'historique " - correspond à l'événement 'event':'gtm.historyChange ' dans le dataLayer, autrement dit en cas de changement de l'historique de navigation (fragment d'URL " # " change dans une application Ajax ou lorsqu'un site utilise les API pushState HTML5).
    Utile notamment pour mesurer les pages vues virtuelles, au moment des changements d'URL sans rechargement de la page.
    A noter que l'objet " historyChangeSource " disponible dans le dataLayer de l'event " gtm.historyChange " vous renseigne sur la nature du changement d'historique.
    - 'historyChangeSource':pushState = ajoute une entrée dans l'historique de navigation.
    - 'historyChangeSource':replaceState = modifie l'entrée courante dans l'historique de navigation.
    - 'historyChangeSource':popstate = changement d'entrée courante dans l'historique de navigation. Intervient quand l'utilisateur utilise les boutons " Avancer " ou " reculer " du navigateur.
  • " Événement personnalisé " - correspond à l'événement 'event':'votre-event-personnalisé ' dans le dataLayer, autrement dit à l'activation de votre event dans la couche de données.
    Utile donc pour déclencher vos événements, comme le tag Google Analytics e-commerce amélioré d'ajout de produit au panier
    e-commerce amélioré d'un produit.
    Une fois l'event " addToCart " poussé dans le dataLayer, suite au clic sur le bouton " ajouter au panier " de la fiche produit, le tag associé à cet event personnalisé sera déclenché. Il embarquera certainement les variables présents dans le dataLayer au moment de l'event addToCart.
    Pour les récupérer, que devez-vous faire ? (c'est expliqué dans la partie variable).
    [collapse title='Réponse']
    1- Créer une " Variable de couche de données ".
    2- La nommer de façon explicite pour comprendre la valeur qu'elle recouvre, ex. " ecommerce add product category ",
    3- Pour configurer la variable, utilisez des " . " (point) pour descendre d'objet en objet jusqu'à atteindre la variable recherchée. Exemple. " ecommerce.add.product.0.category " (0 correspond au 1er index du tableau JavaScript de l'objet products[]).
    [/su_spoiler][/su_accordion]
    A partir des informations contenues dans ce dataLayer, vous allez pouvoir conditionner un autre déclencheur.
    Par exemple : SI 'event " = 'addToCart' ET SI " ecommerce.add.product.0.category " = " Apparel " ALORS déclencher le tag remarketing " HTML Apparel ".
  • " Erreur JavaScript " - correspond à l'événement 'event':'gtm.pageError' dans le dataLayer, autrement dit aux erreurs JavaScript non capturées qui ont été générées côté client.
    Utile pour déclencher une balise event Google Analytics qui reporte les erreurs JavaScript non capturées.
    event: "gtm.pageError"
    gtm.errorLineNumber: 1
    gtm.errorMessage: "Uncaught SyntaxError: Unexpected identifier"
    gtm.errorUrl: "http://training.webanalyste.com/produit/woo-album-2/"

    A partir des informations contenues dans le dataLayer de l'event " gtm.pageError ", vous allez pouvoir alimenter votre balise GA Event. Exemple : event category = error, event action = javascript error, event label : {{gtm.errorMessage}}, event value : {{gtm.errorLineNumber}}.
  • " Minuteur " - correspond à l'événement 'event':'gtm.timer' (ou nom personnalisé) répété tous les n fois pendant n fois dans le dataLayer. Perdu ? Normal ;). En fait le déclencheur " minuteur ", c'est un compte à rebours en millisecondes (1 seconde = 1000 millisecondes) qui arrivé à terme s'auto-déclenche, et cela autant de fois que configuré.
    Utile par exemple pour mesurer le temps passé sur une page particulière ou les sites one page, car Google Analytics a besoin de 2 pages vues pour calculer le temps passé sur la première page, en calculant la différence entre l'heure de chargement de la page 1 et de la page 2.
    event: "gtm.timer"
    gtm.timerCurrentTime: 1450080903070
    gtm.timerElapsedTime: 30756
    gtm.timerEventNumber: 1
    gtm.timerId: 12
    gtm.timerInterval: 30000
    gtm.timerLimit: 10
    gtm.timerStartTime: 1450080872314
    gtm.triggers: "1790844_11"

    Exemple :
    Variable couche de données : " timer interval "= gtm.timerInterval // correspond à l'intervalle du minuteur que vous avez configuré dans le déclencheur.
    Variable couche de données : " timer event number "= gtm.timerEventNumber // renvoie le nombre de fois que le minuteur s'est déclenché sur la page active.
    Variable JavaScript personnalisé " time on page " = (function(){ return {{timer event number}} * {{timer interval}}; })
    Balise Google Analytics Event : category = timer, event action = time on page, event label = {{time on page}} secondes, event value = {{time on page}}.

Comprendre le dataLayer.

Un dataLayer (couche de données) est un tableau JavaScript qui stocke des objets et leurs propriétés (paire de variables/valeur) qui pourront être exploités dans GTM ou dans d'autres outils qui ont besoin d'accéder aux données.
Les variables sont toujours déclarées de la manière suivante :
'varName': 'thisName'

Elles sont séparées entre elles par de simples virgules :
'varName1': 'thisName1', 'varName2': 'thisName2'

Une variable qui englobe trois autres variables dans un objet.
'varName2': {
'varName2_1' : 'thisName2_1',
'varName2_2' : 'thisName2_2',
'varName2_3' : 'thisName2_3'
}

On peut considérer 2 types de dataLayer,

  • Le dataLayer d'impression, dont les valeurs doivent être disponibles très tôt au chargement de la page, souvent commun à toutes les pages. Il existe deux sous-type de dataLayer d'impression, le dataLayer Header (DLH) qui contient les métadonnées du site, et le dataLayer Ecommerce Enhanced (DLEE) qui contient les impressions des produits et des promotions.
  • Le dataLayer d'action, dont les valeurs sont relatives à une action utilisateur ou d'un événement automatique généré par un script.

1 - Le dataLayer header (DLH).

Le dataLayer header est une dataLayer d'impression. Il contient souvent les métadonnées relatives à l'environnement (ex. 'environnement_country':'france'), au contenu (ex. 'page_type':'category'), à l'utilisateur (ex. 'user_age':45).

Il doit être positionné avant le script du conteneur GTM, idéalement dans le header. Le but est que l'ensemble des propriétés du DLH soient disponibles suffisamment tôt pour alimenter les éventuelles dimensions personnalisées qui seront embarquées dans la balise Google Analytics " page vue ", déclenchée sur l'event gtm.js (" page vue "), activé au chargement de la librairie GTM. Ainsi vous bénéficierez de mesures les plus précises possible, car reportées très tôt au chargement de la page.
<script type="text/javascript">
window.dataLayer = window.dataLayer || [];
dataLayer.push({
'user':{
'userID' : 'unkwown',
'visitorID' : getCookie('_ga'),
'userGender' : 'unkwown',
'userLoginState': 'Unlogged',
'usertype' : 'customer',
'userAgeRange':'25-35',
'customerLifeTimeValue': '1500-3000',
'customerOrders': '24',
'customerLastOrderOldness': '3-6'
},
'page': {
'brand' : 'femme',
'brandDetail' : 'women-pret-a-porter',
'language' : 'FR',
'pageType' : 'product',
'environment' : 'live'
}
})
</script>

Observez la ligne dans le script qui précède le dataLayer : " window.dataLayer = window.dataLayer || []; ", elle permet de faire référence au dataLayer existant dans la page ou bien d'en créer un nouveau s'il n'existait pas. Ainsi vous êtes certain de pousser les données dans le dataLayer et également d'éviter de générer une erreur Javascript si le dataLayer n'existait pas.

Il existe une autre méthode pour déclarer votre dataLayer au-dessus du script GTM.:
<script type= "text/javascript ">
dataLayer = [{'event':'mon_event'}];
</script>

Même si cela fonctionne parfaitement, si placé au-dessus du script GTM. Je vous recommande de ne pas utiliser cette approche qui créer un nouveau tableau, car utilisé au mauvais endroit, après le script GTM, vous écraserez le dataLayer actif et perdrez les valeurs qu'il contenait.
En résumé, utilisez toujours l'approche 99,9% fiable :
<script type= "text/javascript ">
window.dataLayer = window.dataLayer || [];
dataLayer.push({'event':'mon_event'});
</script>

2 - Le dataLayer Action (DLA).

Le dataLayer Action contient les propriétés de l'action. Il est déclenché lors d'une action utilisateur ou à partir d'un événement automatique généré par un script.
Ci-dessous un exemple de script pour déclencher un dataLayer DLA e-commerce amélioré avec l'action ADD depuis le code de la page. Le script identifie le bouton et l'action à écouter. Une fois l'action écoutée, activation de la fonction qui contient le dataLayer correspondant .
<header>
var el = document.querySelector("#add_to_cart_button"); // on identifie le bouton à écouter via son id "add_to_cart_button".
el.addEventListener('clic',gtmPush_addToCart, false); // si on entend un clic sur le bouton, on active la fonction "gtmPush_addToCart".

function gtmPush_addToCart(){
dataLayer.push({
'event': 'addToCart',
'ecommerce': {
'currencyCode': 'EUR',
'add': {
'products': [{
'name': 'Triblend Android T-Shirt',
'id': '12345',
'price': '15.25',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Gray',
'quantity': 1
}]
}
}
});
}
</header>

Configurer Google Tag Manager pour tracker les pages vues avec Google Analytics.

Passons un peu à la pratique, en commençant par configurer certainement le tag le plus configuré dans GTM, la balise Google Analytics Page vue.

Voici les étapes clés pour configurer Google Tag Manager pour créer une balise GA page vue.

  1. Créez et configurez une balise Google Analytics.
  2. Créez ou activez les variables utiles pour la configuration de la balise Google Analytics Page Vue.
  3. Créez et testez le déclencheur de la balise Google Analytics Page Vue.
  4. Publier le conteneur GTM.

Exemple pour configurer une balise " page vue " Google Analytics dans Google Tag Manager.

Rendez-vous au rayon " balise " GTM, sélectionnez le template " Google Analytics ".

  • Pour la nommer, je vous recommande d'adopter et respecter une nomenclature commune pour l'ensemble de vos balises, personnellement, je compose souvent les noms " nom " + " fonction " + " portée " - exemple " ga pageviews all pages ".
    • nom : correspond au nom, abréviation de l'éditeur de la balise, exemple " ga ", " adw ", " lengow ", " criteo "... (pour harmoniser, tous les intitulés sont en minuscules).
    • fonction : correspond à la fonction principale de la balise, ex. " page vue ", " event ", " conversion ", " remarketing "...
    • portée : correspond à la portée de déclenchement sur les pages ou section du site, exemple " all pages ", " category ", " cart ", " purchase "...
  • Sélectionnez le type " page vue ".
  • Pour l'identifiant, je vous invite à créer une variable pour stocker " en dur " le code de suivi Google Analytics ... oui mais de quel type de variable créer pour faire cela ?
    [collapse title='Réponse']
    une variable "constant ".
    [/su_spoiler][/su_accordion]
  • Pour customiser votre hit page vue, ouvrez " paramètres supplémentaires " > " champs à définir ". Ici, vous allez pouvoir configurer le suivi userID, le cookieDomain (" auto ", partage le cookie _ga avec tous les sous-domaines du domaine propriétaire ou spécifique en listant les sous-domaines ou domaines à inclure dans le cross-domaine, en ajoutant allowLinker=true, si autres domaines), le taux d'échantillonnage du suivi des performances des pages... ).
  • Pour reporter vos dimensions personnalisées, ouvrez le champs " Paramètres supplémentaires " puis " dimension personnalisée ". Précisez l'index de la dimension personnalisée tel que défini dans l'admin de votre propriété Google Analytics. Puis sélectionnez la variable qui correspond aux valeurs attendues par votre dimension personnalisée. Au niveau des hits " pages vues ", vous devez reporter tous les types de dimension personnalisée, user, hit, session.
  • Il ne reste plus qu'à intégrer le déclencheur pour activer votre balise. Pour une balise Google Analytics, le meilleur déclencheur c'est " all pages " - qui correspond au chargement de la librairie GTM positionné idéalement juste après l'ouverture de la balise <body>.

Exemple pour configurer une balise " event " Google Analytics dans Google Tag Manager.

Rendez-vous au rayon " balise " GTM, sélectionnez le template " Google Analytics ".

  • Pour la nommer, " ga event addToCart ".
  • Sélectionnez le type " event ".
  • Pour l'identifiant, utilisez votre variable " constant " dans laquelle vous avez stocké " en dur " le code de suivi Google Analytics.
  • Alimenter les valeurs de l'événement Catégorie, Action, Label et valeur en utilisant vos variables. Vous pouvez concaténer les variables et du texte, exemple : " event.label " = {{product name}}_{{product category}}_{{product sku}} ".
  • Pour reporter vos dimensions personnalisées de type " hit ", ouvrez le champ " Paramètres supplémentaires " puis " dimension personnalisée ". Précisez l'index de la dimension personnalisée tel que défini dans l'admin de votre propriété Google Analytics.
  • Il ne reste plus qu'à intégrer le déclencheur personnalisé qui activera votre balise au moment de l'événement. ex. {{Click Text}} => [" correspond à l'expression régulière (insensible à la casse) "] => " ajouter au panier ".

Deux derniers conseils à considérer pour configurer Google Tag Manager efficacement.

Concernant la configuration de Google Tag Manager, voici deux points à considérer lors de l'implémentation de GTM.
  • Configurer Google Tag Manager de manière simple et naturelle de façon à être pris en main rapidement par n'importe quel intervenant (Marketing ou IT). Évitez les énormes scripts fourre-tout, qui accélèrent " parfois " l'implémentation, mais ralentissent considérablement le temps d'apprentissage et d'exploitation sans parler des possibles effets de bord qui peuvent affecter la précision des mesures.
  • Configurer Google Tag Manager de manière à optimiser le poids total du conteneur intégré dans vos pages (gtm.js) pour minimiser son impact sur le temps de chargement des pages. Pour cela vous devez utiliser rationaliser le nombre de variables et de déclencheurs. Adoptez une approche moléculaire, chaque composant doit pouvoir être utilisé par tous les autres.