Google Tag
Manager v2
v1 dispo sur http://bit.ly/1AdylB0
GTM pour les nuls dispo sur http://bit.ly/1Fx5bgG
45 minutes pour comprendre GTM…
et aller plus loin dans son utilisation
Remerciements
● Merci aux organisateurs
● Merci à Simo Ahava, Phil Pearce, Julian
Juenemann, Maurice Largeron, Jean-Yves
Vet, Editions ENI… bref tout ceux qui m’ont
aidé depuis plus d’un an sur GTM
● Merci à vous d’avoir choisi cette conférence
A qui s’adresse cette conférence?
● Ceux et celles qui débutent sur Google Tag Manager
● Qui l’utilisent au quotidien mais n’ont pas le temps de
creuser les fonctionnalités
● J’invite les autres personnes à ne pas s’ennuyer et
suivre un autre conférence
● En gros ne restent en principe que les jeunes
chats sur GTM:
Profil des personnes qui devraient
être dans la salle
Les pré-requis
● Que vous sachiez à minima que pour mettre une balise
en ligne, il faut:
○ La créer
○ Lui associer une règle/déclencheur
○ La tester/publier
● Cette conférence est basée principalement sur les
freins psychologiques qui nous empêchent d’avancer
dans GTM
Objectif de la fin de la conférence
A propos de l’intervenant
● Ronan Chardonneau
● En charge du marketing digital à JYMEO
● PAST à l’université d’Angers en marketing digital jusqu’en
2018 !!!
● Auteur de Google Tag Manager aux éditions ENI (GA &
Piwik)
● Award of Achievement in Digital Analytics - University of
British Columbia
● Certifié Google Educator
● Organisateur MeasureBowling Nantes
● Supporter MeasureCamp
Ce que j’ai appris à UBC après 2000€
dépensés
● Quand vous faites du Web Analytics:
○ Arrêter d’écrire des rapports personne ne les lit;
○ Faites des réunions avec des donuts;
○ Faites du Story Telling les gens adorent les
histoires;
○ Former les personnes de votre équipe;
○ Faites du Lean, de l’Agile;
○ Act, Fast, intelligently and driven by data
Pourquoi s’intéresser à MeasureCamp?
Nous
MeasureCamp
D’ici quelques mois, la plus grande communauté en
analyse digitale au monde
Prochains événements
● MeasureBowling Nantes, le 11 juin il reste
des places http://www.measurebowling.org/
● MeasureBowling Angers, on
cherche un volontaire!!!
● MeasureCamp Paris, le 27 juin
http://paris.measurecamp.org/
MeasureCamp Paris
● La prochaine et dernière ticket release est
prévue le 26 mai prochain à 13 h (inscription
ici : http://paris.measurecamp.
org/registration/)
● Une liste d'attente sera mise en place pour
ceux qui n'auront pas eu de tickets et des
billets additionnels seront donnés en
fonction des désistements.
Pourquoi cette
conférence sur
Google Tag Manager
est inutile?
Faire de l’argent avec GTM
Le Lean Analytics / L’agilité en Analytics
●
●
●
●
●
●
●
●
●
●
●
Focus sur le suivi d’une donnée
Règle des 80/20
ROI rapide
Travail collectif
Mise en place d’actions
Focus sur le client final
Prise de décisions sur les données
Transmission des connaissances
Compréhension de la cible
…
GTM, tout comme Google Analytics sont les types
d’outil qui nous en font voir de toutes les couleurs et
nous font oublier l’essentiel
Votre Patron/Client
Le Web Analyste
Autre recommandation
Google Tag
Manager V2
Début de la conférence
Quand on démarre sur GTM
You know nothing Jon Snow
Qu’est ce qu’un TMS?
Best definition ever !!!
GTM est un système de déploiement
JavaScript.
Et voilà en une ligne vous avez tout compris :)
GTM v2 qu’est ce qui change?
● Presque rien:
○ Les règles et macros sont renommées en
déclencheur et en variable
○ Disparition des écouteurs
○ Interface graphique plus intuitive
● En résumé que des bonnes nouvelles
Google Tag
Manager
Ce qu’il vous faut connaître pour aller plus
loin dans votre utilisation
GTM: Les aspects psychologiques
1.
2.
3.
4.
5.
6.
7.
8.
9.
Pourquoi certaines entreprises n’utilisent pas GTM?
Comprendre les variables
Les outils de testing
Comprendre le DOM / Le scraping
Création d’un événement personnalisé
Le json
Comprendre le dataLayer
A quoi servent les plugins des CMS
Appréhender l’e-commerce et GA
Pourquoi certains utilisent une autre
solution de TMS?
● GTM a énormément de retard sur ses concurrents
● Parmi les fonctionnalités non existantes: nombre de
balises supportées très faibles, système d’alertes,
événement graphique, intégration de la solution à des
applications tierces, A/B testing, fonctionnalités
avancées de gestion des cookies, personnalisation des
balises existantes, visualisation des navigateurs
supportés par les balises...
Comprendre les variables
● Comme leur nom l’indique il s’agit de
données qui peuvent changer.
● Exemple concret avec la variable tableau de
conversion pour le déploiement d’un code de
suivi sur du multisite
Les outils de testing
1. L’interface de testing de GTM
2. GA debugger
3. Tag Assistant
Schéma de déboggage
Extrait du dev guide de Phil Pearce
Le DOM
● DOM: Document Object Model
● En gros c’est le nom générique de l’
architecture d’une page web.
● L’organisation de votre DOM permet à
Google Tag Manager de pouvoir facilement
être personnalisé.
Lorsqu’un DOM est peu détaillé
Concrètement
Avec un DOM bien défini, vous pouvez peupler
ce que vous voulez dans le dataLayer.
Exemple: sélectionner un ID et le faire
remonter dans le dataLayer
Autre méthode: le scraping
Le scraping: méthode permettant d’extraire du
contenu sur une page.
Avant quand j’entendai
parler de jQuery
Nécessite l’utilisation de jQuery.
jQuery: bibliothèque JavaScript
permettant de générer facilement
un code complexe.
Quelques exemples
● Récupérer une meta description:
jQuery('meta[name=description]').attr('content')
● Calculer la longueur d’une meta description:
jQuery('meta[name=description]').attr('content').
length
Comment cela s’utilise?
● Test de la valeur à scraper via console web:
La formation à connaitre pour la
console web de Google Chrome
http://discover-devtools.codeschool.com/
Création de la (des) variable(s)
Rien de plus
Idem dans GA
Libre à vous de les utiliser derrière
Vous testez
Pif
Paf
Vous créez votre rapport dans GA
Quelques heures plus tard
Les événements
personnalisés
Création d’un événement personnalisé
L’exemple du “onmouseover”:
<script>
document.getElementById("Votre ID de l’élement").onmouseover = function()
{mouseOver()};
function mouseOver() {
dataLayer.push({'event': 'appel'});
}
</script>
Tout part de la création d’une balise
Élément de la page
sur lequel on souhaite
travailler
Fonction JavaScript à
invoquer
Nom que vous
donnez à votre
fonction js
Envoi d’un event JS
au dataLayer du nom
que je souhaite
Je souhaite que ce
code soit exécuté sur
toutes les pages
Création de l'évènement JavaScript
Création de notre GA event
Notre déclencheur étant
Exemple d’une variante
ondblclick:
<script>
document.getElementById("ID de l’élément").ondblclick = function() {dblclick()};
function dblclick() {
dataLayer.push({'event': 'doubleclick'});
}
</script>
Source:
http://www.kuhlschool.com/javascript-events.php
Le json
JSON (JavaScript Object Notation) est un
format de données textuelles alternatif au
format XML.
A la manière des fichiers XML les fichiers
JSON sont structurées.
A titre comparatif
XML
JSON
Intérêt du json
● Import/Export des conteneurs
● Le suivi d’une vidéo Youtube(json) https:
//drive.google.
com/file/d/0B0OKfv0LWkqIQVY5V1gwbTFx
MjA/view
dataLayer: définition
Un tableau javascript servant à contenir des
objets.
En gros c’est ni plus ni moins qu’un ensemble
de données structurées.
Ces données peuvent être des événéments js,
des données propres à la page affichée.
dataLayer: autre définition
Un espace de stockage utilisé pour faire
transiter des données vers Google Tag
Manager. Par exemple des données présentes
sur une page, d’une API...
dataLayer
De base lorsque GTM est installé il peuple le
dataLayer de trois données: gtm.js, gtm.dom,
gtm.load. Vous avez donc toujours un
dataLayer sur votre page
Les différents types de dataLayer
● Le dataLayer personnalisé(nécessite du
développement, peut être placé avant que le
code GTM soit chargé, meilleur contrôle des
données)
● Ceux que vous allez créer dans l’interface
(pas de développement nécessaire, flexible,
mauvais contrôle des données).
Qu’apportent les plugins des CMS?
Peupler plus facilement le dataLayer:
Appréhender l’e-commerce et GA
● Pour l’e-commerce GA a besoin que les valeurs de
certaines variables soient remplies.
● Hors sur une page de confirmation d’achat toutes ces
données ne sont pas présentes d’où la nécessité de
recourir à des langages côté serveur qui vont nécessiter
du développement.
● Pour appréhender ces notions woocommerce est pas
mal du tout
Conclusion
D’abord GTM, ensuite javascript, et puis
jQuery, maintenant du json!!!
Tu me prends pour un babo ou quoi
Conclusion
Connaître des tours de magie ne fera pas décoller vos sites
ni vos applications.
Les barrières aujourd’hui sur la partie technique n’existent
plus.
Le seul vrai challenge c’est l’analyse de la donnée.
Si il y a quelque chose à retenir:
Act, Fast, intelligently and driven by data
Si vous voulez du SEO
http://fr.slideshare.net/phildpearce/how-can-adata-layer-help-my-seo
Les liens abordables
● www.udemy.com/google-tag-manager/
(fouinez le web pour trouver des coupons)
● http://www.chablais-web.fr/google-tagmanager-v2-le-guide-francophone-le-pluscomplet-partie-1.php