Acquiers-tu une partie du trafic par le biais de campagnes Meta Ads (par exemple, Facebook Ads) ? La mise en place d'un pixel de suivi pour surveiller tes performances et le comportement des utilisateurs sur votre site est essentielle. Cependant, depuis avril 2021 et les changements d'iOS, ce type de tracking est moins efficace. Il doit être associé à une nouvelle technologie de suivi publicitaire : l'API de conversion Facebook (ou CAPI).
Cet article vous guide dans la mise en œuvre de Facebook Pixel et Facebook CAPI via Google Tag Manager , y compris le consentement des visiteurs.
Installez le pixel Facebook
Pour installer le Facebook Pixel, nous utiliserons le système de gestion de balises le plus populaire du marché : Google Tag Manager. Pourquoi le choisir plutôt que du codage en dur ou un plugin dédié ? Parce que GTM simplifie le déploiement des balises tout en ajoutant de la transparence au suivi en place.
Dans Google Tag Manager, allez dans Templates et importez le template depuis la galerie : Facebook Pixel.
A. Installer une balise de suivi des pages vues
Crée ta balise first-page view. Cette balise signalera à Facebook les personnes qui visitent votre site sans contrainte d'événement spécifique. Avec cette balise, tu peux créer des audiences de reciblage bas ées sur les visiteurs et les audiences lookalike.
Comme vous pouvez le constater, une variable {{Event ID}} a été ajoutée dans la section dédiée du menu déroulant Plus de paramètres. Cette séquence numérique est utilisée en prévision de la configuration de l'API de conversion pour éviter de compter deux fois les événements. Nous aborderons son fonctionnement dans l'article plus tard, mais en attendant, vous pouvez l'ajouter en important un nouveau modèle de variable.
Revenons à notre balise et ajoutons-y un déclencheur.
Si vous utilisez Axeptio en tant que plateforme de gestion du consentement , vous pouvez déclencher cet événement sur le déclencheur "Événement personnalisé" et remplir " axeptio _activate_facebook_pixel" comme champ :
B. Installer une balise de suivi des achats
Êtes-vous une entreprise de commerce électronique ? Alors rien n'est plus important que de mesurer le volume et la valeur des achats générés par vos campagnes.
La mise en place de 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ée un nouveau tag et sélectionne l'événement standard "Achat". À ce stade, tu mesurerais le volume d'achat en déclenchant votre tag au moment de l'achat. Tu dois cartographier des informations supplémentaires pour établir votre ROAS (retour sur investissement publicitaire).
Facebook définit les paramètres obligatoires pour chaque événement dans sa documentation officielle .
Pour l'événement d'achat, nous signalerons donc les champs suivants dans la section Nom de la propriété :
- Devise : la devise.
- Valeur : le montant total de l'achat.
- content_type : le type de produit, qui peut être défini comme product ou product_group.
- Contenu : les informations sur le produit (correspondant au tableau items dans la terminologie standard).
Dans la section Valeur de la propriété, vous devez indiquer le dataLayer variables pour ces paramètres.
Ensuite, nous devons configurer le déclencheur de balise lorsqu'un achat se produit ET lorsque l'utilisateur y consent.
Si votre site possède une couche de données de commerce électronique dans le modèle GA4, tu peux utiliser l'événement personnalisé "achat".
Nous ajoutons ensuite une exception qui bloquera la balise si l'utilisateur n'a pas consenti à ce que Facebook cookie soit abandonné.
Dans le champ d'événement personnalisé, nous allons saisir l'expression régulière " .* ", qui signifie tous les événements. Nous ajoutons la variable "axeptio_authorized_vendors " cookie comme condition, qui ne doit pas contenir " facebook_pixel. "
La balise ne se déclenchera que lorsque l'événement d'achat se produira si l'utilisateur cookie le choix contient facebook_pixel.
Installation de l'API de conversion Facebook
Maintenant que notre Pixel est créé, nous voulons configurer l'API de conversion Facebook. Cette méthode de suivi diffère du Facebook Pixel dans son fonctionnement. Alors que le Pixel est un script JS qui s'exécute dans le navigateur de l'utilisateur, le CAPI est configuré server-side .
Ces deux méthodes de suivi des conversions Meta peuvent être utilisées indépendamment ou ensemble. Ajoutez une clé de déduplication si vous souhaitez les combiner (ce que Meta recommande). Vous souvenez-vous de l'identifiant de l'événement ? C'est précisément son rôle et c'est pourquoi nous l'avons ajouté à nos balises.
Pour configurer comme présenté ci-dessous, vous devez avoir configuré Google Tag Manager Server-Side et provisionné un serveur de suivi.
Google Tag Manager Server-Side communique avec votre Google Tag Manager classique, également connu sous le nom de Client-Side (côté navigateur). Certaines balises peuvent être partagées avec votre serveur de suivi, ce qui est le cas de Google Analytics 4.
Nous allons détailler la méthode qui utilise cette balise côté navigateur et son serveur client-side pour recevoir la demande.
Notez que nous avons écrit un article qui décrit le processus étape par étape pour server-side proxyfication de Google Analytics , le rendant conforme à la réglementation CNIL .
A. Création de la balise de configuration Google Analytics 4
Tout d'abord, tu dois créer une balise de configuration GA4. Comme expliqué, cette balise communiquera avec votre serveur de suivi. Pour cela, coche "Envoyer au conteneur du serveur" et saisis l'URL de votre serveur.
Vous remarquerez que la case "Envoyer un événement 'Page vue' lors du chargement de cette configuration" doit être décochée. Ceci est encore une fois lié à la variable Event ID, et nous y reviendrons dans la section suivante.
En parallèle, si vous souhaitez utiliser Google Analytics 4, configurez une balise d'événement et nommez-la "page_view".
Pour transférer la valeur du consentement cookie au serveur, nous ajoutons un paramètre x-vendor-consent.
Déclenchez ensuite cette balise sur toutes les pages.
B. Création du tag GA4 pour les pages vues pour CAPI
Créons maintenant une deuxième balise d'événement page_view spécifiquement pour CAPI. Vous vous demandez peut-être pourquoi ? C'est le moment d'expliquer le fonctionnement de l'Event ID.
Comme mentionné précédemment, l'Event ID sert à dédupliquer deux événements identiques envoyés par le Pixel et, d'autre part, par le CAPI. L'Event ID est un nombre aléatoire associé à un indicateur de temporalité lorsque la balise est déclenchée. Cet ID d'événement change donc avec chaque balise démarrée pour être unique. Pour bien dédupliquer les événements, il est donc nécessaire à la fois pour le Pixel et pour le server-side balise à déclencher en même temps !
Lors de la configuration de l'événement PageView de Facebook via le Pixel, nous avons défini le déclenchement de la balise sur axeptio _activate_facebook_pixel. Par conséquent, la server-side balise doit également être déclenchée à cette occurrence. Ce n'est pas le cas pour la balise de configuration de Google Analytics 4 et la balise d'événement page_view dédiée à GA4. C'est pourquoi nous ne créerons qu'une balise de vue de page spécifique pour CAPI.
En plus des paramètres de stockage event_id et consent, nous ajoutons un nouveau champ : x-fb-page_view avec une valeur réelle.
C. Création de la balise d'achat GA4
En parallèle, nous créons notre tag qui déclenche chaque achat effectué. Le nom de l'événement doit être « achat » et vous devez ajouter les champs x-vendor-consent et event_id.
Cette balise peut capturer diverses variables de commerce électronique (si le dataLayer est structurée de manière standard). Pour ce faire, cochez "Envoyer les données de commerce électronique" dans Plus de paramètres → E-Commerce.
Maintenant que la configuration est terminée client-side GTM, il ne te reste plus qu'à publier votre conteneur.
D. Création de la balise CAPI
Une fois la configuration côté navigateur terminée, tu peux passer à votre conteneur Google Tag Manager Server-Side .
Tout d'abord, rendez-vous dans la section Template et importez la balise « Facebook Conversion API » teStape-designed by stape-io.
Ensuite, crée une balise à partir de ce modèle et choisis l'option "Hériter du client". Cette balise récupère les informations envoyées au client GA4 par la balise GA4 dans votre GTM client-side. Tu n'as pas besoin de redéfinir les paramètres event name, event_id ou e-commerce.
Tu dois entrer votre jeton CAPI fourni par Facebook, puis votre pixel Facebook.
Pour le Test Event Code, je recommande de l'ajouter à une table de conversion afin que seules vos actions de débogage soient prises en compte dans la section Test du Meta Business Manager.
Définis donc votre code d'événement de test uniquement en mode débogage et réel, et vérifie une valeur par défaut vide.
La balise est configurée ; occupons-nous de son déclencheur. Nous allons associer deux déclencheurs, un pour l'événement page_view et un autre pour l'événement achat.
La première balise concerne l'événement page_view. Nous ajoutons les conditions suivantes :
- Nom du client = GA4
- La chaîne de requête contient x-fb-page_view=true. Cela signifie que la requête inclut ce paramètre.
- Nom de l'événement = page_view
- Données de l'événement - x-vendor-consent contient facebook_pixel. Pour ce point, je t'invite à te référer à l'article dédié à la gestion des consentements server-side.
Pour la balise d'achat, vous ajouterez les éléments suivants :
Nom du client = GA4 Nom de l'événement = achat. Si vous avez plusieurs événements, tu peux utiliser une expression régulière. Données de l'événement - x-vendor-consent contient facebook_pixel.
E. Exclure les événements spécifiques à CAPI pour les autres balises
Les API Pixel et Conversion sont maintenant configurées. Avant de tester notre configuration dans l'outil dédié de Facebook, il nous reste une action à effectuer dans Google Tag Manager Server-Side .
Si tu publiais votre conteneur, chaque page vue serait comptée deux fois dans Google Analytics 4 (ou tout autre point de terminaison basé sur les balises/requêtes GA4).
C'est pourquoi nous devons créer un déclencheur spécifique pour les événements "Page View" en ajoutant la condition Query String does not contains x-fb-page_view=true.
F. Tester votre configuration
Enfin et surtout : testez votre nouvelle configuration !
Pour cela, va dans la section associée du compte Meta Business Manager TOUT EN mettant votre conteneur Google Tag Manager Server-Side en mode prévisualisation (tu te souviens du code d'événement de test qui ne se déclenche que dans ce mode ? :)).
Visitez une page et effectuez un achat ; si les événements sont dédupliqués, comme indiqué ci-dessous, vos paramètres fonctionnent !
Conclusion
Facebook encourage les annonceurs à suivre leurs sites web afin d'optimiser leurs campagnes. En suivant les étapes détaillées dans cet article, tu pourras optimiser votre tracking tout en respectant le consentement des utilisateurs. Si tu souhaites être accompagné dans la mise en place de votre trackingserver-side conforme à la GDPR, n'hésite pas à contacter les équipes de Axeptio .
