Les 10 étapes pour paramétrer l’API de conversion Meta Ads en server-side via GTM

Si vous n’avez pas encore migrer votre tracking Meta Ads vers le server-side et que vous souhaitez en savoir plus sur les avantages et les inconvénients du server-side je vous suggère de lire dans un second temps cet article de blog où j’explique pourquoi migrer son API de conversion Meta en server-side.

Dans cet article de blog nous allons nous focaliser sur l’implémentation de votre API de conversion Meta en server-side. Pour cela vous allez avoir besoin d’un compte GTM avec 2 conteneurs, web et server et d’une propriété GA4. Dans l’ordre voici les étapes :

1. Création du conteneur web
2. Création du conteneur server
3. Installation du dataLayer sur votre boutique Shopify
4. Pourquoi et comment utiliser Addingwell comme infrastructure pour héberger votre GTM server-side ?
5. Paramétrage de toutes les variables côté client
6. Paramétrage de toutes les variables côté server
7. Installation des balises GA4 côté client
8. Installation des balises GA4 côté server et du client
9. Prévisualisation GTM server et client
10. Mise en Prod

Création du conteneur web dans GTM

Dans un premier temps il faut vous rendre sur Google Tag Manager afin de créer votre premier conteneur “web”. Si vous n’avez pas de compte GTM il vous suffit d’en créer un puis de cliquer sur “Créer un compte” :

‍

‍

Donnez un nom à votre compte (vous pouvez mettre “Votre marque - Web”), ajoutez votre site, et sélectionnez la plateforme web, puis cliquez sur Créer.

‍

2. Création du conteneur server

Créez votre conteneur server en cliquant sur les 3 petits points à côté de la roue crantée. Cliquez sur créer un conteneur.

‍

‍

Entrez le nom de votre conteneur server. Vous pouvez mettre “Votre marque - Server” et sélectionnez “Server” comme plateforme cible. Puis cliquez sur Créer en haut à gauche.

‍

Voilà vous avez créé vos 2 conteneurs web et server sur GTM. Nous reviendrons sur GTM après mais avant tout il faut installer le dataLayer sur votre site Shopify.

3. Installation du dataLayer sur votre boutique Shopify

Un dataLayer est une couche de données qui permet de récupérer certaines informations d’un utilisateur sur un navigateur. Il va nous être très utile pour venir chercher les informations du client comme les coordonnées, et surtout les informations e-commerce comme la valeur d’une commande, ou la devise.

Pour installer ce dataLayer sur votre site Shopify je vous conseille d’utiliser l’application Stape.

‍

‍

Une fois installée vous n’aurez simplement qu’à cocher dans l’onglet Data Layer :

Add ecommerce Data Layer events
Add user data to Data Layer events

‍

‍

Vous pouvez laisser décochées toutes les cases de la partie Generate et Webhook :

‍

‍

Nous allons maintenant installer GTM sur le site Shopify. Pour cela il faudra créer votre server sur Addingwell.

4. Pourquoi et comment utiliser Addingwell comme infrastructure pour héberger votre GTM server-side ?

Addingwell est une infrastructure qui permet d’héberger votre tracking GTM côté server. Il va permettre de stocker et renvoyer votre data à Meta Ads. Aujourd’hui si vous placez votre GTM directement dans le code sans passer par Addingwell, les adblockers et ITP seront reconnaître GTM. Addingwell va jouer le rôle du server qui n’est pas détecté par les adblockers et ITP. Ce qui vous permettra d’avoir plus de data.

Il est primordial d’avoir ce genre de plateforme pour faire du server-side. Pour créer votre compte Addingwell, rendez-vous sur leur site. Une fois créé vous pourrez commencer à paramétrer votre infrastructure.

4.1 Paramétrer le conteneur server de GTM sur Addingwell

Il vous faudra aller sur votre conteneur server de GTM et cliquer  l’id GTM que vous trouverez ici :

‍

