Utilisation du Data Layer dans Google Tag Manager

Utiliser le datalayer
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Découverte de Google Tag Manager
Revoir le teaser Je m'abonne
Transcription

49,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Description Programme Avis

49,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Les objectifs de cette vidéo sont de :

  • Comprendre le rôle du Data Layer dans GTM
  • Savoir comment ajouter et structurer des données dans le Data Layer
  • Apprendre à créer et gérer des variables de couche de données
  • Utiliser des calculs dynamiques dans GTM pour enrichir les tags

Cette vidéo explique comment utiliser le Data Layer dans Google Tag Manager pour enrichir des pages web et améliorer le suivi des conversions e-commerce.

Dans cette leçon, nous allons explorer l'usage du Data Layer avec Google Tag Manager (GTM) pour améliorer la mesure des transactions et le contenu des pages web. Tout d'abord, nous apprendrons à créer une page de conversion fictive que nous enrichirons avec divers attributs et paramètres. Ceci permettra à GTM de les interpréter et de les utiliser pour alimenter différents tags. Nous verrons également comment structurer ces éléments avant l'appel à GTM.

Ensuite, nous discuterons des bonnes pratiques pour définir et vérifier l'existence de la variable Data Layer. À travers des exemples concrets, nous montrerons comment utiliser l'instruction push pour ajouter des éléments au Data Layer, tels que des variables liées à la transaction.

Enfin, nous couvrirons les étapes pour déclarer ces variables dans Google Tag Manager, les méthodes pour créer des variables personnalisées, et leur utilisation pour des opérations plus complexes ou des calculs dynamiques. Ces connaissances sont essentielles pour toute personne souhaitant améliorer la flexibilité et la précision du suivi e-commerce sur leur site web.

