Cartelis formation-google-tag-manager

33
Formation Google Tag Manager

Transcript of Cartelis formation-google-tag-manager

Page 1: Cartelis formation-google-tag-manager

Formation Google Tag Manager

Page 2: Cartelis formation-google-tag-manager

2Copyright © Cartelis. Tous droits réservés.

Sommaire

A. Tag Management System Qu'est-ce qu'un tag, à quoi ça sert, comment ça marche ? Qu’est-ce qu’un Tag Management System ? Pourquoi utiliser un Tag Management System ?

B. Utilisation de Google Tag Manager Use case #1 – Déclencher Hotjar sur toutes les pages Use case #2 – Générer un événement Google Analytics lors d’un clic sortants Use case #3 – Envoyer les attributs d’un lead à une solution de marketing automation

C. Plan de marquage Pourquoi faire un plan de marquage ? Qu'est-ce qu'un plan de marquage ?

D. Recette d’une implémentation Google Tag Manager Utilisation de la console pour la recette du DataLayer Utilisation du mode « preview » pour une recette approfondie

Page 3: Cartelis formation-google-tag-manager

ATag Management System

Page 4: Cartelis formation-google-tag-manager

4Copyright © Cartelis. Tous droits réservés.

A TAG MANAGEMENT SYSTEM

Qu’est-ce qu’un tag, à quoi ça sert et comment ça marche ?

Un tag (balise en français) est un extrait de code, souvent en JavaScript, qui permet d’envoyer des informations/ d’effectuer des transformations grâce à un logiciel tiers (Google Analytics, Kameleoon, Hotjar) ou à une solution interne (CRM, etc.)

QU’EST CE QU’UN TAG ?

À QUOI SERVENT LES TAGS ?

Les tags sont utilisés sur un site pour : Mesurer le nombre d’utilisateurs, de sessions, la durée des sessions, etc. Observer le comportement des visiteurs comme les clics, la navigation, etc. Agir en collectant des données pour la création de segments d’utilisateurs. Attirer des visiteurs en faisant du retargeting.

COMMENT FONCTIONNENT-ILS ?

Les tags récoltent les données par le code JavaScript et les envoient à un service tiers comme Google Analytics, Adwords, Facebook, Twitter, etc. une solution interne comme un CRM, etc.

Page 5: Cartelis formation-google-tag-manager

5Copyright © Cartelis. Tous droits réservés.

A TAG MANAGEMENT SYSTEM

Qu’est-ce qu’un Tag Management System ?

Un Tag Management System (outil de gestion de balises) permet de simplifier le déploiement, la mise à jour et l’administration de l’ensemble des tags déployés sur un site en gérant tous les tags au travers d’un seul tag conteneur.

Un tag conteneur permet de gérer les règles de déclenchement de l’ensemble des tags qu’il héberge.

Page 6: Cartelis formation-google-tag-manager

6Copyright © Cartelis. Tous droits réservés.

A TAG MANAGEMENT SYSTEM

Pourquoi utiliser un Tag Management System ?

Sans un Tag Management System : allongement du temps de déploiement des outils marketing − Le déploiement des tags sur un site est très coûteux en temps car il nécessite d’impliquer les

équipes de développeurs pour la mise en place et la recette des tags. − En moyenne, il faut

− Plus d’un jour pour mettre en place 79% des tags.− Plus de 11 jours pour 29% des tags.

Avec un Tag Management System : autonomie des équipes marketing − L’équipe des développeurs fait une mise en place initiale du tag conteneur sur le site− Les équipes marketing peuvent gérer eux-mêmes les règles de déclenchement et les modifier sans

avoir à faire un déploiement sur l’ensemble du site.

GAIN DE TEMPS ET AUTONOMIE DES ÉQUIPES

Déploiement d’un tag conteneur à la place d’une multitude de tags sur les différentes pages du site.

OPTIMISATION DU TEMPS DE CHARGEMENT DU SITE

Page 7: Cartelis formation-google-tag-manager

7Copyright © Cartelis. Tous droits réservés.

A TAG MANAGEMENT SYSTEM

Tag Management System, les solutions de références

