Server-Side Tracking GA4 : Tutoriel Pas à Pas pour Débutants avec stape.io (2024)

Introduction : 

Si vous êtes ici, c’est que vous vous intéressez de près au tracking côté serveur, et vous avez bien raison !

Si vous êtes certain de comprendre les enjeux de ce type de tracking, vous pouvez directement vous rendre à la mise en place du tracking côté serveur dans cet article. Sinon, je vais commencer par un rappel de ce qu’est le Server Side Tracking avec ses avantages et ses inconvénients ainsi qu’une présentation des avantages de stape.io.

Dans cet article de blog, je vais me concentrer sur la mise en place d’un tracking côté serveur de base avec le suivi d’un événement page_view dans GA4 et pour se faire, nous allons utiliser Stape.io.

Pour finir, je vais partir du principe que vous avez déjà une propriété GA4 et un conteneur GTM web.

Je vais donc vous montrer comment installer un conteneur sGTM (serveur), un serveur stape.io et comment envoyer les données de votre site Internet à GA4 en passant par un serveur.

Pour finir, je précise que je rédige cet article en Août 2024, il est possible que Google ou Stape.io fasse évoluer leur process et UX. Si vous ne retrouvez pas les mêmes captures d’écran que dans cet article, merci de me pardonner. L’essentiel est que vous comprenez l’idée générale de la méthode.

Qu’est-ce que le Server Side Tracking (suivi côté serveur) ?

Le suivi côté serveur, ou server-side tracking, est une méthode de collecte et de traitement des données analytiques où les informations sont envoyées directement à un serveur avant d’être transmises à des outils d’analyse comme Google Analytics.

Contrairement au suivi côté client, où les données sont collectées via le navigateur de l’utilisateur, le suivi côté serveur offre un contrôle accru sur les données collectées et transmises.

Définition et importance du suivi côté serveur

Le suivi côté serveur consiste à intercepter les données de l’utilisateur sur le serveur web avant qu’elles n’atteignent les plateformes d’analyse (GA4, Facebook, Tiktok…). Cela permet aux entreprises de gérer les données de manière plus sécurisée et de s’assurer que seules les informations pertinentes sont partagées avec des tiers. 

Cette approche est particulièrement importante dans le contexte actuel où la protection des données et la conformité aux réglementations, telles que le RGPD, sont cruciales.

Avantages par rapport au suivi côté client

  • Sécurité et confidentialité accrues : En traitant les données sur le serveur, vous pouvez mieux contrôler quelles informations sont partagées avec des outils tiers, réduisant ainsi les risques de fuite de données sensibles.
  • Fiabilité des données : Le suivi côté serveur est moins sujet aux blocages causés par les extensions de navigateur ou les paramètres de confidentialité des utilisateurs, ce qui garantit une collecte de données plus complète et précise.
  • Performance améliorée : En déchargeant le travail de suivi du navigateur vers le serveur, le temps de chargement des pages peut être amélioré, offrant une meilleure expérience utilisateur.
  • Flexibilité dans le traitement des données : Les entreprises peuvent enrichir les données collectées avec des informations supplémentaires disponibles sur le serveur, permettant des analyses plus approfondies et personnalisées.

Principe de fonctionnement d’un tracking côté serveur

Google Tag Manager (GTM) navigateur

GTM est un outil de gestion des balises qui permet de déployer et de gérer facilement des balises de suivi sur un site web sans modifier directement le code du site. Traditionnellement, GTM fonctionne côté client, ce qui signifie que les balises sont exécutées dans le navigateur de l’utilisateur. Cela permet une installation facile et un accès direct aux données, mais peut ralentir le chargement des pages et est vulnérable aux bloqueurs de publicités et aux restrictions de suivi.

Google Tag Manager (sGTM) serveur

sGTM déplace le traitement des balises du client vers le serveur. Dans ce modèle, les requêtes de suivi sont d’abord envoyées à un serveur cloud (tel que Google Cloud) mais dans notre cas, ce sera stape.io, qui traite ensuite ces requêtes avant de les transmettre à des services tiers comme Google Analytics. Ce processus offre plusieurs avantages :

  • Vitesse améliorée : Réduit le nombre de scripts exécutés côté client, accélérant ainsi le chargement des pages.
  • Protection des données : Améliore la sécurité des données en limitant l’accès direct aux scripts tiers.
  • Résistance aux bloqueurs de publicités : Les technologies de suivi sont moins susceptibles d’être bloquées.