Copiez ensuite l’id de votre configuration de conteneur. Cochez “provisionner manuellement le serveur de taggage”.

Vous collerez ensuite cet id dans Addingwell :

‍

‍

Cliquez sur Next puis créez votre domaine personnalisé, en ajoutant votre domaine et votre sous domaine. J’ai pour habitude d’utiliser “ssadw” comme sous domaine pour server-side Addingwell, mais vous pouvez l’appeler comme vous le souhaitez.

‍

‍

Une fois réalisé vous n’aurez plus qu’à placer le script GTM dans votre code Shopify.

4.1 Paramétrer le conteneur server sur Shopify

Maintenant, allez dans l’onglet CDN d’Addingwell puis cliquez sur How to setup Google Tag Management Web.

‍

‍

La popup s’ouvre avec le code GTM “customisé”. Vous remarquerez que le sous domaine a été ajouté. N’oubliez pas de remplacer les XXXX comme indiqué ci-dessous par l’id de votre conteneur web (bien faire attention : il faut mettre l’id du conteneur web et pas server ici). Pour trouver l’id de votre conteneur web, il faut vous rendre sur le conteneur web de GTM et vous trouverez l’id en haut à droite (même principe que pour le conteneur server).

‍

‍

Vous venez de faire la première grosse partie du paramétrage server-side. Maintenant nous allons nous focaliser sur la création des variables sur GTM côté client.

‍

5. Paramétrage de toutes les variables côté client

Rendez-vous dans votre conteneur client GTM dans l’onglet variable. Nous allons paramétrer toutes les variables e-commerce, et consommateur. Le but est d’avoir toutes ses variables :

‍

Les variables vont permettre de remonter des informations sur votre consommateur et sur son panier et/ou commande.

Pour créer une nouvelle variable il vous faut cliquer sur Nouvelle > puis sur le crayon modifier :

‍

‍

Vous sélectionnez variable de couche de données :

‍

‍

Puis vous ajoutez une par une toutes les variables. En général je mets le même nom de variable que la variable elle même :

‍

‍

Pour vous donner plus d’indications sur les variables à mettre voici la liste ci-dessous :

‍

‍

Astuce : Pour éviter d’avoir à ajouter toutes les variables une par une dans chaque balise (vous verrez dans les prochaines étapes lors de l’implémentation des balises), nous allons créer une variable Balise Google : paramètres d’événement > et ajouter toutes les variables consommateur dans cette balise Google. Cela permettra d’aller chercher uniquement la balise User Data lors de la création de vos balises. Vous savez maintenant comment ajouter une variable alors vous pouvez juste utiliser la variable User data :

‍

‍

Une fois que toutes les variables de couches de données ont été mises, nous allons ajouter les constantes. C’est à dire l’id de GA4, l’id du pixel facebook, et le token de l’API de conversion meta. Ces constantes seront réutilisés plusieurs fois ce qui évitera de répéter les copier/coller. Et comme son nom l’indique ce sont des éléments qui sont toujours les mêmes.

Pour cela il faut cliquer à nouveau sur Nouvelle puis sur le crayon modifier. Et ajouter Constant :

‍

‍

Ensuite vous pouvez ajouter l’id de votre pixel meta :

‍

‍

Ajoutez une nouvelle variable > constant > ajoutez votre measurement id de GA4, que vous trouverez dans GA4 > Administration > paramètre de la propriété > collecte et modification des données > flux de données :

‍

Copiez l’id de mesure GA4 puis collez-le dans la constant.

Faite de même pour le token de l’API de conversion Meta. Pour trouver votre token d’API de conversion il faut vous rendre dans votre business manager Meta,  dans gestionnaire d’événements, puis sur votre pixel dans l’onglet setting. Descendez jusqu’à trouver “générer un token” cliquez dessus puis copier ce token pour le mettre dans la constante.

‍

Maintenant que toutes les variables côté web ont été mises nous allons faire de même côté server.

