🤙

GTM server side + GA4 : Installation et configuration (tutoriel)

Twitter LinkedIn Nos services

GTM server side + GA4 : installation et configuration (tutoriel)

Article publié en avril 2022 par Oussama Chafi

Dans cet article, nous allons voir comment, sur un cas très simple, installer GTM server-side, et l’utiliser pour envoyer des évènements vers GA4

Pour cette démonstration, nous déployons Google Tag Manager server-side et GA4 sur notre site :

1. Contexte

Objectifs

Pour en savoir plus sur Google Tag Manager server-side (pourquoi le mettre en place en particulier), je vous invite à vous rendre sur cette page :

Google Tag Manager Server-side : Introduction et démonstration

Avant de commencer

Pour déployer GTM server-side, vous devrez pouvoir :

  • Créer une propriété (stream) GA4 (non détaillé ici)
  • Avoir des accès de type “administrateur sur un compte Google Tag Manager
  • Avoir accès aux DNS de votre site, afin de pouvoir héberger le tag sur un sous-domaine

Hébergement

En ce qui concerne l’hébergement du conteneur GTM serveur, vous avez plusieurs options :

2. Créer le conteneur GTM server-side

  1. Dans l’interface de Google tag manager, nous allons créer le conteneur Google Tag Manager de type server.

Nous choisissons la configuration manuelle de la partie hébergement, ce qui est fortement conseillé pour un site en production :

image
💡
Nous choisissons la configuration manuelle de la partie hébergement, ce qui est fortement conseillé pour un site en production.
  • Sur GTM —> Aller à “Admin” et copier le “Container Configuration”
image

  1. Sur Addingwell, créer votre compte, et collez le Container Configuration dans le champ “container Config”
image

  • Choisir le nom et le sous domaine. Dans notre cas, ce sera https://tagging.unnest.co

image
  • Puis configurer la partie DNS. C’est simple, mais en règle général, cela nécessite de faire appel à votre hébergeur ou à l’infra. Il s’agit simplement d’une ligne à ajouter dans les enregistrements DNS :
image
  • Une fois cela fait, une vérification manuelle par Addingwell sera faite pour approuver le compte.
image

👉🏻 Le conteneur GTM est maintenant déployé coté Addingwell.

  • Pour terminer la configuration du conteneur GTM, il faut ajouter l’URL du conteneur. Sur GTM —> Admin. Ensuite mettre l’URL choisie sur Addingwell. Dans notre cas c’est https://tagging.unnest.co
image

3. Envoi de données vers Google Analytics.

Principe

Maintenant, nous allons configurer l’envoi des pages vues (la home page uniquement) et la remontée des informations de consentement en utilisant le conteneur server side.

Dans un objectif de test, nous conservons en parallèle notre tracking GA4 “classique”. Cela nous permettra de comparer les données obtenues avec les 2 configurations.

Le schéma suivant qui explique le processus que nous allons mettre en place :

image

💡 La flèche en vert représente le flux de données existant, la flèche jaune celui que nous allons créer

La balise de pages vues

  • Créer une propriété GA4 (ID 2).
  • Créer une balise de pages vue GA4 au niveau du conteneur GTM web.
    • Ajouter l’Id de mesure GA4
    • Cocher “Envoyer au conteneur de serveur” ou “Send to server container”
    • Ajouter l’URL de votre conteneur serveur
    • image

👉🏻 L’option “send to server container” nous permet d’envoyer les données vers notre serveur Google Manager et non pas vers le serveur Google.

  • Sur le conteneur serveur, créer une balise de type GA4 et choisir page vue comme déclencheur.
image

  👉🏻  Le client GA4 existe par défaut sur Google Tag Manager   👉🏻  Le déclencheur page vue existe par défaut sur Google Tag Manager

Attention : il est important de noter que sur cet exemple nous n’effectuons pas un réglage complet, puisque nous ne prenons pas en compte la gestion du consentement.

3. Recette et test

Sur le site web

Sur le site UnNest, nous pouvons constater que le hit de collecte n’est plus envoyé vers Google Analytics directement, mais vers notre domaine https://tagging.unnest.co

image

Cela nous permet de nous situer dans un environnement 1st party, permettant :

  • De contourner l’essentiel des adblockers, qui bloquent parfois les envois de hits vers google analytics
  • D’avoir un cookie serveur first party, qui est donc beaucoup plus durable (en particulier sur Safari) qu’un cookie javascript, et encore plus qu’un cookie tiers (bloqués sur Safari, et en 2023 sur Chrome).

Via les debug view de GTM

Dans un premier temps, nous mettons les deux conteneurs serveur et web en mode preview.

  • Sur Le conteneur web, nous remarquons l’envoi de l’événement GA4 vers notre serveur.
image

  • Et sur notre conteneur Serveur, nous remarquons la réception de la requête depuis le conteneur web. Et l’envoi de la requête vers GA4.
image
  • Ensuite, nous trouverons nos données sur GA4, dans la vue debug ou la vue “temps réel”.
image

Tous les articles concernant GTM Server-Side