Stape.io

Stape.io est une plateforme d’hébergement pour sGTM qui simplifie le processus de configuration et de gestion du suivi côté serveur. Elle offre une solution économique et facile à mettre en œuvre pour les entreprises souhaitant passer au suivi côté serveur. Stape.io permet de configurer un hébergement de serveur GTM en un clic et propose des solutions automatisées pour la gestion des balises basées sur le serveur.

Rôle du Client dans sGTM

Dans le contexte de sGTM, le « client » fait référence à une composante logicielle qui reçoit, analyse et répond aux requêtes HTTP. Par exemple, un client GA4 dans sGTM acceptera les requêtes HTTP envoyées par une balise GA4 dans votre conteneur GTM Web. Les données sont ensuite traitées et envoyées au point de terminaison requis par le fournisseur de services (comme Google Analytics).

En résumé, la combinaison de GTM, sGTM, et Stape.io offre une solution robuste pour le suivi des données, en améliorant la vitesse de chargement des sites, en renforçant la sécurité des données, et en offrant une meilleure résistance aux technologies de blocage de publicités.

Pourquoi choisir Stape.io pour le Server Side Tracking ?

Présentation rapide de Stape.io

Stape.io est une plateforme spécialisée dans la mise en place et la gestion du Server Side Tracking. Conçue pour simplifier les tâches complexes liées à l’infrastructure de suivi serveur, Stape.io offre une solution clé en main qui permet aux entreprises de collecter des données plus précises et fiables tout en réduisant la dépendance aux cookies et aux scripts de suivi traditionnels.

L’une des principales forces de Stape.io réside dans sa facilité d’intégration avec Google Tag Manager (GTM) et Google Analytics 4 (GA4). Avec une interface conviviale et des outils prêts à l’emploi, Stape.io permet même aux utilisateurs sans compétences techniques avancées de configurer un environnement de suivi serveur performant. Que vous soyez une petite entreprise ou une grande organisation, Stape.io propose des solutions adaptées à vos besoins, allant des plans gratuits aux options premium avec des fonctionnalités avancées.

Avantages de l’utilisation de Stape.io pour le suivi serveur

1. Simplification de la mise en place :
L’un des principaux avantages de Stape.io est la simplification du processus de mise en place du Server Side Tracking. Grâce à des tutoriels guidés et une documentation complète, vous pouvez rapidement déployer un conteneur serveur sans avoir à gérer des configurations serveur complexes. Cela permet de gagner du temps et de réduire les erreurs potentielles.

2. Performance améliorée des données :
Le suivi côté serveur via Stape.io permet de contourner les limitations des navigateurs modernes, comme le blocage des cookies tiers et les restrictions liées aux bloqueurs de publicités. En envoyant les données directement à partir du serveur, vous obtenez des informations plus précises et moins sujettes aux interférences, améliorant ainsi la qualité de vos analyses dans GA4.

3. Meilleure sécurité et conformité :
Stape.io offre des options pour gérer les données de manière plus sécurisée, ce qui est crucial dans un contexte de renforcement des réglementations sur la vie privée, comme le RGPD. Le Server Side Tracking permet de mieux contrôler les données sensibles, en évitant de les exposer aux scripts côté client, ce qui réduit les risques de violations de données.

4. Flexibilité et personnalisation :
Avec Stape.io, vous avez la possibilité de personnaliser vos événements et les données collectées selon vos besoins spécifiques. Que vous souhaitiez suivre des interactions utilisateur complexes ou des conversions spécifiques, la plateforme vous permet de configurer des événements sur mesure, optimisés pour GA4.

5. Intégration fluide avec l’écosystème Google :
Stape.io est conçu pour s’intégrer parfaitement avec Google Tag Manager et Google Analytics 4. Cette intégration fluide vous permet de centraliser vos efforts de suivi et d’analyse, tout en bénéficiant des puissants outils d’analyse de Google, le tout sans complexité supplémentaire.