TagCommander de Tag Commander, lancé en 2010, leader du marché français avec Google Tag Manager.

Tealium IQ de Tealium, lancé en 2010.

Adobe TagManager d’Adobe, lancé en 2011.

OpenTag de QuBit, lancé en 2011.

Coremetrics Digital Data Exchange d’IBM, lancé en 2011.

Google Tag Manager, lancé en 2012.

Page 8: Cartelis formation-google-tag-manager

BUtilisation de Google Tag Manager

Page 9: Cartelis formation-google-tag-manager

9Copyright © Cartelis. Tous droits réservés.

B UTILISATION DE GOOGLE TAG MANAGER

Présentation générale

Lancé en 2012 par Google, Google Tag Manager est Tag Management System (outil de gestion de balises)

Google Tag Manager est 100% gratuit

Google Tag Manager permet une gestion facilitée de l’implantation des tags sur un site

Google Tag Manager n’inclut pas de support, mais dispose d’une forte communauté d’utilisateurs actifs et de bloggeurs spécialisés.

Page 10: Cartelis formation-google-tag-manager

Use case #1 – Déclencher Hotjar sur toutes les pages

Page 11: Cartelis formation-google-tag-manager

11Copyright © Cartelis. Tous droits réservés.

B UTILISATION DE GOOGLE TAG MANAGER

Méthode 1 – Création d’une balise HTML personnalisée

− Récupérer le Tracking Code depuis le back office de Hotjar.

− Ajout d’une nouvelle balise en choisissant « HTML personnalisé » comme Tag Type

1. CRÉATION DE LA BALISE HTML

Hotjar est un outil UX qui permet de mieux comprendre et d’analyser l’expérience des utilisateurs sur un site à l’aide de cartes de chaleur, d’enregistrement d’interactions entre l’utilisateur et les pages du site (clic, scroll, etc.), de mettre en avant les mouvement de circulation dans l’entonnoir de conversion, etc.

2. PARAMÉTRAGE DU DÉCLENCHEUR

− Utiliser le déclencheur de type « Page vue », toutes les pages vues

Page 12: Cartelis formation-google-tag-manager

12Copyright © Cartelis. Tous droits réservés.

B UTILISATION DE GOOGLE TAG MANAGER

Méthode 2 – Utilisation de la balise prédéfinie

− Choisir le balise prédéfinie

− Récupérer le site ID depuis le back office Hotjar et l’insérer dans l’encart dédié

1. CRÉATION DE LA BALISE

2. PARAMÉTRAGE DU DÉCLENCHEUR

− Utiliser le déclencheur de type « Page vue », toutes les pages vues

Page 13: Cartelis formation-google-tag-manager

Use case #2 – Générer un événement Google Analytics sur l’ensemble des clics sortants

Page 14: Cartelis formation-google-tag-manager

14Copyright © Cartelis. Tous droits réservés.

B UTILISATION DE GOOGLE TAG MANAGER

Présentation des variables (1/3)

Une variable est composée d’un nom et d’une valeur. La valeur peut être dynamique, elle est définie lors de l’exécution du script Google Tag Manager

QU’EST CE QU’UNE VARIABLE ?

Méthode #1 : utiliser une variable de type constante.

Méthode #2 : utiliser la « lookup table » pour gérer plusieurs environnements.

DÉFINIR L’ID GOOGLE ANALYTICS À L’AIDE D’UNE VARIABLE

Page 15: Cartelis formation-google-tag-manager

15Copyright © Cartelis. Tous droits réservés.

B UTILISATION DE GOOGLE TAG MANAGER

Présentation des variables (2/3)

Page URL : correspond à l’URL d’une page.Ex : http://www.monsite.com/formation-google-tag-manager/ est une Page URL

Page Hostname : correspond au nom de domaine d’une page. Ex : http://www.monsite.com/formation-google-tag-manager/Le Page Hostname correspond à « www.monsite.com »

Page Path : correspond à l’URI de la page.Ex : http://www.monsite.com/formation-google-tag-manager/Le Page Path correspond à « /formation-google-tag-manager/ »

