MenuMenu

Tracking Facebook Pixel et CAPI via Google Tag Manager

Vous obtenez une partie de votre acquisition de trafic via des campagnes Meta Ads (ex. Facebook Ads) ? Il est essentiel de mettre en place un pixel de tracking pour suivre vos performances et le comportement des utilisateurs sur votre site. Néanmoins, depuis avril 2021 et les évolution d’iOS, ce type de tracking est moins efficace et demande à être couplé avec une nouvelle technologie de suivi publicitaire : Le Facebook Conversion API (ou CAPI).

Cet article vous guide dans l’implémentation du Facebook Pixel et du Facebook CAPI via Google Tag Manager, en incluant le consentement des visiteurs.

1. Installer le Facebook Pixel

Afin d’installer le Facebook nous utiliserons le Tag Management System le plus populaire du marché : Google Tag Manager. Pourquoi le privilégier par rapport à un codage en dur ou un plugin dédié ? Car GTM vient simplifier la dépose de balise, tout en ajoutant de la transparence sur le tracking en place.

Dans Google Tag Manager, rendez-vous dans Modèle puis importer le template de la galerie : Facebook Pixel.

image_content

A. Installer une balise de suivi des pages vues

Créez votre première balise de page vue. Celle-ci va reporter à Facebook les personnes visitant votre site, sans contrainte d’événement particulier. Grâce à cette balise vous pourrez créer des audiences de retargeting basées sur des visiteurs ainsi que des audiences similaires.

image_content

Comme vous pouvez le voir, une variable {{Event ID}} a été ajoutée, dans la section dédiée dans la partie déroulante More Setting. Cette suite numérique sert en prévision de la configuration du Conversion API, dans le but de ne pas comptabiliser deux fois les événements. Nous aborderons plus tard son fonctionnement dans l’article, mais en attendant vous pouvez l’ajouter en important un nouveau modèle de variable.

image_content

Revenons à notre balise et ajoutons lui un déclencheur.

Si vous utilisez Axeptio comme Consent Management Plateform, vous pouvez déclenchez cet événement sur le declencheur de type “Événement personnalisé” et renseigner “axeptio_activate_facebook_pixel” comme champ :

image_content

B. Installer une balise de suivi des achats

Vous êtes un e-commerce ? Alors rien de plus important que de mesurer le volume et la valeur des achats générés par le biais de vos campagnes.

Configurer cet événement permettra également à l’algorithme de mieux optimiser ses performances et de créer de nouvelles audiences similaires pour toucher des clients potentiels.

Créez une nouvelle balise et sélectionnez l’événement standard “Purchase”. À ce stade, en déclenchant votre balise au moment de l’achat, vous mesureriez le volume d’achat. Sauf que pour établir votre ROAS (retour sur investissement publicitaire), il faut venir mapper des informations complémentaires.

image_content

Facebook définit les paramètres obligatoires pour chaque événement dans sa documentation officielle.

Pour l’événement purchase nous allons donc remonter les champs suivants dans la section Property Name :

  • currency : la devise.
  • value : la valeur TTC de l’achat.
  • content_type : le type de produit, qui peut être définit entre product ou product_group.
  • contents : les informations produits (ce qui corresponds à l’array items dans la nomenclature standard).

En face, dans la section Property Value, vous devez indiquer les variables de dataLayer correspondantes à ces paramètres.

Ensuite nous devons paramètrer le déclenchement de la balise lorsqu’un achat a lieu ET quand l’utilisateur donne son consentement.

Si votre site dispose d’un dataLayer e-commerce sur le modèle de GA4, vous pouvez prendre l’événement personnalisé “purchase”.

image_content

Nous ajoutons ensuite une exception qui viendra bloquer la balise, si l’utilisateur n’a pas donné son accord pour la dépose d’un cookie Facebook.

Dans le champ de l’événement personnalisé, nous allons entrer l’expression régulière “.*” qui signifie tous les événements. Nous ajoutons en condition la variable de cookie “axeptio_authorized_vendors” qui ne doit pas contenir facebook_pixel.

image_content

