Comment exécuter Server-side Google Tag Manager sur localhost ?

Exécuter Server-side Google Tag Manager (GTM) sur localhost est possible via Docker, offrant un environnement de test complet localement, sans coûts de cloud. Découvrez comment configurer, lancer et utiliser ce serveur avec DataLayer Relay pour un contrôle renforcé de vos données analytics.

3 principaux points à retenir.

Installer SGTM localement via Docker Desktop simplifie la phase de test et développement.
La configuration du fichier .env est cruciale pour faire communiquer votre container GTM avec GA4.
DataLayer Relay automatise la collecte des événements, optimisant le passage au server-side GTM sans client web GTM.

Quelles sont les bases pour installer Server-side GTM localement ?

Pour démarrer avec l’installation de Google Tag Manager en mode server-side sur ta machine locale, la première étape cruciale est d’installer Docker Desktop. Docker va te fournir l’environnement nécessaire pour exécuter le serveur GTM via des conteneurs, rendant l’ensemble du processus simple et amusant. Voici comment procéder étape par étape :

Rends-toi sur le site de Docker. Télécharge et exécute l’installateur. Si tu es sous Windows, assure-toi que ta machine supporte la virtualisation—c’est essentiel !
Une fois installé, lance Docker Desktop. Selon tes préférences, tu peux désactiver le lancement automatique en allant dans les paramètres Général et en décochant l’option correspondante. Cela aide à éviter de surcharger ton ordinateur avec des ressources inutiles à chaque démarrage.

Maintenant que Docker est opérationnel, tu dois cloner le dépôt GitHub de datalayer-relay. Ce projet, imaginé par Justus Hämäläinen, t’aidera incroyablement dans la gestion des données en server-side.

Dans ton terminal, utilise la commande suivante :

git clone https://github.com/justushamalainen/datalayer-relay.git

Une fois que le dépôt est cloné avec succès, il est temps de préparer ton environnement. Tu devras configurer des variables d’environnement pour ton instance de Google Tag Manager. Pour cela, commence par copier le fichier .env.example en .env :

cp .env.example .env

Édite ensuite le fichier avec un éditeur de texte de ton choix, par exemple nano ou même Emacs, et remplis les valeurs requises, comme la configuration du conteneur et ton ID de mesure GA4.

Maintenant que toute la configuration est en place, pourquoi opter pour un déploiement local avec localhost avant de passer en production ? La réponse est simple : cela te permet d’expérimenter et de vérifier l’intégralité de ton déploiement sans craindre d’impacter un environnement de production. Tu as un terrain de jeu à ta disposition, où chaque erreur peut être corrigée sans conséquences réelles. C’est bien plus rassurant, non ? Pour plus de conseils sur le suivi des conversions, jette un œil à cet article ici.

Enfin, configure et organise ta structure de données avant de te lancer. La préparation est 90% du succès, surtout quand il s’agit de gérer des flux de données dans un environnement aussi dynamique que Google Tag Manager. Alors, es-tu prêt à te lancer ?

Comment configurer et lancer le conteneur Docker pour SGTM ?

Pour configurer et lancer le conteneur Docker pour le Server-side Google Tag Manager (Sgtm), il y a quelques étapes clés à suivre. Tout d’abord, il est crucial de modifier le fichier .env, qui contient des variables essentielles pour le bon fonctionnement de l’application. Dans le terminal, commencez par copier le fichier exemple :

# Copiez le fichier exemple d'environnement
$ cp .env.example .env

Ensuite, ouvrez ce fichier avec votre éditeur de code favori (je recommande nano ou vim, mais choisissez ce qui vous convient le mieux) et modifiez les valeurs suivantes :

# Modifier avec vos valeurs réelles
# Récupérez cela depuis GTM Admin > Paramètres du conteneur
CONTAINER_CONFIG=your_container_config_here

# Votre ID GA4 (ex : G-ABC123XYZ)
GA4_PROPERTY=G-ABC123XYZ

Une fois que vous avez configuré le fichier .env avec les bonnes valeurs, il est temps de construire l’image Docker. Ouvrez également le terminal dans Docker Desktop pour exécuter les commandes nécessaires. Rendez-vous dans le dossier du projet sur votre système local et exécutez la commande suivante :

$ docker-compose up -d

Cela lancera le processus de construction de l’image Docker. Une fois que tout est en place, vous pourrez accéder à votre serveur SGTM sur https://localhost:8888 et à votre serveur de prévisualisation sur https://localhost:8889. Il est bon de noter que l’application génère automatique des certificats SSL, mais comme ils sont auto-signés, vous pourriez être confronté à des avertissements de sécurité dans votre navigateur. Pour vérifier que tout fonctionne, lancez les URL suivantes :

https://localhost:8888/healthy
https://localhost:8889/healthy

Vous devez voir le texte ok à l’écran pour chaque point de terminaison. Cela confirme que les serveurs fonctionnent correctement. N’oubliez pas, cependant, que le lien SSL auto-signé peut créer un peu de confusion : si vous recevez des avertissements, il suffit d’accepter pour continuer.

Voici un tableau récapitulatif des commandes clés Docker que vous utiliserez :