6. Paramétrage de toutes les variables côté server et du client GA4

6.1. Paramétrage des variables côté server

Côté server il y a moins de variables à mettre en place. Voici celles que nous allons ajouter :

Il faudra commencer par ajouter les 2 variables intégrées en cliquant sur configurer puis en cochant Client Name et Event Name.

Comme pour le conteneur web nous allons ajouter les constantes Meta API Pixel, Meta API token, GA4 Measurement ID, Currency et Value. Vous savez comment faire, car c’est le même principe que pour le conteneur web.

Nous allons voir pour paramétrer l’event filter, qui permet de filtrer les événements que va remonter l’API de conversion. Pour cela vous devez avoir une variable intégrée appelée “Event Name”.

Cliquez sur Nouvelle dans “Variables définies par l’utilisateur” et ajoutez le type de variable “Tableau de conversion”. Allez chercher la variable Event Name. Ajoutez ensuite les saisies comme si dessous :

‍

‍

6.2. Paramétrage du client GA4 côté server

Dans l’onglet client, cliquez sur Nouvelle puis ajouter le type de client Google Analytics : GA4, appelez-le “GA4”.

‍

‍

Ceci permet de dire à l’API de conversion dès qu’il y a un événement GA4 qui se déclenche tu peux le remonter.

Une fois mis en place, nous allons donc pouvoir ajouter les balises GA4 côté client.

‍

7. Installation des balises GA4 côté client

7.1 Installation des balises GA4

Les balises GA4 sont en fait les événements qui vont se déclencher lorsqu’un utilisateur réalise une action sur votre site. Page vue, vu de produit, ajout au panier, achat, etc… Pour les paramétrer allez sur votre conteneur web dans balise cette fois-ci puis cliquez sur Nouvelle.

Dans la configuration de la balise > crayon modifier > Google Analytics > Google Analytics : Événement GA4.

‍

Donnez lui le nom de GA4 - PageView. Dans ID de mesure allez chercher votre constant GA Measurement ID que nous avons créé (vous comprenez maintenant toute l’utilité de la constante).
Nom de l’événement : page_view
‍Paramètre de l’événement : allez chercher la variable User Data, ou ajoutez manuellement tous les paramètres, email, code postal, city, etc… Tout l’intérêt de créer la variable User Data est de ne pas avoir à recopier toutes les variables manuellement pour toutes les balises que nous allons mettre en place.

Enfin ajoutez le déclencheur qui permet d’activer l’événement PageView. Ici ca sera Toutes les pages.

‍

Concernant la balise Purchase, la seule chose à ajouter par rapport aux autres balises c’est de cocher la case Envoyer des données d’e-commerce > Source de données > DataLayer. Dans le dropdown Plus de paramètres. Ensuite ajoutez votre déclencheur pour l’événement purchase.

‍

‍

Maintenant vous pouvez ajouter toutes les balises ci-dessous de la même manière que la Page View :

‍

Pour le Add To Cart et le Begin Checkout vous pouvez aussi cocher la case Envoyer des données d’e-commerce > Source de données > DataLayer.

7.2 Ajouter les déclencheurs pour chaque balise GA4

Prenons l’exemple de la balise GA4 - Purchase. Cliquez sur la balise GA4 - Purchase puis dans Déclenchement. Vous devrez ajouter un événement personnalisé où le nom de l’événement sera purchase_stape il est très important de respecter la casse, car le nom de l’événement correspond au nom que l’on retrouve dans le DataLayer placé dans Shopify.

Voici le nom de l’événement pour chaque déclencheur :

Nom de la balise = Nom du déclencheur
‍
GA 4 - PageView = All page
GA 4 - ViewItem = view_item_stape
GA 4 - ViewCollection = view_collection_stape
GA 4 - AddToCart = add_to_cart_stape
GA 4 - BeingCheckout = begin_checkout_stape
GA 4 - Purchase = purchase_stape

Voici comment se caractérise un déclencheur :

