Bruno Guyot
Head of Digital Marketing
FirstPoint Sàrl – Lausanne
Bruno-guyot.com
Firstpoint.ch
Novembre 2016
Mise en place...
Créer un compte Google Tag
ManagerLe guide complet de Google Tag Manager pour Prestashop
Dans ce guide de plus de 8000 mot...
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é...
Créer un compte Google Tag
ManagerPré-requis
Pour pouvoir suivre ce tuto, vous
devez avoir Prestashop 1.6 avec le
module G...
Créer un compte Google Tag
ManagerRapports cross-device c’est quoi et à quoi ça sert ?
Le suivi des personnes à travers to...
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
...
Créer un compte Google Tag
ManagerRapports cross-device c’est quoi et à quoi ça sert ?
Concrètement, vous aurez de
nouveau...
Créer un compte Google Tag
ManagerPrincipes de mise en place
Le principe : Nous allons utiliser le customer Id unique géné...
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...
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 fau...
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éri...
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é...
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’à
enregis...
Créer un compte Google Tag
Manager2ème option : Récupérer l’user-id par le biais du dataLayer
Cette seconde solution va al...
Créer un compte Google Tag
Manager2ème option : Récupérer l’user-id par le biais du dataLayer
Nous allons donc dans /modul...
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é...
Créer un compte Google Tag
Manager2ème option : Récupérer l’user-id par le biais du dataLayer
Par acquis de conscience, un...
Créer un compte Google Tag
ManagerBonus : Profiter du meilleur des 2 mondes
Vous n’êtes pas obligé de choisir l’une ou l’a...
Créer un compte Google Tag
ManagerEnvoyer l’userId à Google Analytics par Google Tag Manager
Maintenant que l’on a l’userI...
Créer un compte Google Tag
ManagerEnvoyer l’userId à Google Analytics par Google Tag Manager
Et puis à des fins de reporti...
Créer un compte Google Tag
ManagerEnvoyer l’userId à Google Analytics par Google Tag Manager
Maintenant, il faut ajouter l...
Créer un compte Google Tag
ManagerEnvoyer l’userId à Google Analytics par Google Tag Manager
Faites ça pour toutes les bal...
Créer un compte Google Tag
ManagerActiver l’userId dans Google Analytics
Une fois que vous avez modifié avec succès toutes...
Créer un compte Google Tag
ManagerActiver l’userId dans Google Analytics
Acceptez les conditions et validez. Ensuite vous ...
Créer un compte Google Tag
ManagerConsidérations importantes
La vue userId ne collecte des données que pour les hits avec ...
Aller plus loin
• Utilisations avancées du Tag Manager
• Formation
• Taggage de votre site
Créer un compte Google Tag
ManagerUtilisations avancées du Tag Manager
Google Tag Manager permet d’aller très très loin au...
Créer un compte Google Tag
ManagerFormation Google Tag Manager et Google Analytics
Je dispense des formations de
niveau dé...
Créer un compte Google Tag
ManagerTaggage de votre site
Vous savez que Google Tag
Manager est l’outil qu’il vous faut
sur ...
Merci pour votre intérêt
Vous avez appris des choses? Partagez !
Prochain SlideShare
Chargement dans…5
×

Mise en place du suivi multi appareil Google Analytics pour Prestashop avec Google Tag Manager

5 634 vues

Publié le

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

Publié dans : Marketing
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Mise en place du suivi multi appareil Google Analytics pour Prestashop avec Google Tag Manager

  1. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 26. Aller plus loin • Utilisations avancées du Tag Manager • Formation • Taggage de votre site
  27. 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. 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. 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. 30. Merci pour votre intérêt Vous avez appris des choses? Partagez !

×