Commandes	Description
`docker-compose up -d`	Lance la construction de l’image et démarre les conteneurs en arrière-plan.
`docker ps`	Affiche les conteneurs en cours d’exécution.
`docker-compose down`	Arrête et supprime les conteneurs.

Cette configuration mise en place sur votre localhost vous offre un terrain d’expérimentation idéal avant de migrer vers un environnement de production.

Comment utiliser le mode preview et tester SGTM localement ?

Pour activer le mode Preview dans Google Tag Manager (GTM) et tester votre instance SGTM sur localhost, commencez par vous rendre dans la console de gestion de SGTM. Naviguez vers votre conteneur, puis dirigez-vous dans la section Administrateur. Dans les Paramètres du conteneur, assurez-vous que tout est bien configuré. Sauvegardez les modifications et voyagez ensuite dans votre espace de travail GTM. Ici, cliquez sur le bouton Preview Picker.

Dans la fenêtre qui s’ouvre, choisissez localhost comme hôte pour le mode Preview et cliquez sur Preview. À ce stade, un nouvel onglet s’ouvrira avec le Tag Assistant, utilisant l’URL https://localhost:8888 comme hôte. Attention : vous pourriez rencontrer des alertes SSL étant donné que les certificats HTTPS générés pour localhost ne sont pas valides. Il vous faudra peut-être cliquer à travers quelques avertissements de sécurité pour continuer.

Une fois dans le Tag Assistant, la magie peut commencer ! Pour tester la réception des événements côté serveur, ouvrez un nouvel onglet dans votre navigateur et envoyez une requête de test à l’URL https://localhost:8888/test. Si tout est en ordre, vous devriez voir le chemin de test apparaître dans le Tag Assistant, confirmant ainsi que votre instance SGTM fonctionne correctement.

Pour contourner le bug connu lié à server_container_url, où le port est retiré lors de l’envoi des requêtes, utilisez la commande suivante pour charger la bibliothèque gtag.js :

gtag('config', 'G-123123123', {transport_url: 'https://localhost:8888'});

Cela permet de s’assurer que vos événements s’envoient correctement, contournant ainsi le problème de transmission lié à l’URL du conteneur. Si vous souhaitez approfondir la gestion des tests locaux de GTM, je vous encourage à visiter cette discussion sur StackOverflow, où des experts échangent des astuces et des solutions sur ce sujet.

Qu’est-ce que DataLayer Relay et comment l’exploiter ?

Le DataLayer Relay est une pépite pour ceux qui souhaitent optimiser le passage des events du client vers le serveur avec Google Tag Manager (GTM). Développé pour faciliter ce transfert, cet outil agit comme un pont entre le monde client-side, où les données peuvent être un peu éparpillées, et le monde server-side, où tout est organisé et géré efficacement. En exploitant le relay, vos événements sont automatiquement relayés au dataLayer, permettant une transition en douceur vers votre GTM server-side.

Dans ce cadre, le serveur local est votre terrain de jeu, en utilisant simplement http://localhost:3000 pour visualiser le fonctionnement en temps réel. L’un des grands atouts de ce système est qu’il interagit directement avec GA4 à travers gtag.js, sans avoir à charger un conteneur client. Vous n’avez pas besoin de complexifier votre setup avec un conteneur client-side, ce qui allège considérablement les transactions et améliore les performances.

Imaginez que vous souhaitez tester un événement d’achat. Lançant une action sur votre site, cet événement sera immédiatement poussé dans le dataLayer. Grâce à l’intégration fluide avec GTM, vous pouvez inspecter tous ces événements dans le mode Preview de SGTM. Cela permet non seulement de valider que les données sont correctement envoyées, mais aussi de les compiler en un format bien structuré pour le traitement ultérieur. Cela va rendre l’analyse et le reporting bien plus clair et efficient.

Il est aussi possible d’utiliser des champs persistants, qui vous permettent de configurer certains paramètres d’événements pour qu’ils soient automatiquement associés à tous les appels gtag() qui se font durant cette session de page. C’est un moyen idéal pour faciliter la gestion d’informations récurrentes. Par contre, attention aux limites. Avoir un relay qui pousse des données sans une bonne structuration dans le dataLayer peut mener à une complexité de gestion. Il est primordial de s’assurer que votre configuration est suffisamment robuste pour éviter ce genre de piège.

Pour enrichir davantage ce propos, vous pouvez consulter des ressources supplémentaires, comme cet article qui évoque le sujet en détail. Équipez-vous donc des bons outils et techniques pour rendre votre expérience avec GTM aussi purifiée qu’optimale.

Quels sont les limites et astuces pour SGTM local sur localhost ?

Si vous cherchez à configurer un environnement local pour Server-side Google Tag Manager (SGTM), préparez-vous à naviguer dans quelques écueils, notamment la problème du paramètre server_container_url. Lorsque vous utilisez localhost, ce paramètre a la fâcheuse tendance à ne pas prendre en compte le port, ce qui peut devenir un véritable casse-tête lors de l’envoi d’événements.