Page Referrer : correspond à l’URL de la précédente page, que ce soit sur le site actif ou bien d’un autre site.

LES VARIABLES PRÉDÉFINIES

Page 16: Cartelis formation-google-tag-manager

16Copyright © Cartelis. Tous droits réservés.

B UTILISATION DE GOOGLE TAG MANAGER

Présentation des variables (3/3)

Il existe de nombreuses autres variables prédéfinies. Parmi la liste des variables prédéfinies, il suffit de cocher les variables adaptées.

Il existe 6 catégories de variables prédéfinies : − Clics− Erreurs− Formulaires − Historique− Pages − Services collectifs

PRÉSENTATION DES VARIABLES CLÉS

Les variables peuvent être utilisées à la fois dans les balises et dans les déclencheurs.

Pour paramétrer l’événement Google Analytics sur les clics sortants, on va utiliser la variable « Click URL »

Page 17: Cartelis formation-google-tag-manager

17Copyright © Cartelis. Tous droits réservés.

B UTILISATION DE GOOGLE TAG MANAGER

Paramétrage d’une balise « événement » de Google Analytics

Objectif : générer un événement sur Google Anaytics lors d’un clic sur une lien sortant.

Paramétrage de la balise 1. Sélection de la balise prédéfinie

Google Analytics et paramétrage de l’ID de suivi

2. Définition du type de suivi : événement

Paramétrage du suivi des événements3. Catégorie : Navigation 4. Action : Lien sortant5. Libellé : {{Click URL}}, qui est une

variable qu’on peut utiliser dans le paramétrage d’une balise

PARAMÉTRAGE DE LA BALISE

Page 18: Cartelis formation-google-tag-manager

18Copyright © Cartelis. Tous droits réservés.

B UTILISATION DE GOOGLE TAG MANAGER

Paramétrage du déclencheur

Un déclencheur est une condition qui renvoie la valeur « vrai » ou « faux » à un moment donné. Les déclencheurs associés à une balise définissent les conditions selon lesquelles une balise est

déclenchée ou non. Lorsque le déclencheur à pour valeur « vrai » la balise est déclenchée. Sur Google Tag Manager, les variables peuvent être utilisées dans les déclencheur afin de jouer le rôle de

filtre et de spécifier le moment de l’exécution.

QU’EST-CE QU’UN DÉCLENCHEUR ?

Définition du déclencheur : clic sur certains liens.

La balise événement sera déclenchée lorsqu’un lien cliqué ne contient pas « mondomaine.com »., donc sur l’ensemble des liens sortants du site.

PARAMÉTRAGE DU DÉCLENCHEUR

Page 19: Cartelis formation-google-tag-manager

19Copyright © Cartelis. Tous droits réservés.

B UTILISATION DE GOOGLE TAG MANAGER

Présentation de quelques déclencheurs classiques (1/2)

DÉCLENCHEUR DE TYPE PAGE VUE

Sur Google Tag Manager, « page vue » correspond au moment où la page est en cours de chargement par le navigateur. Par défaut, le déclencheur « Page vue » se déclenche sur l’ensemble des pages du site.

On peut paramétrer le déclencheur pour ne se déclencher que sur certaines pages vues. On utilisera alors des variables comme filtre du déclencheur. Le déclencheur ne prendra la valeur « vrai » que si la valeur de la variable correspond à celle paramétrée sur le filtre.

Dans l’exemple ci-dessous, le déclencheur prend la valeur « vrai » quand la variable Page URL contient la valeur ‘keyword

Page 20: Cartelis formation-google-tag-manager

20Copyright © Cartelis. Tous droits réservés.

B UTILISATION DE GOOGLE TAG MANAGER

Présentation de quelques déclencheurs classiques (2/2)

DÉCLENCHEUR DE TYPE FENÊTRE CHARGÉE

Sur Google Tag Manager, « fenêtre chargée » correspond au chargement complet de la page, y compris les ressources telles que les images. Par défaut, elle se déclenche sur l’ensemble des pages du site.

On peut paramétrer le déclencheur pour ne se déclencher que sur certaines pages vues. On utilisera alors des variables comme filtre du déclencheur. Le déclencheur ne prendra la valeur « vrai » que si la valeur de la variable correspond à celle paramétrée sur le filtre.