Voir plus
Questions réponses
Pourquoi utiliser le Data Layer dans GTM ?
Le Data Layer permet de structurer et de transmettre efficacement les données des pages web à Google Tag Manager, améliorant ainsi la flexibilité et la précision du suivi des événements.
Qu'est-ce qu'une variable de couche de données dans GTM ?
Une variable de couche de données dans GTM est une variable définie dans le Data Layer que GTM peut lire et utiliser pour déclencher des tags ou effectuer des calculs.
Comment ajouter des données au Data Layer ?
Pour ajouter des données au Data Layer, on utilise l'instruction push en JavaScript, qui permet d'intégrer des couples de clés et de valeurs dans le Data Layer existant ou nouvellement créé.
Là on va s'atteler à l'utilisation d'un attelayeur dans GTM et donc dans notre page là. Parce que là on a une page on va dire tout à fait lambda, tout à fait vide. Je voudrais pouvoir changer ce qu'il y a dedans et le rendre plus riche pour que GTM l'interprète comme étant autant d'attributs et de paramètres qui serviront à alimenter différents tags. Je vous explique. Je suis sur une page de conversion par exemple, ma page 2 va devenir une page de conversion. Je vais en faire une copie, tiens. Je vais sauvegarder ça, je l'appelle conversion.html, voilà. Et donc conversion.html, ça va me permettre de dire, j'ai appelé félicitations pour votre commande. Et donc l'idée c'est qu'on va lui dire, ok, vous avez bien acheté, je donne un mille, là on fait une liste. Donc un rip, vous avez acheté, je ne sais pas, le journal de la veille, ok. Et 5 kilos de terreau, voilà. Vous voyez ce qu'il y a dedans, c'est purement fictif. Sauf que moi l'idée c'est que si j'ai un site e-commerce qui me dit, je veux mesurer mes transactions, je veux mesurer le contenu de mes pages, donc pour un total de 54,27 euros, voilà. Donc là ma page en soi, elle n'a pas beaucoup changé, c'est-à-dire que du coup il faut que maintenant je l'upload chez moi. Si j'ouvre ma page, donc conversion.html, je tombe bien sur ma page félicitations pour votre commande. Donc jusque là ma page contient mon code gtm, donc j'ai bien une page Vue.netx qui se déclenche avec tout ce qu'il faut dedans, voilà. Donc là-dedans, a priori c'est bon. Sauf que moi j'aurais fait un petit peu de classification de ce que j'ai là-dedans, d'accord. Donc du coup je vais dire à mon code là que je vais enrichir Google Tag Manager avec son appel à Data Layer. Donc la bonne pratique c'est de construire cette liste d'éléments et d'attributs au-dessus de l'appel Google Tag Manager, d'accord. Après une bonne pratique c'est de créer sa variable Data Layer en amont et de regarder si elle est définie déjà au niveau de la page, donc Windows.DataLayer, ok. Donc s'il n'y en a pas on prend celle qui est existante ou alors on crée un nouveau tableau vide, voilà. Et donc là-dedans après on fait, on utilise l'instruction push qui permet donc de rajouter des éléments dedans. Donc là on va rajouter toute une ribambelle d'éléments qu'on va donc, c'est une fonction, on commence toujours par le double parenthèse. A l'intérieur on sait qu'on va pousser un tableau de données donc on rentre une série d'accolades. Et là je vais rentrer mes entrées comme des couples de clés et de valeurs séparées par des virgules. Donc j'ai, je vais avoir par exemple variable 1 contient 1, enfin 2 plutôt. Je vais avoir donc du coup variable 2 qui est égale à 4, d'accord. Et je vais l'appeler météo contient nuageux, voilà. Donc il faut bien comprendre que DataLayer en soi c'est un format d'objet qui est automatiquement reconnu par GTM. Sauf si vous avez changé le nom de la variable ici. Donc ce qu'on fait c'est que là si je recharge ma page et que je la réexpédie sur mon serveur, quand je recharge ma page, vous allez voir qu'il va se passer autre chose. C'est que là automatiquement il va reconnaître que dans DataLayer il y a des choses en plus, d'accord. Et je vais pouvoir faire des trucs avec, d'accord. Je vais pouvoir faire toutes sortes d'opérations. C'est à dire que si j'ai une variable 1, un variable 2 et météo, je sais que je vais pouvoir en faire quelque chose. Ok, je vous donne un mille. Je vais d'abord devoir les déclarer côté variable dans la console TagManager. Donc variable 1, variable 2 et météo. Dans TagManager, dans mes variables, je vais créer une nouvelle variable qui s'appelle variable 1. Variable 1 qui elle est basée sur une variable de couche de données. Oui, une variable DataLayer, voilà, de couche de données. Donc elle va s'appeler variable 1 tel que je l'ai écrit dans mon code, d'accord. Donc là ça va être variable 1 avec un v minuscule, v minuscule ici. Allez, hop, on va en créer une autre. Variable 2. Donc celle-là, hop, avec toujours en provenance couche de données et variable 2. Ok, j'en crée une autre qui s'appelle condition météo. Condition météo qui du coup se base sur ma variable qui s'appelle météo. Et ça suffit, d'accord. Si je fais un simple rapprochement de mon container et que je m'allonge dans ma page, vous allez voir que mon débuggeur va changer de tête. Très largement parce que maintenant, non seulement j'ai bien DataLayer qui comprend les valeurs, mais en plus mes variables ici sont mises à jour en fonction du statut. Donc là, regardez, hop, je vais tomber sur variable 1, 2, 4, et condition météo contient nuages. Voilà, ok. Je vous donne en mille. On va mettre du coup d'autres choses en place. Donc si j'ai variable 1, on reprend le même principe que pour les variables tout à l'heure. Je vais reprendre donc du coup une balise qui me dit annonce météo, d'accord. Et on va dire par exemple que c'est de l'HTML encore une fois, ou ça peut être un événement GA. Par exemple voilà, je vais dire c'est Analytics. Donc rappelez-vous, on prend l'ID Analytics ou dans la liste. C'est un événement. Je l'appelle météo. Et donc je vais mettre dedans condition météo. Voilà. Donc là, c'est très simple. On va dire qu'on va déclencher un déclencheur et lui dire ça ne se déclenchera que si la météo contient quelque chose. Donc météo renseignée. Voilà. Et on lui dit que par exemple la variable, alors sur la page vue, certaines pages vues, celles où les conditions météo, alors par exemple, contient nuageux. Mais on veut par exemple récupérer plusieurs types de météo. Dans le tag GA, on va récupérer la condition météo. Donc on veut que ça corresponde soit à une expression régulière où en fait en gros on dit il faut que ça contienne quelque chose. Donc on dirait par exemple .+, qui est une expression régulière pour dire que ça comprend quelque chose. Ou alors on pourrait dire qu'il correspond à ensoleillé ou nuageux, donc avec des barres verticales, ou pluvieux, ou neige, ou brume. On peut faire plein de choses rigolotes comme ça. Mais du coup, si une de ces conditions la réunit, donc le tag météo contient nuageux, ou ensoleillé, ou pluvieux, ou neige, ou brume, ça va déclencher mon événement GA. Donc là, j'enregistre mon tag. J'actualise mon aperçu. Je relance ma page. Et donc là, il a déclenché un tag en plus, qui est l'annonce météo, qui contient bien dans les paramètres météo et nuageux. Qui l'a récupéré comme un grand depuis mon DataLayer. Ce qu'on voit là, c'est une utilisation de base du DataLayer. Vous allez me dire, mais d'où est-ce que ça sort ce DataLayer ? Est-ce que c'est moi qui l'ai écrit à la main ? Là, oui, en l'occurrence, c'est moi qui l'ai écrit à la main, mais vous pouvez très bien le faire générer par votre site web, si vous utilisez du PHP, ou du Perl, ou du Python, ou du Ruby, ou du sais quoi encore. Donc en fait, cette partie-là est censée être variable. Comme son nom l'indique, ce sont des variables. Donc ce qu'on peut faire aussi, c'est faire des calculs plus compliqués, en disant variable1 plus variable2 par exemple. Ça, ça va être très simple à faire. Donc si je repasse sur ma console GTM, je vais créer par exemple une autre variable, qui du coup va être personnalisée. Je vais l'appeler calcul de variable. Donc là, je vais prendre ce qu'on appelle du code JavaScript personnalisé. Et là, il faut que je remplisse une fonction qui est vide. Donc là, c'est du pur JavaScript. Et je lui fais par exemple un return, retourner de valeur. Donc du coup, variable1 plus variable2. Voilà, juste s'assurer que mes variables deviennent comme ça. Donc variable1, variable2. Donc du coup, j'ai bien une énième variable qui va me calculer la 1 plus la 2. Et donc du coup, si je rafraîchis ma page, et que je regarde mon data layer, il va me dire que dans mes variables, j'ai un calcul de variable qui est égal à 6, donc 4 plus 2. Donc il m'a fait le calcul pour moi, et automatiquement, je vais pouvoir me baser sur plein de calculs ou de traitements de texte ou d'autres choses sur le contenu de mes variables avant de les passer à mes différents tags. Donc voilà pour l'utilisation de base du data layer. C'est vraiment un moyen pour vous de remplacer ce qu'on faisait il y a 15 ans avec des metatags. Et donc là, du coup, on va pouvoir renseigner plein d'informations, métiers, utilisateurs, contenus sur ce qui se passe là maintenant dans le navigateur, les prendre, les capturer et nous en servir pour alimenter différents types de tags.
Nos dernières formations Référencement / SEO