Google Tag
Manager v2
v1 dispo sur http://bit.ly/1AdylB0
GTM pour les nuls dispo sur http://bit.ly/1Fx5bgG
45 minutes pour...
Remerciements
● Merci aux organisateurs
● Merci à Simo Ahava, Phil Pearce, Julian
Juenemann, Maurice Largeron, Jean-Yves
V...
A qui s’adresse cette conférence?
● Ceux et celles qui débutent sur Google Tag Manager
● Qui l’utilisent au quotidien mais...
Les pré-requis
● Que vous sachiez à minima que pour mettre une balise
en ligne, il faut:
○ La créer
○ Lui associer une règ...
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 m...
Ce que j’ai appris à UBC après 2000€
dépensés
● Quand vous faites du Web Analytics:
○ Arrêter d’écrire des rapports person...
Pourquoi s’intéresser à MeasureCamp?
Nous MeasureCamp
D’ici quelques mois, la plus grande communauté en
analyse digitale a...
Prochains événements
● MeasureBowling Nantes, le 11 juin il reste
des places http://www.measurebowling.org/
● MeasureBowli...
MeasureCamp Paris
● La prochaine et dernière ticket release est
prévue le 26 mai prochain à 13 h (inscription
ici : http:/...
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 coll...
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
○ Dispari...
Google Tag
Manager
Ce qu’il vous faut connaître pour aller plus
loin dans votre utilisation
GTM: Les aspects psychologiques
1. Pourquoi certaines entreprises n’utilisent pas GTM?
2. Comprendre les variables
3. Les ...
Pourquoi certains utilisent une autre
solution de TMS?
● GTM a énormément de retard sur ses concurrents
● Parmi les foncti...
Comprendre les variables
● Comme leur nom l’indique il s’agit de
données qui peuvent changer.
● Exemple concret avec la va...
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 d...
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 I...
Autre méthode: le scraping
Le scraping: méthode permettant d’extraire du
contenu sur une page.
Nécessite l’utilisation de ...
Quelques exemples
● Récupérer une meta description:
jQuery('meta[name=description]').attr('content')
● Calculer la longueu...
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")...
Tout part de la création d’une balise
Élément de la page
sur lequel on souhaite
travailler
Fonction JavaScript à
invoquer
...
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()...
Le json
JSON (JavaScript Object Notation) est un
format de données textuelles alternatif au
format XML.
A la manière des f...
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/0B0O...
dataLayer: définition
Un tableau javascript servant à contenir des
objets.
En gros c’est ni plus ni moins qu’un ensemble
d...
dataLayer: autre définition
Un espace de stockage utilisé pour faire
transiter des données vers Google Tag
Manager. Par ex...
dataLayer
De base lorsque GTM est installé il peuple le
dataLayer de trois données: gtm.js, gtm.dom,
gtm.load. Vous avez d...
Les différents types de dataLayer
● Le dataLayer personnalisé(nécessite du
développement, peut être placé avant que le
cod...
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.
● H...
D’abord GTM, ensuite javascript, et puis
jQuery, maintenant du json!!!
Tu me prends pour un babo ou quoi
Conclusion
Conclusion
Connaître des tours de magie ne fera pas décoller vos sites
ni vos applications.
Les barrières aujourd’hui sur ...
Si vous voulez du SEO
http://fr.slideshare.net/phildpearce/how-can-a-
data-layer-help-my-seo
Les liens abordables
● www.udemy.com/google-tag-manager/
(fouinez le web pour trouver des coupons)
● http://www.chablais-w...
Prochain SlideShare
Chargement dans…5
×

45 minutes pour comprendre Google Tag Manager… et aller plus loin ! - Ronan Chardonneau

1 220 vues

Publié le

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

Publié dans : Marketing
0 commentaire
4 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 220
Sur SlideShare
0
Issues des intégrations
0
Intégrations
152
Actions
Partages
0
Téléchargements
19
Commentaires
0
J’aime
4
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

45 minutes pour comprendre Google Tag Manager… et aller plus loin ! - Ronan Chardonneau

  1. 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. 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. 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. 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. 5. Objectif de la fin de la conférence
  6. 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. 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. 8. Pourquoi s’intéresser à MeasureCamp? Nous MeasureCamp D’ici quelques mois, la plus grande communauté en analyse digitale au monde
  9. 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. 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. 11. Pourquoi cette conférence sur Google Tag Manager est inutile?
  12. 12. Faire de l’argent avec GTM
  13. 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. 14. Autre recommandation
  15. 15. Google Tag Manager V2 Début de la conférence
  16. 16. Quand on démarre sur GTM You know nothing Jon Snow
  17. 17. Qu’est ce qu’un TMS?
  18. 18. Best definition ever !!! GTM est un système de déploiement JavaScript. Et voilà en une ligne vous avez tout compris :)
  19. 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. 20. Google Tag Manager Ce qu’il vous faut connaître pour aller plus loin dans votre utilisation
  21. 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. 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. 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. 24. Les outils de testing 1. L’interface de testing de GTM 2. GA debugger 3. Tag Assistant
  25. 25. Schéma de déboggage Extrait du dev guide de Phil Pearce
  26. 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. 27. Lorsqu’un DOM est peu détaillé
  28. 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. 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. 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. 31. Comment cela s’utilise? ● Test de la valeur à scraper via console web:
  32. 32. La formation à connaitre pour la console web de Google Chrome http://discover-devtools.codeschool.com/
  33. 33. Création de la (des) variable(s) Rien de plus
  34. 34. Idem dans GA
  35. 35. Libre à vous de les utiliser derrière
  36. 36. Vous testez Pif Paf
  37. 37. Vous créez votre rapport dans GA
  38. 38. Quelques heures plus tard
  39. 39. Les événements personnalisés
  40. 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. 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. 42. Création de l'évènement JavaScript
  43. 43. Création de notre GA event
  44. 44. Notre déclencheur étant
  45. 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. 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. 47. A titre comparatif XML JSON
  48. 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. 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. 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. 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. 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. 53. Qu’apportent les plugins des CMS? Peupler plus facilement le dataLayer:
  54. 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. 55. D’abord GTM, ensuite javascript, et puis jQuery, maintenant du json!!! Tu me prends pour un babo ou quoi Conclusion
  56. 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. 57. Si vous voulez du SEO http://fr.slideshare.net/phildpearce/how-can-a- data-layer-help-my-seo
  58. 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

×