En d’autres termes, votre requête envoyée à https://localhost:8888 sera stripée du port lorsque le server_container_url est mis en place. Résultat : l’événement sera envoyé vers https://localhost/ sans le port spécifié, conduisant à des erreurs. Décevant, n’est-ce pas ?

Pour contourner cette problématique, une solution temporaire s’impose : le paramètre transport_url. Bien que quelque peu obsolète, il permet d’envoyer des requêtes sans nécessiter un port, assurant ainsi la continuité de votre suivi. Cela dit, il ne fournit pas toutes les fonctionnalités de SGTM et constitue plus un pansement qu’une véritable solution. Si vous êtes dans l’urgence, toutefois, cela peut faire l’affaire.

Mais ne vous arrêtez pas là ! Envisagez d’utiliser nginx comme reverse proxy. Cette méthode vous permettrait de mapper un sous-domaine, comme https://testing.votre.site, directement vers votre adresse localhost. Ainsi, les requêtes passeraient par nginx, rendant le server_container_url parfaitement opérationnel sans avoir à jongler avec les portages. C’est un hack à prendre en considération si vous cherchez à établir un environnement de test plus stable.

Concrètement, travailler dans un environnement local présente des avantages indéniables, surtout pour les tests et le développement. Vous avez le contrôle total sans les considérations de coût et vous pouvez brièvement expérimenter sans craindre de tout casser en production. Cependant, cela vient avec ses propres limites : la gestion des ports et des URL étant l’un des principaux défis. Pour optimiser la mise en œuvre de votre SGTM local et en savoir plus sur les subtilités du tag manager, consultez cet article introduction à la gestion des balises serveur.

Prêt à maîtriser votre environnement server-side Google Tag Manager en local ?

L’exécution locale de Server-side Google Tag Manager avec Docker est aujourd’hui accessible et puissante pour tester les déploiements server-side sans investissements cloud immédiats. Cette méthode garantit un contrôle total sur l’environnement, facilite la mise au point en développement, avec en prime l’outil DataLayer Relay qui automatise la transmission des events. Attention aux subtilités techniques comme le bug du server_container_url qui se contourne temporairement pour un usage efficace. Pour tous les analystes et développeurs souhaitant s’émanciper du cloud pour leurs tests server-side, cette pratique est un tremplin indispensable et pragmatique.

FAQ

Qu’est-ce que Server-side Google Tag Manager ?

Server-side Google Tag Manager est une version serveur de GTM qui permet de traiter et distribuer les données de tracking via un serveur dédié, améliorant la performance, la sécurité et la confidentialité par rapport au tracking exclusivement client-side.

Pourquoi exécuter Server-side GTM sur localhost ?

Lancer Server-side GTM localement permet de tester et développer vos configurations en toute sécurité et sans frais cloud, avant déploiement en production, facilitant les itérations rapides et la compréhension des mécanismes internes.

Quelles sont les dépendances nécessaires pour le setup local ?

Il faut Docker Desktop installé sur votre machine, le dépôt GitHub datalayer-relay cloné, et un environnement configuré via le fichier .env contenant notamment vos identifiants GTM et GA4.

Comment résoudre le problème du port dans server_container_url ?

Le paramètre server_container_url ne supporte pas les ports dans localhost, ce qui bloque certaines requêtes. La solution temporaire est d’utiliser transport_url. Une autre option avancée est un reverse proxy nginx qui mappe un domaine personnalisé vers localhost.

Quel est le rôle de DataLayer Relay dans ce setup local ?

DataLayer Relay collecte automatiquement les événements dataLayer côté client et les relaie vers le container server-side GTM, évitant d’avoir à charger un container client GTM sur la page et simplifiant la gestion des données analytics en local.

A propos de l’auteur

Franck Scandolera est expert en Web Analytics et Data Engineering, avec une solide expérience en tracking client-side et server-side, notamment via Google Tag Manager. Responsable de l’agence webAnalyste et formateur reconnu sur GA4, GTM et infrastructures data complexes, il accompagne depuis plus de 10 ans professionnels et entreprises pour déployer des systèmes analytics robustes, respectueux de la conformité RGPD, et automatisés. Sa maîtrise du déploiement local et cloud et son approche pragmatique du server-side GTM en font un spécialiste incontournable du domaine.

Franck Scandolera

⭐ Expert et formateur en Tracking avancé, Analytics Engineering et Automatisation IA (n8n, Make) ⭐

Ref clients : Logis Hôtel, Yelloh Village, BazarChic, Fédération Football Français, Texdecor…

Mon terrain de jeu :

Data & Analytics engineering : tracking propre RGPD, entrepôt de données (GTM server, BigQuery…), modèles (dbt/Dataform), dashboards décisionnels (Looker, SQL, Python).
Automatisation IA des taches Data, Marketing, RH, compta etc : conception de workflows intelligents robustes (n8n, Make, App Script, scraping) connectés aux API de vos outils et LLM (OpenAI, Mistral, Claude…).
Engineering IA pour créer des applications et agent IA sur mesure : intégration de LLM (OpenAI, Mistral…), RAG, assistants métier, génération de documents complexes, APIs, backends Node.js/Python.