6. Support et communauté :
Stape.io dispose d’une communauté active et d’un support technique réactif, prêts à vous assister en cas de problème. De plus, la plateforme propose régulièrement des mises à jour et des améliorations basées sur les retours des utilisateurs, garantissant que vous bénéficiez toujours des dernières avancées en matière de suivi serveur.

Maintenant que nous avons fait un rappel des grands principes sur tracking côté serveur, plongeons dans la mise en place pas à pas.

Création d’un conteneur sGTM serveur

Partant du principe que vous avez déjà un conteneur GTM côté navigateur, rendez vous sur ce dernier puis allez dans “Admin”.

Conteneur GTM côté client

Dans Admin, cliquez sur le bouton bleu + en haut à droite.

Écran admin du conteneur GTM client

Cela va vous permettre de créer un nouveau conteneur. Nommer votre conteneur par quelque chose du type : le nom de votre site Internet + serveur pour pouvoir faire la différence entre le conteneur serveur et le conteneur web puis sélectionnez Server.

Enfin cliquez sur Create.

écran d'admin gtm côté client pour créer un nouveau container

Une pop up qui s’appelle Install Google Tag Manager va s’ouvrir. 

pop up pour choisir la façon d'installer Google Tag Manager côté serveur

Vous aurez deux options : 

  • Automatically provision tagging server ( cette option est pour Google Cloud Plateforme. Nous ne prenons pas cette option. Je ferai certainement un autre tuto pour cela )
  • Manually provision tagging server. Choisissez cette option. Cela vous montrera un “Config ID”. Copier le, nous en aurons besoin plus tard.

Vous pouvez fermer cette pop up. Vous pourrez y revenir à tout moment en cliquant sur votre identifiant de conteneur “GTM-XXXXXXXXX”.

Pour finir, vous devez vous assurer d’avoir un client GA4 de prêt dans votre conteneur. J’ai abordé un peu plus haut dans cet article ce qu’est un client dans sGTM. Dans sGTM, un client à la charge de recevoir les requêtes.

Rendez-vous dans la colonne de gauche et cliquer sur clients. (CF image ci-dessous). Normalement, vous devriez déjà avoir un client GA4.

un client GA4 dans un container sGTM

Si ce n’est pas le cas, vous pouvez cliquer sur “New” puis sur “Choose a client type to begin setup” et choisissez Google Analytics: GA4(web). C’est tout, à ce stade, vous n’avez pas d’autre paramètres à modifier dans ce client GA’. Nommez le puis enregistré.

Ajout d'un client dans un container sGTM
Client Google Analytics GA4 dans un container sGTM

Création d’un compte stape.io

Créez-vous un compte stape.io, je ne vous montre rien à ce stade, il n’y a rien de compliqué.

Une fois votre compte créé cliquez sur “Create container”.

Bouton de création d'un container dans stape.io

A cette étape vous devrez fournir 3 informations :

  • Nommez votre conteneur (le nom de votre site Internet)
  • Dans Container configuration coller le Container Config que vous avez copié dans l’étape de création de votre sGTM. Vous pouvez le retrouvez en cliquant sur votre ID de conteneur sGTM
  • Enfin choisissez un Server Location. Je vous conseille de prendre une région proche de la votre. Je suis en France, donc je choisi EU West (Belgium)
Création d'un container stape.io

Vous pouvez valider en cliquant sur “Create container“.

Vous serez alors redirigé vers une page qui vous demande de choisir votre forfait. Pour cette installation de base, je vous recommande de choisir le forfait Free. Ce forfait sera largement suffisant pour la mise en place et nos premiers tests. Il vous donne accès 10 000 requêtes / mois et ne vous donnera pas accès à toutes les options d’optimisation pour des “Powers-up” supplémentaires, mais à ce stade nous n’en avons pas besoin.

Normalement vous devriez arriver sur ce type de page.

Voilà, votre serveur est prêt, mais nous n’avons pas tout à fait fini. 

Il vous reste une dernière chose à faire pour que votre installation soit propre : créer un domaine personnalisé ou “Custom domaine”. 

A ce stade, l’url de votre serveur est quelque chose comme https://hdgetrf.euk.stape.io et nous voulon quelque chose comme https://data.votre-nom-de-domaine.fr 