7.3. Ajouter la configuration GA4

De la même manière que les balises, nous allons ajouter une nouvelle balise côté client, cette fois-ci nous allons prendre la Balise Google comme type de balise. On ajoute le measurement ID de GA4 dans l’id de la balise.

Puis dans paramètres de configuration nous ajouter 2 entrées :

server_container_url = https://ssadw.collectifads.com

‍send_page_view = false

‍

C’est qui va permettre d’envoyer les informations au server Addingwell.

Ensuite pour le déclenchement nous allons choisir All Pages.

Passons au déploiement des balises côté server :

8. Installation des balises GA4 côté server et du client

Voici les 3 balises que nous allons paramétrer dans le container server :

‍

‍

8.1 La balise Addingwell monitoring

Commençons par la première : Addingwell Monitoring. Pour se faire il va falloir vous rendre dans l’onglet Modèle tout en bas à gauche pour ajouter ce modèle de balise. Puis cliquer sur Rechercher dans la galerie.

‍

‍

Recherchez Addingwell et sélectionnez le modèle Addingwell monitoring, ajoutez à l’espace de travail >ajoutez  :

‍

‍

Retournez dans l’onglet balise, faites Nouvelle puis modifiez la configuration de la balise, et ajoutez Addingwell Monitoring :

‍

‍

Pour le paramétrage vous pouvez suivre le screenshot ci-dessous :

‍

‍

Ensuite pour le déclencheur vous pouvez opter pour un déclencheur personnalisé et cocher tous les événements :

‍

‍

8.2 La balise GA4 Client Name GA4

Paramétrons maintenant la balise GA4 Client name GA4. C’est la balise qui va faire la passerelle entre les événements GA4 déclenchés par votre utilisateurs sur le site, et l’envoi vers Addingwell.

Allez dans balise, puis Nouvelle. Ajoutez la balise Google Analytics : GA4. Mettez l’id de mesure GA4.

‍

‍

Pour le déclencheur il faut absolument mettre l’événement personnalisé GA4 comme ci-dessous :

‍

‍

Pour cela ajouter un déclencheur personnalisé > certains événements > client Name Contient GA4.

C’est le client que nous avons paramétré plus tôt.

‍

8.3 La balise META CAPI

Enfin nous allons installer la balise Meta Conversion API en ajoutant une nouvelle balise, puis en sélectionnant Meta Conversion API (si vous ne la trouvez pas, il faut aller dans modèle, ajouter un modèle puis sélectionner Meta Conversion API). Insérez ensuite les variables Meta API token, Meta API Pixel et cochez “Send pixel request”.

‍

‍

Pour le déclencheur, ajoutez le déclencheur personnalisé > certains événements :

Client Name contient GA4
Event Filter contient true

‍

‍

Voilà il semblerait que vous venez d’installer votre conversion API Meta côté server.

Maintenant il faut faire la prévisualisation pour voir si les événements se déclenchent bien.

‍

9. Prévisualisation GTM server et client

Sur les 2 conteneurs ouvrez les prévisualisations en cliquant en haut à droite sur Prévisualiser, ajoutez votre nom domaine.

‍

‍

Naviguez sur votre site pour déclencher tous les événements, vous pouvez même aller jusqu’à l’achat. Vous devriez voir apparaitre dans la partie debug les balises GA4 se déclencher au niveau client et au niveau server (côté server dans l’exemple ci-dessous).

‍

‍

Lorsque tout remonte bien il vous suffit ensuite de faire la mise en prod.

‍

10. Mise en Prod

Vous n’avez plus qu’à mettre en prod tout le travail réalisé en publiant toutes les modifications et pour cela vous devez cliquer sur Envoyer > Publier > Continuer.

‍

‍

Si vous souhaitez migrer votre tracking server-side et que vous avez besoin d'aide vous pouvez réserver un call avec nous. Nous avons déjà réalisé beaucoup de migrations pour nos clients. Alors pourquoi pas vous ?

‍