Installer Google Tag Manager server-side en local, c’est possible grâce à Docker et au projet datalayer-relay. Cette méthode permet de tester et développer votre environnement serveur directement sur votre machine sans coûts de cloud, optimisant sécurité et rapidité.
3 principaux points à retenir.
- Exécutez GTM server-side localement avec Docker Desktop, bénéfique pour tests et développement avant production.
- Utilisez DataLayer Relay pour relayer automatiquement les événements client vers votre serveur GTM, simplifiant la collecte des données.
- Attention aux limitations liées au localhost et au paramètre server_container_url, nécessitant parfois une configuration proxy pour contourner les bugs.
Quels sont les prérequis pour installer GTM server-side localement ?
La première étape pour installer Google Tag Manager server-side sur localhost consiste à s’assurer que vous avez tous les outils nécessaires. La première pièce du puzzle est Docker Desktop, un logiciel gratuit qui simplifie considérablement l’utilisation de Docker sur votre machine. Pour obtenir Docker Desktop, rendez-vous sur le site officiel de Docker et téléchargez la version adaptée à votre système d’exploitation. Suivez les instructions d’installation, qui ne devraient pas vous poser de problème : il suffit de quelques clics. Une fois installé, je vous recommande de modifier les paramètres de démarrage automatique de Docker. Pourquoi ? Pour éviter que cette application gourmande en ressources soit lancée à chaque connexion à votre ordinateur. Allez dans les paramètres de Docker Desktop, et dans l’onglet Général, décochez l’option « Démarrer Docker Desktop à la connexion ». Cela vous permettra de garder votre machine plus rapide et réactive.
Une fois Docker installé, passons à la deuxième étape : cloner le dépôt GitHub de datalayer-relay. Ce projet, développé par Justus Hämäläinen, contient le conteneur Docker ainsi que les scripts nécessaires pour constituer notre environnement de test. Pour ce faire, ouvrez votre terminal, puis naviguez vers le répertoire où vous souhaitez le cloner. Exécutez la commande suivante :
git clone https://github.com/justushamalainen/datalayer-relay.gitCette commande téléchargera tout le dépôt sur votre machine locale. Une fois le clonage effectué, vous aurez accès à l’ensemble des fichiers nécessaires. Assurez-vous d’explorer le contenu du dépôt pour bien comprendre la structure et les options de configuration. Cela vous donnera une bonne base avant de plonger dans les configurations plus techniques.
Prendre le temps de bien préparer votre environnement avant de passer à l’étape suivante s’avérera crucial pour éviter d’éventuels tracas par la suite. En passant à cette préparation initiale, vous vous assurez un déploiement local fluide et efficace.
Comment configurer et lancer le serveur sur localhost ?
Pour déclencher votre serveur Google Tag Manager (GTM) localement, vous commencez par Copier le fichier .env.example en .env. C’est tout simple, il vous suffit de vous rendre dans votre terminal et d’exécuter la commande suivante :
$ cp .env.example .envEnsuite, ouvrez ce fichier .env fraîchement créé dans votre éditeur de texte favori (pour ma part, je suis adepte d’Emacs) et renseignez les valeurs requises. Vous aurez besoin de votre CONTAINER_CONFIG et GA4_PROPERTY, que vous avez récupérés depuis votre console Google Tag Manager. Ça donne quelque chose comme ça :
CONTAINER_CONFIG=votre_container_config_ici
GA4_PROPERTY=G-ABC123XYZUne fois que vous avez tout saisi, enregistrez et fermez le fichier.
Passons à la création et au lancement de votre conteneur Docker. Pour ce faire, ouvrez le terminal de Docker Desktop et naviguez vers le dossier de votre projet. Là, exécutez :
$ docker-compose up -dCette ligne de commande lance le processus en arrière-plan, créant ainsi notre conteneur. Une fois que le tout est construit, ouvrez l’onglet Containers dans Docker Desktop pour vérifier que votre datalayer-relay fonctionne bien.
En principe, votre serveur de taggage devrait tourner sur https://localhost:8888 et le serveur de prévisualisation sur https://localhost:8889. Petite mise en garde : ces adresses sont protégées par SSL. Ce qui signifie que vous devrez probablement contourner quelques avertissements de sécurité chaque fois que vous y accédez à cause des certificats auto-signés générés automatiquement. Si vous visitez les URLs https://localhost:8888/healthy et https://localhost:8889/healthy, vous devriez y voir apparaître le texte ok, signe que tout roule !
Si cette étape s’effectue sans histoire, félicitations, vous avez maintenant un serveur GTM en local qui tourne comme une horloge. En attendant, si vous êtes curieux d’en apprendre davantage sur l’optimisation de votre mise en place de GTM, jetez un œil à cet article ici pour des conseils avisés.
Comment tester et utiliser le mode Preview localement ?
Une fois que votre serveur est en marche, l’étape suivante cruciale est d’activer le mode Preview dans Google Tag Manager. Pour tester vos tags en conditions réelles, il vous faut modifier les paramètres de votre container GTM afin de cibler localhost. C’est assez simple, alors prenons un moment pour passer par les étapes.
Commencez par ouvrir votre container GTM dans votre navigateur. Allez dans la section Admin, puis sélectionnez les Container Settings. Ici, vous devriez voir une option pour définir les URL de votre serveur de balisage. Remplacez l’URL par https://localhost:8888. Enregistrez les modifications. Sachez que selon votre configuration SSL, vous pourriez devoir cliquer à travers certains avertissements de sécurité, mais pas de panique, c’est parfaitement normal lors du travail avec des certificats auto-signés.
Ensuite, retournez dans votre espace de travail GTM. Regardez du côté du bouton Preview, qui vous ouvrira un nouvel onglet avec l’Assistant de Tags. Ce dernier devrait déjà se charger sur https://localhost:8888. Il est possible que vous rencontriez des demandes de confirmation liées à la sécurité, ce qui est habituel. Passez par-dessus, et le tour est joué.
Pour vérifier si tout fonctionne correctement, ouvrez un nouvel onglet et entrez l’URL https://localhost:8888/test. Si tout est en ordre, vous devriez voir la requête test apparaître en temps réel dans l’Assistant de Tags. Cela vous donne un aperçu instantané de l’activité des tags sur votre configuration locale, vital pour affiner et améliorer votre tracking. C’est un peu comme avoir une fenêtre ouverte sur ce que votre dataLayer envoie et reçoit, réel, tangible et à portée de main!
Ce travail sur l’environnement local est essentiel afin de peaufiner vos stratégies de tracking avant la mise en production. C’est parfois là que se cachent les petits pépins qui, en ligne, pourraient devenir des casse-têtes. Si vous souhaitez approfondir vos connaissances en matière de débogage dans Google Tag Manager, n’hésitez pas à consulter ce guide sur le mode débogage. Cela pourrait s’avérer très utile pour optimiser vos configurations!
Quelles sont les limites et contournements du server-side sur localhost ?
Exécuter Google Tag Manager (GTM) en mode server-side sur localhost, c’est un peu comme conduire une voiture de sport sur un circuit privé : excitant, mais avec ses propres défis. La première complication qu’on rencontre, c’est ce fameux paramètre server_container_url qui, non seulement censure le port, mais le supprime carrément. Imaginez la frustration : vos événements tentent de s’envoler, mais ils se heurtent à un mur. Vous avez vu les coureurs se crasher dans des courses de Formule 1 ? C’est un peu la même histoire ici !
Pour contourner ce bug connu, une solution temporaire consiste à utiliser transport_url. Bien que cette technique fonctionne, elle a ses limites et ne donne pas accès à toutes les fonctionnalités du server-side. C’est comme remplacer un bon café par un café instantané ; parfois ça dépanne, mais ce n’est pas l’idéal.
Une autre alternative, plus sensible et élégante, serait de configurer un proxy Nginx. Pourquoi ne pas simuler un domaine personnalisé, comme https://testing.votresite, qui redirige vers localhost ? Ainsi, vous évitez les galères avec les ports et les certificats SSL. En gros, vous trompez le système et le faites travailler pour vous, sans qu’il s’en rende compte ! Vous pouvez consulter davantage d’infos sur l’intégration des serveurs GTM dans ce lien : ici.
En fin de compte, même si ce mode de fonctionnement en local peut sembler chaotique à première vue, il offre une flexibilité incroyable. Oui, il y a des limitations, mais connaître ces limites et mettre en œuvre des solutions de contournement, c’est l’art même de la technologie. Comme disait Albert Einstein : « La difficulté attire le génie. » En somme, c’est à travers ces obstacles que nous apprenons et nous grandissons dans le monde de l’automatisation et de l’IA.
Comment fonctionne et s’intègre DataLayer Relay dans ce setup ?
Le projet DataLayer Relay est un véritable bijou pour ceux qui souhaitent simplifier le tracking des événements sans avoir à jongler avec un container client-side encombrant. En gros, il permet de transférer automatiquement toutes les données des événements dataLayer vers votre serveur Google Tag Manager (GTM) local, sans avoir à charger un container côté client. Imaginez un peu : vous disposez d’une configuration dataLayer robuste, et tout ce qui est besoin, c’est de s’assurer que les événements sont correctement envoyés au serveur GTM, sans tracas supplémentaires.
Ce qui est remarquable, c’est que DataLayer Relay utilise une installation basique de gtag.js qui est chargée directement depuis le serveur GTM. C’est une approche qui optimise le processus tout en gardant une intégrité totale dans la gestion des données. Vous n’avez pas besoin de surcharge additionnelle ou de scripts tierces ; tout est localisé, tout en restant hyper efficace.
Pour tester les événements, vous n’avez qu’à ouvrir votre navigateur et naviguer vers localhost:3000. Vous verrez alors une interface sympa qui vous permettra de cliquer sur les boutons pour pousser des événements dans le dataLayer. C’est simple et efficace, exactement ce qu’il faut pour contrôler ce qui se passe dans votre configuration de tagging sans avoir à plonger dans un environnement de production. Le meilleur dans tout ça ? Vous pouvez visualiser tous les hits directement dans le mode Preview de GTM. Cela donne une clarté instantanée sur ce qui est effectivement transmis au serveur.
Un autre aspect fascinant de DataLayer Relay repose sur ses fonctionnalités avancées, comme les champs persistants. Ces derniers vous permettent de définir certains paramètres d’événements qui vont rester actifs au cours de toute la session de navigation. C’est un peu comme si vous pouvez imbriquer certaines informations qui seront automatiquement intégrées à toutes les nouvelles requêtes gtag() effectuées durant cette session. Cela fait gagner un temps précieux et réduit la complexité lors de la gestion des données dans vos diverses interactions.
Alors, prêt à voir votre tracking devenir un jeu d’enfant ? Avec une configuration solide et un peu d’attention à la structure du dataLayer, vous serez étonné de la facilité avec laquelle vous pourrez piloter vos données. Et si cette notion vous intrigue encore plus, je vous invite à jeter un œil à cette vidéo qui approfondit ces concepts passionnants.
Prêt à exploiter Google Tag Manager server-side localement et booster vos tests ?
Installer Google Tag Manager server-side sur votre machine locale grâce à Docker et DataLayer Relay s’avère être une stratégie puissante pour maîtriser vos déploiements sans dépendre du cloud. Cette démarche réduit les coûts, accélère vos cycles de développement et vous donne un contrôle total sur votre serveur. Même si certaines limitations existent, notamment liées au localhost, des solutions comme le proxy Nginx offrent des palliatifs efficaces. En résumé, tester localement renforce votre expertise technique et prépare un déploiement serveur fiable et optimisé.
FAQ
Qu’est-ce que Google Tag Manager server-side ?
Pourquoi installer GTM server-side sur localhost ?
Quels outils sont nécessaires pour ce setup ?
Comment contourner les problèmes liés au port localhost ?
Qu’est-ce que DataLayer Relay et comment l’utiliser ?
A propos de l’auteur
Franck Scandolera, expert en Web Analytics et Automatisation No Code, accompagne depuis plus de dix ans les professionnels dans la gestion avancée des données marketing. Responsable de l’agence webAnalyste et formateur reconnu en Google Tag Manager et analytics server-side, il maîtrise parfaitement l’intégration technique, le tracking client-side et server-side, ainsi que les architectures data cloud. Franck délivre des formations claires et pragmatiques, permettant à ses clients de déployer des solutions robustes, adaptées à leurs enjeux business et conformes aux exigences RGPD.
⭐ Analytics engineer, Data Analyst et Automatisation IA indépendant ⭐
- Ref clients : Logis Hôtel, Yelloh Village, BazarChic, Fédération Football Français, Texdecor…
Mon terrain de jeu :
- Data Analyst & Analytics engineering : tracking avancé (GTM server, e-commerce, CAPI, RGPD), entrepôt de données (BigQuery, Snowflake, PostgreSQL, ClickHouse), modèles (Airflow, dbt, Dataform), dashboards décisionnels (Looker, Power BI, Metabase, SQL, Python).
- Automatisation IA des taches Data, Marketing, RH, compta etc : conception de workflows intelligents robustes (n8n, 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.