Bruno Guyot
Head of Digital Marketing
FirstPoint Sàrl – Lausanne
Bruno-guyot.com
Firstpoint.ch
Novembre 2016
Tagger son Pr...
Créer un compte Google Tag
ManagerLe guide complet de Google Tag Manager pour Prestashop
Dans ce guide de plus de 6000 mot...
Au sommaire
• Pré-requis
• Installer le Pixel Facebook de base
• Installer les évènements standards
• Définir un séquençag...
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
ManagerObtenir le pixel Facebook de base
1. Rendez-vous dans votre Business Manager : https://b...
Créer un compte Google Tag
ManagerObtenir le pixel Facebook de base
3.Assurez-vous d’être sur le bon
compte publicitaire e...
Créer un compte Google Tag
ManagerCréer une balise avec le pixel de base
4. Rendez-vous dans Google Tag
Manager.
Créez une...
Créer un compte Google Tag
ManagerCompléter le pixel de base avec les évènements standards
Maintenant, nous allons ajouter...
Créer un compte Google Tag
ManagerRécupérer les variables dynamiques dans le dataLayer
D’après Facebook, nous avons besoin...
Créer un compte Google Tag
ManagerRécupérer les variables dynamiques dans le dataLayer
Regardons ce que l’on a dans le
Dat...
Créer un compte Google Tag
ManagerRécupérer les variables dynamiques dans le dataLayer
6. Déplier les objets. Bonne nouvel...
Créer un compte Google Tag
ManagerCréer les variables de couche de données nécessaires aux évènements
7. Retournez dans Go...
Créer un compte Google Tag
ManagerCréer les variables de couche de données nécessaires aux évènements
8. Il faut maintenan...
Créer un compte Google Tag
ManagerCréer la balise ViewContent
Vous trouverez le code des
événements standards ici :
https:...
Créer un compte Google Tag
ManagerCréer la balise ViewContent avec les variables de couche de données
9. Retournons dans G...
Créer un compte Google Tag
ManagerCréer la balise ViewContent avec les variables de couche de données
10. Remplacez les él...
Créer un compte Google Tag
ManagerCréer une déclencheur pour la balise ViewContent
Tout ce qu’il reste à faire maintenant
...
Créer un compte Google Tag
ManagerCréer une condition de déclenchement avec PageCategory
Nous ne voulons pas que la balise...
Créer un compte Google Tag
ManagerCréer une condition de déclenchement avec PageCategory
Donc dans la première case de
con...
Créer un compte Google Tag
ManagerCréer une condition de déclenchement avec PageCategory
13. Vous n’avez plus qu’à définir...
Créer un compte Google Tag
ManagerCréer une balise pour l’évènement addToCart
Créons maintenant la 2ème balise. Celle
à dé...
Créer un compte Google Tag
ManagerCréer une balise pour l’évènement addToCart
Enrichissez-la avec les
paramètres facultati...
Créer un compte Google Tag
ManagerCréer un déclencheur pour la balise d’évènement addToCart
Ensuite nous allons paramétrer...
Créer un compte Google Tag
ManagerCréer un déclencheur pour la balise d’évènement addToCart
16. Créez un nouveau déclenche...
Créer un compte Google Tag
ManagerCréer une balise pour l’évènement Purchase
17. De nouveau, créez une
nouvelle balise HTM...
Créer un compte Google Tag
ManagerConfigurer le déclenchement de la balise Purchase
18. Une nouvelle fois, nous allons cré...
Créer un compte Google Tag
ManagerPrévisualiser, débugger et publier son conteneur
20. Et voilà. Vous n’avez plus qu’à pub...
Créer un compte Google Tag
ManagerVérifier les évènements au niveau du Pixel
Un bon moyen de vérifier que cela fonctionne ...
Créer un compte Google Tag
ManagerParamétrer le séquençage des balises Facebook entre elles
Un dernier point important.
Dé...
Créer un compte Google Tag
ManagerParamétrer le séquençage des balises Facebook entre elles
On va donc prendre nos 3 balis...
Créer un compte Google Tag
ManagerParamétrer le séquençage des balises Facebook entre elles
Et on va définir que l’on veut...
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
×