Dans l’exemple ci-dessous, le déclencheur prend la valeur « vrai » quand la variable Page Hostname contient la valeur ‘mondomaine.com’

Page 21: Cartelis formation-google-tag-manager

Use case #3 – Envoyer les attributs d’un lead à une solution de marketing automation

Page 22: Cartelis formation-google-tag-manager

22Copyright © Cartelis. Tous droits réservés.

B UTILISATION DE GOOGLE TAG MANAGER

Présentation du dataLayer

Le dataLayer, couche de données en français, est un objet JavaScript spécifique à Google Tag Manager qui contient toutes les informations qui sont accessibles par Google Tag Manager à un moment donné.

Le datalayer est composé de variables définies par un nom et une valeur.

QU’EST-CE QUE LE DATALAYER ?

Le dataLayer est généré automatiquement lors de l‘exécution du script Google Tag Manager.

La fonction datalayer.push permet d’ajouter des variables ou de mettre à jour la valeur des variables dans le dataLayer, selon les actions / le profil de l’utilisateur ou la nature de la page.

COMMENT CUSTOMISER LE DATALAYER ?

Page 23: Cartelis formation-google-tag-manager

23Copyright © Cartelis. Tous droits réservés.

B UTILISATION DE GOOGLE TAG MANAGER

Développement spécifique pour ajouter des datalayer.push

L’équipe marketing définie les informations à collecter sur Google Tag Manager. L’équipe technique paramètre les datalayer.push sur le site.

PARAMÉTRAGE

Lorsqu’un lead est collecté (par exemple soumission d’un formulaire), le développement réalisé va permettre de mettre à jour le dataLayer.

Les nouvelles variables du dataLayer peuvent être utilisées sur Google Tag Manager.

datalayer.push({‘Event’ : ’SiB_lead’; ‘leadBudget’: ‘$lead Budget’; ‘leadPhoneNumber : ‘$Phone Number’})

1. Chargement de la page

2. Soumission d’un formulaire

datalayer ({‘event’ : ‘gtm.js)}

datalayer ({‘Event’ : ’SiB_lead’; ‘leadBudget’: ‘$lead Budget’; ‘leadPhoneNumber : ‘$PhoneNumber’})

EXEMPLE

Page 24: Cartelis formation-google-tag-manager

24Copyright © Cartelis. Tous droits réservés.

B UTILISATION DE GOOGLE TAG MANAGER

Paramétrage des variables de type « Objet de couche de données »

Collecter la valeur des deux variables leadBudget et leadPhoneNumber

OBJECTIF

Création d’une variable « Budget du Lead » en choisissant « Variable de couche de données » comme type de variable.

Spécification du nom de la variable telle qu’elle apparaît dans le dataLayer « leadBudget »

PARAMÉTRAGE

NB : lorsque la variable leadBudget est présente dans le dataLayer, la valeur dans Google Tag Manager sera égale à la valeur de la variable au sein du dataLayer.Cas numéro 1 : Dans le dataLayer, leadBudget : ‘1000’. Sur Google Tag Manager, la valeur de la variable « Budget du Lead » sera égale à ‘1000’ .

Cas numéro 2 : Dans le dataLayer, leadBudget : ‘cocorico’. Sur Google Tag Manager, la valeur de la variable « Budget du Lead » sera égale à ‘cocorico’ .

Page 25: Cartelis formation-google-tag-manager

25Copyright © Cartelis. Tous droits réservés.

B UTILISATION DE GOOGLE TAG MANAGER

Paramétrage de la balise HTML personnalisée

Une balise HTML personnalisée permet de gérer une balise qui n'est pas explicitement disponible via Google Tag Manager.

Par exemple une balise tierce qui n'a pas encore été intégrée dans Tag Manager en tant que modèle de balise. Le code correspondant peut être récupéré auprès du fournisseur de la balise.

Ici, on va créer une baliser pour envoyer les données collectées à SendinBlue Automation.

QU’EST-CE QU’UNE BALISE HTML PERSONNALISÉE ?