Cela signifie donc que lorque l’événement purchase a lieu, la balise pourra se déclencher uniquement si le cookie stockant le choix de l’utilisateur contient bien facebook_pixel.

2. Installer le Facebook Conversion API

Maintenant que notre pixel est créé, nous voulons également mettre en place le Facebook Conversion API. Cette manière de tracker se dinstingue du Facebook Pixel de par son fonctionnement. Si le Pixel est un script JS, s’éxécutant dans le navigateur de l’utilisateur, le CAPI est lui configuré côté serveur.

Ces deux façons de traquer les conversions Meta peuvent être utilisées de manière indépendante ou conjointement. Si vous souhaitez associer les deux (ce qui conseille Meta), il faudra ajouter une clé de déduplication. Vous vous rappelez de l’Event ID ? C’est justement son rôle et ce pourquoi nous l’avons ajouté à nos balises.

Afin de réaliser le setup présenté ci-dessous, il vous faut avoir mis en place Google Tag Manager Server-Side et provisionné un serveur de tracking.

Google Tag Manager Server-Side fonctionne en communication avec votre Google Tag Manager “classique”, aussi appelé Client-Side (ce qui signifie côté navigateur). Certaines balises sont aptes à communiquer avec votre serveur de tracking et c’est le cas de celle de Google Analytics 4.

Nous allons donc détailler la méthode utilisant cette balise côté navigateur et son client côté serveur qui receptionnera la requête.

Notez que nous avons rédigé un article permetant de mettre pas à pas la proxyfication côté seveur de Google Analytics, et ainsi le rendre conforme aux yeux de la CNIL.

A. Création de la balise Google Analytics 4 de configuration

Vous devez tout d’abord créer une balise de configuration GA4. Comme expliqué, cette balise va venir communiquer avec votre serveur de tracking. Pour cela, cochez « Envoyer au conteneur de serveur » et rentrez l’URL de votre serveur.

image_content

Vous noterez que la case « Envoyer un événement « Page vue » lors du chargement de cette configuration » doit être décochée. C’est une nouvelle fois lié à la variable Event ID et nous y reviendrons dans la secteur suivante.

En parallèle, si vous souhaitez utiliser Google Analytics 4, configurez une balise d’évènement et donnez comme nom à celui-ci « page_view ».

Afin de transférer, la valeur du cookie de consentement au serveur, nous ajoutons un paramètre x-vendor-consent. Si vous souhaitez en savoir plus à ce sujet, vous pouvez découvrir notre article sur le consentement dans un contexte de tracking server-side (mettre le lien).

image_content

Faites ensuite déclencher cette balise sur toutes les pages.

B. Création de la balise GA4 de pages vues à destination de CAPI

Créons maintenant une seconde balise d’événement page_view à destination uniquement de CAPI. Vous vous demandez peut-être pourquoi ? C’est le moment de vous expliquer le fonctionnement de l’Event ID.

Comme abordé précédemment, l’Event ID sert à dédupliquer deux mêmes événements envoyés d’un côté par le Pixel et de l’autre par le CAPI. L’Event ID est un chiffre aléatoire associé à un indicateur de temporalité au moment du déclénchement de la balise. Cet Event ID change donc à chaque balise déclenché, afin d’être unique. Dans l’objectif de dédupliquer correctement les événements, il faut donc que celle du pixel et celle transmettant la requête au serveur, se déclenchent en même temps !

Lors de la configuration de l’événement PageView de Facebook, via le Pixel nous avions défini l’activation de la balise sur axeptio_activate_facebook_pixel. Il faut alors que la balise à destination du serveur se déclenche également à cette occurrence. Cela n’est bien sûr pas le cas de la balise Configuration Google Analytics 4 et de celle de l’événement page_view dédié à GA4. C’est pourquoi nous allons créer un tag spécifique de page vue, uniquement pour CAPI.

image_content

En plus du paramètre event_id et du paramètre stockant le consentement, nous ajoutons un nouveau champ : x-fb-page_view qui a true comme valeur.

C. Création de la balise GA4 d’achat