En effet, la création d’un domaine personnalisé est FORTEMENT recommandé pour plusieurs raisons liées à l’efficacité et à la précision du suivi des données :

  1. Cookies propriétaires : L’utilisation d’un domaine personnalisé permet de configurer des cookies propriétaires au lieu de cookies tiers. Les cookies propriétaires ont une durée de vie plus longue, pouvant aller jusqu’à deux ans, par rapport aux cookies tiers qui sont souvent limités à sept jours dans des navigateurs avec des fonctionnalités de prévention du suivi intelligent, comme Safari et Firefox.
  2. Amélioration de la confidentialité et du suivi : En utilisant un domaine personnalisé, les scripts de suivi tels que ceux de Google Tag Manager et Google Analytics peuvent être rendus invisibles pour les bloqueurs de publicités. Cela améliore la précision des données collectées et réduit le risque que les scripts soient bloqués.
  3. Performance du site : L’hébergement des scripts sur un domaine personnalisé peut améliorer la vitesse de chargement des pages, car les fichiers JavaScript peuvent être servis plus rapidement à partir d’un serveur proche du visiteur du site. Cela peut également avoir un impact positif sur le classement organique du site.
  4. Sécurité et contrôle : En déplaçant les pixels espions tiers vers le serveur cloud, le suivi côté serveur offre un contrôle supplémentaire sur la confidentialité des données et permet de collecter des données plus précises sans que le navigateur client ne traite les pixels espions.

Pour créer un domaine personnalisé, rendez-vous sur l’accueil de votre serveur stape.io, (celui de votre site Internet) et cliquez sur “Add custom domain”. Dans votre plan gratuit, vous pouvez en avoir un gratuitement.

Paramétrage d'un custom domaine dans stape.io

Dans “domaine name” entrez votre domaine personnalisé. C’est ici que vous le créez, (ne le cherchez pas ailleurs). La base de votre domaine personnalisé est votre domaine, tout simplement, votresiteinternet.com, mais devant vous devez y ajouter ce que vous voulez. Je vous conseille quelque chose comme data, ou donnees, ce qui devrait ressembler à data.votresiteinternet.com

Je vous conseille ensuite de cocher l’option “Add CDN” et de choisir stape CDN.

Le fait de d’activer les CDN présente plusieurs avantages clés :

  1. Amélioration de la vitesse : Un CDN utilise un réseau de serveurs répartis géographiquement pour distribuer le contenu. Cela signifie que les fichiers JavaScript, comme gtm.js, sont chargés à partir d’un serveur proche du visiteur, ce qui réduit le temps de chargement des pages et améliore la vitesse globale du site web.
  2. Optimisation du référencement : Une meilleure vitesse de chargement des pages peut avoir un effet positif sur le classement organique dans les moteurs de recherche, car la vitesse de la page est un facteur pris en compte par les algorithmes de classement.
  3. Fiabilité accrue : En cas de pic de trafic, un CDN peut répartir la charge sur plusieurs serveurs, ce qui réduit le risque de surcharge et d’interruption du site.
  4. Sécurité renforcée : Les CDNs offrent souvent des fonctionnalités de sécurité supplémentaires, telles que la protection contre les attaques DDoS, ce qui peut aider à sécuriser le site contre les cyberattaques

Ensuite le fait choisir stape CDN permet d’avoir une configuration déjà faite sans vous soucier des problèmes techniques. L’option de choisir vos propres CDN sort du scope de cet article.

Pour finir la configuration de votre domaine personnalisé il faut ajouter ces deux enregistrements CNAME chez le gestionnaire de votre nom de domaine (OVH, O2Switch Gandi….). Chaque gestionnaire de nom de domaine étant différent je ne vais pas rentrer dans les détails ici. 

les enregistrements CNAME d'un domaine personnalisé stape.io

Une fois cette étape faite, vous pouvez cliquer sur “Vérifier”. Généralement, ce processus est rapide mais cela peut aussi prendre un peu de temps. Donc soyez patient.

Une fois que votre domaine sera vérifié, votre écran devrait ressembler à ça.

un domaine vérifié chez stape.io

Côté stape.io tout doit être ok maintenant. Nous allons vérifier tout cela dans 5 secondes.

Mais avant, il faut renseigner ce custom domaine dans votre sGTM (le conteneur GTM serveur que nous avons créé tout à l’heure).

Pour se faire, rendez vous sur votre sGTM et rendez vous dans l’onglet “Adim”

