Conférence sur Google Tag Manager par Ronan Chardonneau lors du WebCampDay 2015.

1. 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

2. 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

3. 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

4. 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

5. Objectif de la fin de la conférence

6. 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

7. 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

8. Pourquoi s’intéresser à MeasureCamp?
Nous MeasureCamp
D’ici quelques mois, la plus grande communauté en
analyse digitale au monde

9. 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/

10. 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.

11. Pourquoi cette
conférence sur
Google Tag Manager
est inutile?

12. Faire de l’argent avec GTM

13. 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

14. Autre recommandation

15. Google Tag
Manager V2
Début de la conférence

16. Quand on démarre sur GTM
You know nothing Jon Snow

17. Qu’est ce qu’un TMS?

18. Best definition ever !!!
GTM est un système de déploiement
JavaScript.
Et voilà en une ligne vous avez tout compris :)

19. 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

20. Google Tag
Manager
Ce qu’il vous faut connaître pour aller plus
loin dans votre utilisation

21. GTM: Les aspects psychologiques
1. Pourquoi certaines entreprises n’utilisent pas GTM?
2. Comprendre les variables
3. Les outils de testing
4. Comprendre le DOM / Le scraping
5. Création d’un événement personnalisé
6. Le json
7. Comprendre le dataLayer
8. A quoi servent les plugins des CMS
9. Appréhender l’e-commerce et GA

22. 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...

23. 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

24. Les outils de testing
1. L’interface de testing de GTM
2. GA debugger
3. Tag Assistant

25. Schéma de déboggage
Extrait du dev guide de Phil Pearce

26. 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é.

27. Lorsqu’un DOM est peu détaillé

28. 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

29. Autre méthode: le scraping
Le scraping: méthode permettant d’extraire du
contenu sur une page.
Nécessite l’utilisation de jQuery.
jQuery: bibliothèque JavaScript
permettant de générer facilement
un code complexe.
Avant quand j’entendai
parler de jQuery

30. 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

31. Comment cela s’utilise?
● Test de la valeur à scraper via console web:

32. La formation à connaitre pour la
console web de Google Chrome
http://discover-devtools.codeschool.com/

33. Création de la (des) variable(s)
Rien de plus

34. Idem dans GA

35. Libre à vous de les utiliser derrière

36. Vous testez
Pif
Paf

37. Vous créez votre rapport dans GA

38. Quelques heures plus tard

39. Les événements
personnalisés

40. 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>

41. 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

42. Création de l'évènement JavaScript

43. Création de notre GA event

44. Notre déclencheur étant

45. 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

46. 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.

47. A titre comparatif
XML JSON

48. 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

49. 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.

50. 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...

51. 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

52. 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).

53. Qu’apportent les plugins des CMS?
Peupler plus facilement le dataLayer:

54. 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

55. D’abord GTM, ensuite javascript, et puis
jQuery, maintenant du json!!!
Tu me prends pour un babo ou quoi
Conclusion

56. 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

57. Si vous voulez du SEO
http://fr.slideshare.net/phildpearce/how-can-a-
data-layer-help-my-seo

58. Les liens abordables
● www.udemy.com/google-tag-manager/
(fouinez le web pour trouver des coupons)
● http://www.chablais-web.fr/google-tag-
manager-v2-le-guide-francophone-le-plus-
complet-partie-1.php