En parallèle, nous créons notre tag se déclenchant à chaque achat réalisé. Le nom d’événement doit être purchase et vous devez ajouter les champs x-vendor-consent et event_id.

Cette balise est capable de capturer les différentes variables e-commerce (si le dataLayer est structuré de manière standard). Pour cela cochez « Envoyer des données d’e-commerce » dans Plus de paramètres → E-Commerce.

image_content

Maintenant que la configuration est réalisée sur votre GTM Client-Side, il ne vous reste plus qu’à mettre votre container en production.

D. Création de la balise CAPI

La configuration côté navigateur étant terminée, vous pouvez switcher vers votre container Google Tag Manager Server-Side.

Pour démarrer, rendez-vous dans la section Modèle et importer le template de balise « Facebook Conversion API » conçu par stape-io.

image_content

Créez ensuite un tag à partir de ce modèle et choisissez l’option « Inherit from the client ». Ce tag récupère les informations envoyées au Client GA4 par la balise GA4 de votre GTM Client-Side. Vous n’avez donc pas à redéfinir le nom de l’événement, l’event_id ou encore les paramètres e-commerce.

Vous devez ensuite entrée votre Token CAPI fourni par Facebook, puis votre Facebook Pixel.

image_content

Pour ce qui est du Test Evebt Code, je vous conseille de l’intégrer dans un tableau de conversion, afin que seul vos actions de debug soient prises en compte dans la section Test du Meta Business Manager.

Définissez donc votre Test Event Code uniquement sur le debug mode est sur true et cochez une valeur par défaut vide.

image_content

La balise est configurée, occupons-nous maintenant de son déclencheur. Nous allons en associer deux, une pour l’événement page_view et une autre pour l’événement purchase.

image_content

La première balise est celle de l’événement page_view. On ajoute les conditions suivantes :

  • Client Name = GA4
  • Query String contient x-fb-page_view=true. Cela signifie que la requête contient ce paramètre.
  • Event Name = page_view
  • Event Data - x-vendor-consent contient facebook_pixel. Pour ce point je vous invite une nouvelle fois à vous reporter à l’article dédié sur la gestion du consentement côté serveur.
image_content

Pour ce qui est de la balise d’achat, vous ajouterez les éléments suivants :

  • Client Name = GA4
  • Event Name = purchase. Si vous avez plusieurs événéments, vous pouvez utilisez une expression régulière.
  • Event Data - x-vendor-consent contient facebook_pixel.
image_content

E. Ignorer l’événement dédié au CAPI pour les autres balises

Le Pixel ainsi que le Conversion API sont mis en place. Avant de tester notre configuration dans l’outil dédié de Facebook, il nous reste une action à réaliser dans Google Tag Manager Server-Side.

Si vous passiez votre container en production, chaque page vue serait comptabilisée en double dans Google Analytics 4 (ou tout autre point de terminaison se basant sur les balises/requêtes GA4).

C’est pourquoi nous allons créer un déclencheur spécifique pour les événements “Page Vue” en ajoutant le paramètre Query String ne contient pas x-fb-page_view=true

image_content

F. Tester sa configuration

Dernière étape et non des moindres : le test de votre nouvelle configuration !

Pour cela rendez-vous dans la section associée de compte Meta Business Manager TOUT EN mettant votre container Google Tag Manager Server-Side en mode prévisualisation (vous vous souvenez du Test Event Code qui ne se déclenche que dans ce mode ? :) ).

Visitez une page et effectuez un achat, si les événements se dédoublonnent comme ci-dessous, cela signifie que votre paramètrage fonctionne !

image_content

Conclusion

Facebook pousse les annonceurs à doublement traquer leur site à des fins d’optimisation de leurs campagnes. En appliquant les étapes détaillées dans cet article vous pourrez optimiser votre suivi tout en respectant le consentement des utilisateurs. Vous souhaitez vous faire accompagner dans l’implémentation de votre tracking server-side respectueux du RGPD, n’hésitez pas à contacter les équipes Axeptio.

Tag
Facebook, Capi, Tracking, ServerSide, ClientSide
Problème résolu
Tracking Facebook Pixel et CAPI
Temps de mise en place
2h