tagger son prestashop avec google tag manager pour le remarketing dynamique facebook

Bruno Guyot

Head of Digital Marketing FirstPoint Sàrl – Lausanne

Bruno-guyot.comFirstpoint.ch

Novembre 2016

Tagger son Prestashop avec Google Tag Manager

pour le remarketing dynamique Facebook

30 étapes pas à pas

En 22 étapes

https://ch.linkedin.com/in/bruno-guyot-firstpoint

https://twitter.com/ChablaisWeb

http://www.firstpoint.ch/

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

http://www.chablais-web/google-tag-manager-ecommerce-prestashop.php


Au sommaire

• Pré-requis• Installer le Pixel Facebook de base• Installer les évènements standards• Définir un séquençage des balises


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





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.

https://business.facebook.com/


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.


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.


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.


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



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.



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.


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.


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.


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/help/952192354843755?helpref=faq_content#addeventcode.

Nous, ceux qui nous intéressent sont : ViewContent, AddToCart et Purchase.

Commençons par ViewContent.

https://www.facebook.com/business/help/952192354843755?helpref=faq_content#addeventcode




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/marketing-api/facebook-pixel/v2.8 et collez le dans votre balise.

https://developers.facebook.com/docs/marketing-api/facebook-pixel/v2.8

https://developers.facebook.com/docs/marketing-api/facebook-pixel/v2.8


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




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.


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



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.



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.


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

https://developers.facebook.com/docs/marketing-api/dynamic-product-ads/product-audiences/v2.8#setuppixel




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.


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.


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.


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.


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.


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 !


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.


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.



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.



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.


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 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é :






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


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


Merci pour votre intérêt

Vous avez appris des choses? Partagez !