Tagger son Prestashop avec Google Tag Manager pour le remarketing dynamique Facebook

2 824 vues

Publié le

Dans ces slides, vous apprendrez étapes par étapes comment tagger votre site e-commerce Prestashop avec Google Tag Manager afin de pouvoir utiliser le remarketing dynamique sur Facebook pour vos produits : les dynamic Product Ads.

Ce guide est un condensé d’une partie de mon guide complet de l’utilisation de Google Tag Manager avec Prestashop que vous pouvez trouver ici : http://www.chablais-web/google-tag-manager-ecommerce-prestashop.php

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

Aucun téléchargement
Vues
Nombre de vues
2 824
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2 578
Actions
Partages
0
Téléchargements
9
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Tagger son Prestashop avec Google Tag Manager pour le remarketing dynamique Facebook

  1. 1. Bruno Guyot Head of Digital Marketing FirstPoint Sàrl – Lausanne Bruno-guyot.com Firstpoint.ch Novembre 2016 Tagger son Prestashop avec Google Tag Manager pour le remarketing dynamique Facebook 30 étapes pas à pas En 22 étapes
  2. 2. Créer un compte Google Tag ManagerLe guide complet de Google Tag Manager pour Prestashop Dans ce guide de plus de 6000 mots, vous apprendrez à : • Paramétrer le suivi du e-commerce amélioré • 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é 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 • Pré-requis • Installer le Pixel Facebook de base • Installer les évènements standards • Définir un séquençage des balises
  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 ManagerObtenir le pixel Facebook de base 1. Rendez-vous dans votre Business Manager : https://business.facebook.com 2. Déployez le menu et cliquez sur Pixels.
  6. 6. Créer un compte Google Tag ManagerObtenir le pixel Facebook de base 3.Assurez-vous d’être sur le bon compte publicitaire et cliquez sur le Bouton Actions. Créez votre pixel ou affichez son code (si déjà créé). Copiez le code donné par Facebook, nous allons aller le mettre dans une balise GTM.
  7. 7. Créer un compte Google Tag ManagerCréer une balise avec le pixel de base 4. Rendez-vous dans Google Tag Manager. Créez une nouvelle balise de type HTML personnalisé. Appelez-la « Facebook – Pixel de base » et collez le code de votre Pixel. Enregistrez et choisissez un déclencheur de type All Pages. Votre pixel de base est maintenant présent sur toutes vos pages.
  8. 8. Créer un compte Google Tag ManagerCompléter le pixel de base avec les évènements standards Maintenant, nous allons ajouter de nouvelles balises qui visent à compléter ce suivi de base en fonction de comportements du visiteur : a-t-il vu un produit ? l’a-t-il ajouté au panier? l’a-t-il acheté ? Ces ajouts sont ce que Facebook appelle des événements standards. Le « hic » c’est qu’en plus d’indiquer à Facebook un événement (produit vu, produit ajouté au panier, produit acheté), il va aussi falloir lui indiquer de quel(s) produit(s) l’on parle. Il va donc falloir lui envoyer les paramètres dynamiquement. Attention : nous allons monter d’un cran au niveau technique. Soyez attentif. 
  9. 9. Créer un compte Google Tag ManagerRécupérer les variables dynamiques dans le dataLayer D’après Facebook, nous avons besoin de : • L’ID produit (attention, doit correspondre à l’ID de votre flux produit) => content_ids • Son prix => value • Sa catégorie => content_category • Sa devise => currency • La phase du tunnel (page produit, panier ou achat) => content_name
  10. 10. Créer un compte Google Tag ManagerRécupérer les variables dynamiques dans le dataLayer Regardons ce que l’on a dans le DataLayer. 5. Sur une fiche produit, ouvrez l’inspecteur Chrome en inspectant un élément au hasard. Cliquez ensuite sur l’onglet Console. De là, tapez dataLayer puis tapez sur entrée. Vous allez obtenir le contenu actuel de votre dataLayer.
  11. 11. Créer un compte Google Tag ManagerRécupérer les variables dynamiques dans le dataLayer 6. Déplier les objets. Bonne nouvelle. Le DataLayer contient les infos que nous voulons. Nous allons donc pouvoir créer des variables de couche de données pour récupérer ces informations et nous pourrons ensuite nous en servir dans les balises Facebook.
  12. 12. Créer un compte Google Tag ManagerCréer les variables de couche de données nécessaires aux évènements 7. Retournez dans Google Tag Manager. Cliquez sur Variables puis Nouvelle. Commençons par la 1ère, currencyCode. Ce sera une variable de type couche de données.
  13. 13. Créer un compte Google Tag ManagerCréer les variables de couche de données nécessaires aux évènements 8. Il faut maintenant faire la même chose pour category, id et price. Maintenant que toutes les infos qui nous intéressaient sont récupérées dans des variables, nous allons pouvoir définir nos balises Facebook additionnelles.
  14. 14. Créer un compte Google Tag ManagerCréer la balise ViewContent Vous trouverez le code des événements standards ici : https://www.facebook.com/business/h elp/952192354843755?helpref=faq_co ntent#addeventcode. Nous, ceux qui nous intéressent sont : ViewContent, AddToCart et Purchase. Commençons par ViewContent.
  15. 15. Créer un compte Google Tag ManagerCréer la balise ViewContent avec les variables de couche de données 9. Retournons dans GTM et créons une nouvelle balise HTML personnalisée. Copiez le code de l’évènement ViewContent ici : https://developers.facebook.com/docs/m arketing-api/facebook-pixel/v2.8 et collez le dans votre balise.
  16. 16. Créer un compte Google Tag ManagerCréer la balise ViewContent avec les variables de couche de données 10. Remplacez les éléments notés en exemple par les variables de couches de données créées précédemment. Pour une explication détaillée de la syntaxe et de chacune des lignes de ce code, n’hésitez pas à vous reportez à l’article original ici : http://www.chablais- web/google-tag-manager-ecommerce- prestashop.php
  17. 17. Créer un compte Google Tag ManagerCréer une déclencheur pour la balise ViewContent Tout ce qu’il reste à faire maintenant c’est de définir un déclencheur. Sur quelles pages veut-on que cette balise se déclenche ? Evidemment, dès qu’un visiteur voit une fiche produit. 11. Créez un nouveau déclencheur « vue de fiche produit » . Il sera de type page vue.
  18. 18. Créer un compte Google Tag ManagerCréer une condition de déclenchement avec PageCategory Nous ne voulons pas que la balise se déclenche sur toutes les pages. Cliquez donc sur certaines pages vues. Enfin, il va falloir définir une condition. Nous allons nous baser sur la variable PageCategory que nous avions vu un peu plus tôt dans le Datalayer pour définir la condition. (Explication détaillée du pourquoi dans l’article original).
  19. 19. Créer un compte Google Tag ManagerCréer une condition de déclenchement avec PageCategory Donc dans la première case de condition, faites défiler jusqu’en bas pour trouver « nouvelle variable ». 12. Créez une nouvelle variable de couche de données « pageCategory ». Enregistrez-la et retournez à votre condition.
  20. 20. Créer un compte Google Tag ManagerCréer une condition de déclenchement avec PageCategory 13. Vous n’avez plus qu’à définir que vous souhaitez un déclenchement lorsque pageCategory est égal à product. 14. Enregistrez. Nous avons terminé avec la première balise additionnelle de Facebook.
  21. 21. Créer un compte Google Tag ManagerCréer une balise pour l’évènement addToCart Créons maintenant la 2ème balise. Celle à déclencher au moment ou les personnes mettent un produit au panier. 15. Dans GTM, cliquez sur Nouvelle balise. Appelez-la « Facebook – Pixel – addToCart » . A l’intérieur, collez le code de l’évènement AddToCart trouvé ici : https://developers.facebook.com/docs/ marketing-api/dynamic-product- ads/product-audiences/v2.8#setuppixel
  22. 22. Créer un compte Google Tag ManagerCréer une balise pour l’évènement addToCart Enrichissez-la avec les paramètres facultatifs pour lesquels nous avons créer des variables. Vous remarquez que c’est le même code que la balise viewContent si ce n’est que viewContent a été remplacé par AddToCart. Sinon c’est exactement pareil.
  23. 23. Créer un compte Google Tag ManagerCréer un déclencheur pour la balise d’évènement addToCart Ensuite nous allons paramétrer le déclencheur. Nous suivons le même raisonnement que précédemment. La différence c’est que lorsque l’on est sur la page panier, pageCategory est égal à order.
  24. 24. Créer un compte Google Tag ManagerCréer un déclencheur pour la balise d’évènement addToCart 16. Créez un nouveau déclencheur « Vue de panier » et qui aura pour condition pageCategory est égal à order. Maintenant passons à la dernière balise, celle qui correspond à l’achat.
  25. 25. Créer un compte Google Tag ManagerCréer une balise pour l’évènement Purchase 17. De nouveau, créez une nouvelle balise HTML personnalisée « Facebook – Pixel – Purchase ». A l’intérieur, collez le code de l’évènement Purchase. Enrichissez-la avec les paramètres facultatifs pour lesquels nous avons créer des variables.
  26. 26. Créer un compte Google Tag ManagerConfigurer le déclenchement de la balise Purchase 18. Une nouvelle fois, nous allons créer un déclencheur en fonction de la valeur de PageCategory mais cette fois sur la page de confirmation de commande. 19. Finalisez votre déclencheur pour PageCategory égal à orderconfirmation et enregistrez.
  27. 27. Créer un compte Google Tag ManagerPrévisualiser, débugger et publier son conteneur 20. Et voilà. Vous n’avez plus qu’à publier votre conteneur. Prévisualisez avant afin de vérifier si : • La balise du pixel de base se déclenche bien sur toutes les pages? • La balise ViewContent se déclenche lorsque l’on visite une fiche produit? • La balise addToCart se déclenche lorsque l’on consulte le panier ? • La balise Purchase se déclenche lorsque l’on a validé une commande ? Tout est bon ? Publiez !
  28. 28. Créer un compte Google Tag ManagerVérifier les évènements au niveau du Pixel Un bon moyen de vérifier que cela fonctionne c’est de regarder votre page pixel au bout de quelques minutes (ou quelques heures, selon votre trafic). Théoriquement, vous devriez avoir quelque chose comme ci-dessus.
  29. 29. Créer un compte Google Tag ManagerParamétrer le séquençage des balises Facebook entre elles Un dernier point important. Désormais, GTM vous permet de définir l’ordre dans lequel vos balises doivent se déclencher. Et cela tombe bien puisque nos balises d’évènements ne doivent être déclenchées avant le pixel de base. On ne le veut pas parce que si c’était le cas, ça ne fonctionnerait pas, tout simplement.
  30. 30. Créer un compte Google Tag ManagerParamétrer le séquençage des balises Facebook entre elles On va donc prendre nos 3 balises les unes après les autres et les paramétrer de sorte à ce qu’elles ne se déclenchent que si la balise Pixel de Base a déjà été déclenchée. 21. Pour cela, on va dans la balise, disons ViewContent. On déplie les paramètres avancés puis le séquençage des balises.
  31. 31. Créer un compte Google Tag ManagerParamétrer le séquençage des balises Facebook entre elles Et on va définir que l’on veut que l’on veut déclencher une balise avant le déclenchement de celle- ci, en l’occurrence la balise du suivi de base. Et on peut même aller plus loin en disant que si la balise du Pixel de base n’est pas déclenchée, on ne déclenche pas celle-là. 22. Vous n’avez plus qu’à faire de même pour les 2 autres balises d’évènement.
  32. 32. Aller plus loin • Utilisations avancées du Tag Manager • Formation • Taggage de votre site
  33. 33. 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
  34. 34. 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).
  35. 35. 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 
  36. 36. Merci pour votre intérêt Vous avez appris des choses? Partagez !

×