Dans ces slides, vous découvrirez étape par étape comment mettre en place le suivi des utilisateurs de votre site à travers tous leurs appareils par le biais de la fonctionnalité User-Id de Google Analytics.
Pour l'exemple, la mise en place est faite sur un site e-commerce Prestashop 1.6 par le biais de Google Tag Manager.
Ces slides font parti d'un guide beaucoup plus large sur Google Tag Manager et Prestashop consultable ici : http://www.chablais-web.fr/google-tag-manager-ecommerce-prestashop.php#user-id-cookie
Introduction à l’analyse de site web avec Google Analytics - 2016
Mise en place du suivi multi appareil Google Analytics pour Prestashop avec Google Tag Manager
1. Bruno Guyot
Head of Digital Marketing
FirstPoint Sàrl – Lausanne
Bruno-guyot.com
Firstpoint.ch
Novembre 2016
Mise en place du suivi
multi-appareil Google
Analytics pour Prestashop
avec Google Tag Manager
En 25 slides
2. Créer un compte Google Tag
ManagerLe guide complet de Google Tag Manager pour Prestashop
Dans ce guide de plus de 8000 mots, vous apprendrez à :
• Paramétrer le suivi du e-commerce amélioré
• Paramétrer le suivi cross device Google Analytics
• Paramétrer le remarketing dynamique Google
• Créer des campagnes remarketing dynamique Google
• Paramétrer le remarketing dynamique Facebook
• Créer des campagnes remarketing dynamique Facebook
Ces slides sont un condensé rapide d’une partie de mon guide complet de l’utilisation
de Google Tag Manager avec Prestashop.
Consultez ce guide ici : http://www.chablais-web/google-tag-manager-ecommerce-
prestashop.php
3. Au sommaire
• Rapports cross-device c’est quoi et à quoi ça sert ?
• Récupérer l’user-id par le biais d’un cookie
• Récupérer l’user-id par le dataLayer
• Bonus : Profiter du meilleur des 2 mondes
• Envoyer l’userId à Google Analytics par GTM
• Activer l’userId dans Google Analytics
4. Créer un compte Google Tag
ManagerPré-requis
Pour pouvoir suivre ce tuto, vous
devez avoir Prestashop 1.6 avec le
module Google Tag Manager
Enhanced Ecommerce (UA) Tracking
correctement paramétré.
Pour le détail pas à pas de
l’installation, suivez mon guide à
l’adresse suivante :
http://www.chablais-web/google-
tag-manager-ecommerce-
prestashop.php
5. Créer un compte Google Tag
ManagerRapports cross-device c’est quoi et à quoi ça sert ?
Le suivi des personnes à travers tous leurs appareils permet de passer de ça :
Un monde qui utilise les cookies
pour comptabiliser les sessions des
visiteurs et ou une personne peut
être 4 visiteurs différents selon
l’appareil sur lequel il surfe.
6. Créer un compte Google Tag
ManagerRapports cross-device c’est quoi et à quoi ça sert ?
A ça !
Un monde ou l’on tracke les
personnes à travers tous leurs
appareils et toutes les sessions.
7. Créer un compte Google Tag
ManagerRapports cross-device c’est quoi et à quoi ça sert ?
Concrètement, vous aurez de
nouveaux rapports qui vous
permettront de répondre à des
questions jusque là sans réponse :
• Par quel canaux et appareils vos
clients vous trouvent-ils ?
• Par quel canaux et appareils vos
clients font leurs commandes?
• Combien d’utilisateurs visitent
votre site avec plusieurs appareils ?
• Quels sont les chemin cross-device les plus utilisés pour convertir ? Etc…
8. Créer un compte Google Tag
ManagerPrincipes de mise en place
Le principe : Nous allons utiliser le customer Id unique généré par Prestashop pour
chaque client, le récupérer par GTM et l’envoyer à Google Analytics.
Nous pouvons faire ça de 2 façons :
• Par un cookie
• Par le dataLayer
Chaque méthode a ses avantages et inconvénients détaillés ci-après.
9. Créer un compte Google Tag
Manager1ère option : Récupérer l’user-id par le biais d’un cookie
Le principe : créer un cookie à chaque page avec l’User-Id quand l’utilisateur est
connecté. Ensuite récupérer l’user-Id dans le cookie par le biais de Google Tag Manager.
Enfin, l’envoyer à Google Analytics.
Avantage : cette méthode vous permet de suivre les utilisateurs à travers leurs
différents appareils même lors de sessions futures non loggées. Effectivement, vous
pouvez paramétrer le cookie pour qu’il dure un bon moment (mettons une année) et si
la personne ne l’a pas supprimé d’ici la, vous pourrez le tracker, même s’il n’est pas
connecté. Et ce sur tous les appareils où il aura le cookie user-id.
Inconvénient : les cookies peuvent être bloqués par le navigateur du visiteur.
10. Créer un compte Google Tag
Manager1ère option : Récupérer l’user-id par le biais d’un cookie
Pour la mise en place, il faut tout d’abord faire un override de la class
Frontcontroller.php (classes/controller/FrontController.php).
On va donc dans /override/classes/controller et on crée un fichier FrontController.php
qui va venir étendre notre frontController original de manière propre. Dedans on met
le code ci-dessus.
11. Créer un compte Google Tag
Manager1ère option : Récupérer l’user-id par le biais d’un cookie
Concrètement, ce code va vérifier s’il existe un customer id Prestashop (autrement dit
est-ce que le client est connecté ?).
Si oui, il va créer un cookie qui s’appellera gtm-userid, qui contiendra l’id client
prestashop de la personne connectée et qui sera valable 300 jours.
Notez que si la personne n’est pas connectée, il ne se passe rien.
12. Créer un compte Google Tag
Manager1ère option : Récupérer l’user-id par le biais d’un cookie
Nous allons
maintenant récupérer cet
user-id dans GTM.
Nous allons donc créer une
nouvelle variable
personnalisée de type cookie
propriétaire et la configurer
comme ci-contre.
13. Créer un compte Google Tag
Manager1ère option : Récupérer l’user-id par le biais d’un cookie
Vous n’avez plus qu’à
enregistrer.
Par acquis de conscience
vous pouvez faire une
prévisualisation sur votre
site pour vérifier que vous
récupérez bien votre
variable.
14. Créer un compte Google Tag
Manager2ème option : Récupérer l’user-id par le biais du dataLayer
Cette seconde solution va aller insérer notre userId (s’il existe) dans le push initial fait
par le module Google Tag Manager Enhanced Ecommerce (UA) Tracking.
Avantage : c’est la solution la plus fiable mais aussi la plus académique.
Inconvénient : moins performant pour tracker les futures visites non loggées.
15. Créer un compte Google Tag
Manager2ème option : Récupérer l’user-id par le biais du dataLayer
Nous allons donc dans /modules/cdc_googletagmanager et nous éditons le fichier
cdc_googletagmanager.php. Faites une recherche pour trouver : private function
generateGtmTag().
Ensuite, insérez les 2 lignes
de code comme ci-contre.
Cela va vérifier s’il existe
un customer id prestashop
(si le client est connecté) et
si oui, l’envoyer dans le
datalayer au moment du
push initial.
16. Créer un compte Google Tag
Manager2ème option : Récupérer l’user-id par le biais du dataLayer
Il ne reste plus qu’à récupérer cette
valeur dans une variable de couche de
données.
Direction GTM => nouvelle variable
définie par l’utilisateur > variable de
couche de données. On l’appelle
userId, on enregistre, et voilà !
17. Créer un compte Google Tag
Manager2ème option : Récupérer l’user-id par le biais du dataLayer
Par acquis de conscience, une nouvelle fois, on va prévisualiser et aller vérifier sur le site
si la variable est bien récupérée :
18. Créer un compte Google Tag
ManagerBonus : Profiter du meilleur des 2 mondes
Vous n’êtes pas obligé de choisir l’une ou l’autre des 2 méthodes. Vous pouvez conjuger
les 2 pour profiter d’une fiabilité maximum mais également de pouvoir suivre ces
mêmes personnes lors de futures sessions non loggées.
Le principe est simplement d’envoyer à
Google Analytics une fonction (plutôt qu’une
valeur fixe). Cette fonction sera une variable
javascript qui aura pour but de soit renvoyer
l’userId dataLayer, soit l’userId du cookie.
La mise en place est détaillée chez Simo
Ahava : http://www.simoahava.com/gtm-
tips/once-userid-always-userid/
19. Créer un compte Google Tag
ManagerEnvoyer l’userId à Google Analytics par Google Tag Manager
Maintenant que l’on a l’userId, peu
importe que vous l’ayez par un
cookie ou par le dataLayer, il va
falloir l’envoyer à Google Analytics.
Pour ce faire, il faut l’envoyer pour
chaque page vue, événement ou
transaction.
Il faut donc l’attacher à chaque
balise Google Analytics grâce aux
champs à définir avec la valeur de
l’userId.
20. Créer un compte Google Tag
ManagerEnvoyer l’userId à Google Analytics par Google Tag Manager
Et puis à des fins de reporting et
afin de pouvoir comparer les
données entre des sessions
loggées et non loggées, nous
allons également envoyé
l’userId en dimension
secondaire à Google Analytics.
Pour ça ,allez dans l’admin GA et
créez une nouvelle dimensions
personnalisée. Mémorisez
l’index.
21. Créer un compte Google Tag
ManagerEnvoyer l’userId à Google Analytics par Google Tag Manager
Maintenant, il faut ajouter l’index et la variable userId en tant que dimension
personnalisée aux balises Google Analytics (en plus du champ à définir donc) :
22. Créer un compte Google Tag
ManagerEnvoyer l’userId à Google Analytics par Google Tag Manager
Faites ça pour toutes les balises Google analytics (l’userId doit être attaché à toutes les
pages vues, évenements, transactions Google Analytics).
Note : Pour contexte, ces balises
ont été créées pour le suivi du
ecommerce amélioré.
Tout est détaillé dans mon guide http://www.chablais-web.fr/google-tag-manager-
ecommerce-prestashop.php. En effet, ces slides ne couvent qu’une petite partie
résumée du guide.
23. Créer un compte Google Tag
ManagerActiver l’userId dans Google Analytics
Une fois que vous avez modifié avec succès toutes ces balises, nous allons maintenant
passer dans Google Analytics pour paramétrer le suivi cross device.
La première étape consiste à
activer la fonctionnalité au niveau
de la propriété.
Donc dans l’admin, vous dépliez
les informations de suivi et cliquez
sur User-Id.
24. Créer un compte Google Tag
ManagerActiver l’userId dans Google Analytics
Acceptez les conditions et validez. Ensuite vous devez choisir si vous souhaitez unifier
les sessions ou non. Je vous conseille de conserver l’option activée.
Concrètement, cette fonctionnalité permet de rattacher les hit d’avant authentification
pour une session avec authentification. Ce qui est plutôt intéressant.
Vous validez. Dernière étape, création de la vue User-Id. Donnez-lui un nom,
paramétrez pays et validez. Voila, c’est terminé !
25. Créer un compte Google Tag
ManagerConsidérations importantes
La vue userId ne collecte des données que pour les hits avec user-id (donc les
personnes qui se sont connectées), ce qui signifie que vous aurez forcément beaucoup
moins de volume que dans votre vue classique.
Mais les informations que vous allez y découvrir valent cher.
Dernier point sur la vie privée. Lorsque vous faites de la publicité ciblée et du suivi
Analytics, vous devez respecter la loi europééenne. Apprenez-ce qu’il faut savoir ici :
https://www.cnil.fr/fr/cookies-traceurs-que-dit-la-loi
26. Aller plus loin
• Utilisations avancées du Tag Manager
• Formation
• Taggage de votre site
27. Créer un compte Google Tag
ManagerUtilisations avancées du Tag Manager
Google Tag Manager permet d’aller très très loin au niveau de ce qui peut être suivi
et/ou extrait sur un site web ou une application mobile. Quelques exemples :
• Remontée dynamique d’éléments nécessaires au remarketing dynamique sur
Facebook et Google
• Mise en place de tracking avancés : clics sur les liens externes, vues de vidéo,
téléchargement de brochures, suivi de conversations tchat, etc…
• Mise en place dynamique d’éléments dans vos pages : balise canonical, Schema
markup par le biais d’un Json-ld dans le header, etc…
Je rédige régulièrement des articles sur le sujet. Suivez-moi pour rester informé :
https://ch.linkedin.com/in/bruno-guyot-firstpoint
https://twitter.com/ChablaisWeb
28. Créer un compte Google Tag
ManagerFormation Google Tag Manager et Google Analytics
Je dispense des formations de
niveau débutant à avancé sur
Google Tag Manager et sur Google
Analytics.
Sur place (dans vos locaux) ou à
distance (session skype +
teamviewer).
29. Créer un compte Google Tag
ManagerTaggage de votre site
Vous savez que Google Tag
Manager est l’outil qu’il vous faut
sur votre site mais vous n’avez pas
envie ou pas le temps de le faire
vous-même ?
Je m’en occupe pour vous
30. Merci pour votre intérêt
Vous avez appris des choses? Partagez !