Cliquez sur “Container Settings”

Container settings de sGTM

Puis sur “Add url” et renseigner le domaine personnalisé que nous venons de créer puis sur Save.

Ajout d'un domaine personnalisé dans sGTM

Maintenant nous pouvons tester que notre installation fonctionne avant d’aller plus loin.

Pour ce faire, mettez votre sGTM en mode Preview (comme dans un conteneur GTM normal).

Dans un nouvel onglet entrez l’url de votre custom domaine, vous vous souvenez, quelque chose comme ça : https://data.votrenomdedomaine.com. Vous aurez une erreur 400 mais c’est tout à fait normal puisque vous ne demandez rien au serveur.

Maintenant retournez sur votre onglet Preview de sGTM et vous devriez avoir dans la colonne de gauche un “/”. 

Vous pouvez pousser le test plus loin en entrant un paramètre dans votre url, par exemple : http://data.votrenomdedomaine/page/?test=true cette foie dans votre preview mode vous aurez une HTTP Request comme dans l’image ci-dessous.

Aucun tag ne sera déclenché puisque nous n’en avons pas créé et donc à ce stade aucune donnée ne part encore vers GA4.

Modification de la balise de configuration GA4 dans GTM côté navigateur

Maintenant, il ne reste plus qu’à signaler à votre balise de configuration GA4 dans votre conteneur côté web d’envoyer les données vers votre conteneur sGTM.

Pour se faire, rendez-vous dans votre GTM web et retrouvez votre balise de configuration GA4.
Dans celle-ci, cliquez sur “Configuration settings” puis ajoutez un paramètre. 

Vous devez nommer votre paramètre “server_container_url” (attention à bien écrire comme cela), puis en valeur ajouter votre custom domaine “https://data.votrenomdedomaine.com”, vous vous souvenez, le domaine personnalisé que vous avez créé dans stape.io.

Vous n’avez plus qu’à enregistrer et à tester.

Test de l’envoie des donnée de la balise de configuration GA4 vers votre sGTM

Ouvrez d’abord votre mode preview dans le conteneur serveur sGTM, puis après ouvrez le preview de votre conteneur web. C’est important de le faire dans ce sens pour avoir un preview serveur vierge et voir les données arrivés dans le preview serveur quand vous ouvrez votre preview web.

Dans votre preview web, vous devriez voir votre balise GA4 se déclencher comme dans l’image ci-dessous.

Si vous cliquez dessus vous devriez voir votre paramètre “server_container_url” comme ci dessous.

Maintenant rendez-vous dans votre preview serveur et vous devriez voir un événement de page_view dans la colonne de gauche. (cf image ci-dessous).

Vous pouvez cliquer dessus (attention vous n’aurez toujours pas de tag puisque nous n’en avons pas créé).

En revanche, comme tout à l’heure, dans l’onglet “Request”, puis dans “Incomming HTTP Request” vous verrez la requête. Mais cette fois ce ne sera plus la requête de test mais une requête Google du type : /g/collect?v=….

Vous pouvez cliquer dessus et vous verrez le détail de la requête qui est de type GET ce qui veut dire que les paramètres de la requête passent dans l’url.

Si vous faites attentions vous verrez dans ce paramètre l’événement “en=page_view” comme dans l’image ci-dessous.

Exemple d'une HTTP requête dans un container sGTM

A ce stade et pour cet article de blog, ne faites pas attention à tout le reste. 

La chose à retenir est que plus tard, quand vous allez progresser dans le tracking côté serveur est que tous les paramètres que vous allez envoyer de votre GTM web vont se retrouver ici. Vous pourrez alors les traiter, les isoler, les transformer et les envoyer aux plateformes que vous souhaitez : facebook, GA4, tiktok…. C’est là toute la puissance du tracking côté serveur. Mais j’écrirais d’autres articles de blog plus détaillés.

Il nous reste maintenant une dernière chose à mettre en place pour pouvoir envoyer ces données à GA4. La balise GA4 dans ce conteneur sGTM.

En effet, pour le moment, nous ne faisons que recevoir des données dans notre conteneur serveur. Mais nous n’envoyons rien à GA4.

Création de la balise GA4 dans le conteneur sGTM pour l’envoies des données dans GA4