Il est possible d’intégrer des variables dans les balises. Pour ce faire, il suffit d’entourer le nom de la variable par des doubles accolades.

Pour envoyer les attributs d’un lead à une solution de marketing automation, on va intégrer la variable {{Budget du Lead}} dans le HTML.

INSERTION DE VARIABLE DANS LES BALISES HTML PERSONNALISÉE

Page 26: Cartelis formation-google-tag-manager

26Copyright © Cartelis. Tous droits réservés.

B UTILISATION DE GOOGLE TAG MANAGER

Paramétrage du déclencheur

PARAMÉTRAGE DU DÉCLENCHEUR POUR LA BALISE

Objectif : Déclencher la balise lors de la soumission du formulaire. On configure le déclencheur en sélectionnant comme type de déclencheur « événement personnalisé » et

en utilisant un filtre sur la valeur de l’événement. Dans notre cas, le déclencheur prendra la valeur « vrai » quand la variable Event a pour valeur ‘SiB_Lead’

Page 27: Cartelis formation-google-tag-manager

CPlan de marquage

Page 28: Cartelis formation-google-tag-manager

28Copyright © Cartelis. Tous droits réservés.

C PLAN DE MARQUAGE

Pourquoi faire un plan de marquage ?

Il permet d’avoir une vision globale et de savoir quels sont les variables déployées et où. Attention, le plan de marquage se complexifie à mesure de que les collectes de données se multiplient sur le site (tracking d’événements, variables personnalisée, etc.).

EXHAUSTIVITÉ

DURABILITÉ

La conception du plan de marquage permet de lister l’ensemble des variables que l’on va chercher à collecter sur le site pour alimenter les différentes balises et déclencheurs.

EXERCICE STRUCTURANT

Le plan de marquage permet à l’entreprise de garder une trace du dispositif en place. Ce document doit être maintenu à jour au fur et à mesure des différentes évolutions.

Page 29: Cartelis formation-google-tag-manager

29Copyright © Cartelis. Tous droits réservés.

C PLAN DE MARQUAGE

Qu’est-ce qu’un plan de marquage ?

Un plan de marquage est le référentiel destiné à lister l’ensemble des « dataLayer.push » qui sont/seront à déployer sur le site.

Il contient l'ensemble des pages, zones, actions et liens spécifiques devant être marqués, et les variables les définissant.

Page 30: Cartelis formation-google-tag-manager

DRecette d’une implémentation Google Tag Manager

Page 31: Cartelis formation-google-tag-manager

31Copyright © Cartelis. Tous droits réservés.

D RECETTE D’UNE IMPLÉMENTATION GOOGLE TAG MANAGER

Utilisation de la console pour recetter le dataLayer

Sur la page voulue sur le site, faîtes inspecter l’élément, ctrl+Maj+I.

Allez dans la console. Entrez « dataLayer » dans l’encart en bas de la page.

FONCTIONNEMENT

Visibilité rapide, au niveau de chaque page, sur les dataLayer.push déployés et exécutés.

Visibilité sur la chronologie d'exécution des différents dataLayer.push.

AVANTAGES

Ne permet pas d'entrer dans le détail de l'exécution (impossible de voir les raisons potentielles lorsqu'un tag ne se déclenche pas).

LIMITES

Page 32: Cartelis formation-google-tag-manager

32Copyright © Cartelis. Tous droits réservés.

D RECETTE D’UNE IMPLÉMENTATION GOOGLE TAG MANAGER

Utilisation du mode « preview » pour une recette approfondie

Sur Google Tag Manager, lancez le mode « preview » à partir de l’onglet en haut à droite

FONCTIONNEMENT

Visibilité sur l'ensemble des dataLayer.push déployés sur une page.

Vision globale sur les tags qui se sont exécutés ou non.

Détails sur les règles de déclenchement des tags.

AVANTAGES

Pas de visibilité sur l'exécution des tags lors d'un changement de page.

LIMITES

Page 33: Cartelis formation-google-tag-manager

StrategyYour Digital

Empower

Phone +33 (0) 1 84 24 02 34E-mail [email protected] www.cartelis.fr