Enfin, nous y sommes presque. Nous recevons maintenant des données dans notre sGTM. 

Envoyons maintenant des événements à GA4. Nous avons vu tout à l’heure que nous recevions l’événement page_view dans notre sGTM. Cela est possible puisque nous envoyons cet événement grâce à notre balise de configuration Google dans notre conteneur web GTM.

Envoyons donc cet événement à GA4.

Rendez vous dans votre sGTM et cliquez sur Tags puis sur New pour ajouter une balise.

De la même manière que nous le faisons dans GTM web cliquez sur “Choose a tag type” et choisissez Google Analytics => Google Analytics GA4.

Vous n’avez rien d’autre à faire pour cette balise (en effet notre système connait déjà l’ID de notre GA4 grâce à la configuration que nous avons fait plus haut) à part choisir un déclencheur. Dans un prochain article de blog, nous verrons comment envoyer des paramètres.

Pour le déclencheur, vous verrez que vous n’avez pas autant de déclencheur que dans GTM Web. Cliquez donc sur le “+” en haut à droite de votre écran et choisissez un déclencheur de type Custom (ce sera le type de déclencheur que vous utiliserez le plus à l’avenir).

Nous voulons que notre tag se déclenche uniquement quand c’est le client GA4 qui reçoit la demande. Il faut donc cocher “Some Events” puis dans la colonne de gauche choisir “Client Name”. Si vous ne voyez pas “Client Name” choisissez “Choose built in variable” puis “Client Name”. Il faut choisir une condition de déclenchement, choisir “equals” puis dans le dernier champ, écrivez “GA4”. Nous voulons donc que notre balise se déclenche quand le “Client Name” est égale à GA4. Nommer votre trigger (déclencheur) quelque chose comme “All Request from GA4” et nommer votre tag “GA4”. Vous devriez avoir quelque chose comme ça : 

Voilà, il nous reste plus qu’à tester.

Comme tout à l’heure, ouvrez en premier votre mode preview de votre conteneur serveur puis seulement après votre conteneur web et votre GA4 en mode debug.

Dans votre conteneur web, vérifiez bien que votre balise GA4 s’est déclenchée. 

Ensuite rendez-vous dans le preview de votre sGTM et vérifier que l’événement page_view est bien arrivé dans la colonne de gauche.

Maintenant, enfin, vous pouvez cliquer dessus et allez dans l’onglet “Tags” vous verrez alors que votre tag GA4 c’est bien déclenché aussi.

Vous pouvez cliquer dessus et vous verrez enfin une requête sortante “Outgoing HTTP Request from server”

Vous pouvez aussi cliquer dessus et dans les paramètres de la requête vous verrez en=page_view

Enfin rendez vous dans votre debug GA4 et vous devriez voir votre événement comme dans l’image ci-dessous.

Conclusion

Voilà, normalement, vous venez de faire votre première installation de tracking côté serveur.

C’est une installation extrêmement simple et basique. 

A ce stade nous n’avons pas traiter des données côté serveur. Nous n’avons pas non plus envoyé de paramètres comme les données des champs d’un formulaire ou les données liées à un achat sur un site de ecommerce.

Mais vous devriez mieux comprendre le fonctionnement et le processus de transfert des données à partir du site Internet vers GA4 en passant par un serveur.

Une fois que vous avez compris cela, le principe est exactement le même pour les autres plateformes comme Facebook, Tiktok…

Encore une fois ces technologies évoluent très vite. Cet article est écrit en août 2024, il est possible que des changements aient eu lieu depuis.

Je vais essayer de suivre les évolutions et de mettre à jour cet article en conséquence.

Edouard de Laage

Webmaster freelance entre Paris et la Sologne dans le Loir-et-Cher (Orléans, Blois)

Passionné par Internet et les nouvelles technologies je crée et développe des sites Internet vitrine, e-commerce ou sur mesure pour les entreprises. Expert sur le CMS WordPress tous les sites Intrnet que je crée ont pour objectif l’optimisation de leur positionnement sur les moteurs de recherche.

Ma valeur ajoutée ? En tant qu’entrepreneur et ancien chef d’entreprise, je comprends parfaitement les enjeux de la création d’un site Internet. Je vous conseille et vous accompagne sur le long terme pour que votre création de site Internet soit rentable.