Intégrer Google Tag Manager sur Webflow : Guide
Guide pratique pour installer GTM sur Webflow : méthodes automatique ou manuelle, tests, configuration GA4 et conformité RGPD via CMP et Consent Mode.
Google Tag Manager (GTM) simplifie la gestion de vos scripts sur Webflow, vous évitant de modifier le code à chaque changement. Voici ce qu'il faut savoir pour intégrer GTM efficacement :
- Pourquoi l'utiliser ? Centralisez vos balises (Google Analytics, pixels publicitaires, etc.) et gérez-les depuis GTM sans republier votre site.
- Pré-requis : Un compte Google, un abonnement Webflow payant avec code personnalisé, et une CMP pour le respect du RGPD en France.
- Méthodes d'intégration : Automatique via l'application Google Site Tags ou manuelle via les paramètres de projet ou des pages spécifiques.
- Test et configuration : Vérifiez l'installation avec le mode Aperçu et configurez vos balises (GA4, événements personnalisés) selon vos besoins.
Respectez le RGPD en utilisant une CMP et configurez GTM pour activer les balises uniquement après consentement. Une gestion rigoureuse garantit un suivi précis et conforme.
Guide d'intégration Google Tag Manager sur Webflow en 4 étapes
Création de votre conteneur Google Tag Manager
Comment configurer un compte et un conteneur GTM
Rendez-vous sur tagmanager.google.com en utilisant le compte Google associé à vos outils marketing habituels. Cliquez sur « Créer un compte », entrez le nom de votre organisation (par exemple, « Vanara – France »), et sélectionnez France comme pays. Ensuite, créez un conteneur en nommant-le avec l'URL principale de votre site, comme « vanara.fr – Production » (sans barre oblique finale). Sélectionnez « Web » comme plateforme cible, puis acceptez les conditions d'utilisation. Google recommande d'utiliser un conteneur par site (ou domaine) pour maintenir une structure claire et éviter les erreurs de suivi.
Pour simplifier la gestion, adoptez dès le départ des conventions de nommage claires : nommez le compte avec celui de l’entreprise et le conteneur avec le nom du site suivi de son environnement. Cette méthode est particulièrement utile si plusieurs intervenants (équipe interne, agences comme Vanara) collaborent sur le même conteneur. Une fois votre conteneur configuré, explorez l'interface de Google Tag Manager pour vous familiariser avec l’organisation des balises.
Explorer l'interface GTM
L'interface principale de Google Tag Manager se compose de cinq sections principales accessibles depuis le menu de gauche : Balises (Tags), Déclencheurs (Triggers), Variables, Dossiers (Folders), et Versions. Voici un aperçu de leur rôle :
- Balises : ce sont les scripts à exécuter, comme Google Analytics 4 ou des pixels publicitaires.
- Déclencheurs : ils définissent quand les balises doivent s’activer (par exemple, sur toutes les pages, lors d’un clic sur un bouton, ou après un envoi de formulaire).
- Variables : elles stockent des valeurs réutilisables, comme un ID de mesure GA4, une devise (EUR) ou l’URL d’une page.
- Versions : cette section conserve l’historique complet des publications, vous permettant de revenir à une configuration antérieure en cas de problème.
Pour les équipes, les espaces de travail (Workspaces) permettent de préparer des modifications en parallèle sans interférer avec le travail des autres. Avant toute mise en production, utilisez le mode Prévisualisation (Preview/Debug) pour tester vos changements dans l’espace de travail actif.
Obtenir les extraits de code GTM
Une fois le conteneur créé, Google Tag Manager affiche une fenêtre modale contenant deux extraits de code essentiels : l’un à insérer dans la section <head> de votre site, et l’autre juste après la balise <body> ouvrante. Notez également l’ID du conteneur (GTM-XXXXXXX) affiché en haut à droite, qui sera utile pour l’intégration et le débogage. Si vous fermez cette fenêtre par erreur, vous pouvez retrouver ces informations en cliquant sur l’ID du conteneur, puis sur « Installer Google Tag Manager » dans le menu. Copiez les deux extraits de code pour les intégrer dans Webflow ou tout autre CMS utilisé pour votre site.
Ajouter GTM à Webflow avec Google Site Tags
Installer l'application Google Site Tags
Pour commencer, rendez-vous dans le tableau de bord Webflow et ouvrez l'onglet Apps. Recherchez "Google Site Tags", puis cliquez sur Installer. Connectez-vous à votre compte Google lié à Google Tag Manager (GTM) et sélectionnez le conteneur approprié (par exemple : GTM-FR12345).[9] Une fois les autorisations nécessaires accordées, l'application ajoute automatiquement les scripts GTM aux sections pertinentes de votre site.[9]
Comment l'application gère l'intégration automatique
Une fois l'application installée, tout se fait de manière automatique. Le script GTM est inséré dans la balise <head> de chaque page de votre site, et un fallback (noscript) est ajouté pour garantir un chargement fiable.[9] Après cela, publiez votre site (que ce soit sur nomdusite.webflow.io ou un domaine personnalisé), activez le mode Aperçu dans GTM en renseignant l'URL de votre site, et utilisez l'extension Tag Assistant pour vérifier que l'intégration est bien en place.[2][7]
Limites de l'application et alternatives
Cette méthode est idéale pour les sites vitrines simples. Cependant, elle peut ne pas convenir aux besoins plus complexes, comme :
- La gestion avancée du consentement RGPD (par exemple, un chargement conditionnel via une CMP).
- L'utilisation de plusieurs conteneurs en fonction des sous-domaines ou des environnements.
- Les configurations spécifiques aux sites e-commerce ou aux applications à page unique (SPA).[1][2][4][5]
Dans ces cas, l'installation manuelle est recommandée. La méthode automatique n'offre pas la flexibilité nécessaire pour ajuster ces paramètres avancés, ce qui la rend moins adaptée aux projets complexes. Pour des besoins spécifiques, optez pour une configuration manuelle plus personnalisée.
Ajouter GTM à Webflow manuellement
Installation globale via les paramètres du projet
Pour intégrer Google Tag Manager (GTM) sur l'ensemble de votre site Webflow, rendez-vous dans les Paramètres du projet, puis sélectionnez l'onglet Custom Code. Insérez le premier extrait GTM (celui qui commence par <script>(function(w,d,s,l,i)...) dans le champ Head Code et placez le second extrait (la balise <noscript>) dans le champ Footer Code. Une fois ces scripts ajoutés, cliquez sur Publier immédiatement pour appliquer les changements, que ce soit sur nomdusite.webflow.io ou sur un domaine personnalisé.
Cette méthode est idéale dans la plupart des cas, car elle garantit que GTM est actif sur toutes les pages du site. L’intérêt principal réside dans la gestion simplifiée : toute modification ou mise à jour des suivis peut être effectuée directement dans l’interface GTM, sans nécessiter de nouvelle publication sur Webflow. Cela réduit les erreurs potentielles et offre une plus grande flexibilité aux équipes marketing. Si vous ciblez uniquement certaines pages spécifiques, passez à une configuration plus ciblée.
Installer GTM sur des pages ou sections spécifiques
Pour activer GTM uniquement sur certaines pages, évitez d’utiliser les champs globaux des paramètres du projet. À la place, ouvrez la page concernée, allez dans Page Settings > Custom Code, et insérez les deux extraits GTM (Head et Footer). Cette méthode est particulièrement utile pour des pages spécifiques, comme un tunnel de conversion ou une landing page dédiée.
Une autre solution consiste à créer un composant réutilisable (symbol) contenant un élément Embed avec le code GTM. Placez ce symbol uniquement sur les pages ou sections nécessitant un suivi. Cette approche facilite la gestion lorsque plusieurs pages partagent les mêmes besoins en tracking.
Gérer les configurations avancées
Pour une gestion plus fine de vos balises, vous pouvez compléter l’installation de base avec des ajustements spécifiques. Par exemple, si certaines pages doivent être exclues d’un suivi global, vous avez deux options :
- Supprimer l’installation globale et insérer le code GTM uniquement dans les Page Settings des pages ciblées.
- Conserver l’installation globale et configurer des déclencheurs GTM pour désactiver les tags sur certaines URL à l’aide de règles d’inclusion ou d’exclusion.
Bien qu’il soit techniquement possible d’utiliser plusieurs conteneurs GTM sur un même site, cela est déconseillé par Google en raison des risques de doublons et de la complexité accrue de gestion. Si vous gérez plusieurs projets Webflow, vous pouvez utiliser un seul conteneur GTM pour plusieurs domaines, à condition que la structure de tracking soit similaire. Sinon, créez un conteneur distinct pour chaque site majeur afin de maintenir une gestion claire et organisée.
sbb-itb-dec7f38
Tester et configurer les balises dans GTM
Vérifier votre installation GTM
Une fois GTM installé, commencez par activer le mode Aperçu. Entrez l'URL complète de votre site publié et observez le panneau de débogage. Ce dernier doit afficher le conteneur chargé ainsi que les événements tels que page vue, DOM Ready et Window Loaded. Si le panneau ne détecte aucun conteneur, vérifiez que les deux extraits GTM ont bien été intégrés dans Webflow et que les modifications ont été publiées. Testez à la fois votre page d’accueil et une page interne pour garantir que GTM fonctionne correctement sur l’ensemble du site.
Pour un contrôle rapide, vous pouvez utiliser l’extension Chrome Tag Assistant. Elle affichera une icône verte si votre conteneur GTM-XXXXXXX est configuré correctement, ou jaune/rouge en cas de problème. Si GTM est détecté mais qu’une balise GA4 attendue ne se déclenche pas, cela indique un souci dans la configuration des balises ou des déclencheurs, et non dans l’installation de GTM.
Une fois la vérification terminée, vous pouvez passer à la configuration initiale de vos balises.
Configurer vos premières balises
Pour intégrer Google Analytics 4, commencez par créer une propriété GA4 et un flux Web afin d’obtenir votre ID de mesure (format G-XXXXXXXXX). Dans GTM, allez dans Balises → Nouvelle, donnez un nom à votre balise (par exemple « GA4 – Configuration – Toutes les pages »), puis choisissez le type Configuration Google Analytics 4. Collez votre ID de mesure dans le champ dédié, sélectionnez le déclencheur Toutes les pages pour que la balise se déclenche sur chaque chargement de page, puis enregistrez. Utilisez le mode Aperçu pour vérifier que la balise GA4 fonctionne correctement sur des pages clés (comme l’accueil, une page de collection, un formulaire ou un article de blog). Une fois testé, publiez votre configuration.
En complément de la configuration de base, ajoutez des balises d’événement pour suivre des actions spécifiques comme les soumissions de formulaire, les clics sur des boutons d’appel à l’action (par exemple « Demander un devis » ou « Prendre rendez-vous ») ou encore les téléchargements. Pour suivre un formulaire Webflow, configurez un déclencheur personnalisé basé sur un événement JavaScript ou un sélecteur CSS, et associez-le à une balise d’événement GA4 comme form_submit, en ajoutant des paramètres tels que form_name et page_path. Pour les clics sur des boutons importants, utilisez un déclencheur de clic avec un sélecteur précis et envoyez un événement GA4 comme generate_lead. Testez chaque événement dans le mode Aperçu avant de publier.
Une fois vos balises configurées et testées, il est essentiel de respecter les règles liées au RGPD.
Respecter les exigences du RGPD
En France, il est obligatoire d’obtenir un consentement explicite avant de déclencher des balises non essentielles. Pour cela, utilisez une CMP (par exemple, Axeptio) qui permet aux utilisateurs de gérer leurs préférences en matière de cookies en français. Cette CMP doit transmettre l’état du consentement à GTM via des événements dataLayer ou via le Google Consent Mode v2. Configurez vos balises GTM pour qu’elles ne se déclenchent qu’après obtention du consentement adéquat. Par exemple, les balises GA4 et Google Ads ne doivent s’activer que si l’utilisateur a accepté les cookies analytiques ou publicitaires.
Dans GTM, activez les options Consent Overview et Consent Mode, puis définissez les types de consentement requis pour chaque balise. Par défaut, le Consent Mode envoie des signaux « refusés » jusqu’à ce que la CMP mette à jour le statut. Une fois le consentement donné, GTM autorise le déclenchement des balises correspondantes. Veillez à ne pas transmettre de données personnelles identifiables (comme des noms complets, adresses e-mail ou numéros de téléphone) dans vos événements et paramètres GTM. Utilisez uniquement des données pseudonymes ou agrégées, et assurez-vous que votre politique de confidentialité en français détaille clairement les finalités de chaque suivi.
Conclusion et prochaines étapes
Points essentiels à retenir
Après avoir configuré et testé Google Tag Manager (GTM) sur votre site, il est crucial de garder certains éléments en tête pour garantir une utilisation efficace et durable.
Avec GTM intégré sur Webflow, vous centralisez tous vos scripts marketing dans un conteneur unique, ce qui évite de modifier le code de votre site à chaque fois que vous ajoutez ou modifiez une balise [2][8]. Deux options s’offrent à vous : utiliser l'application Google Site Tools pour une installation rapide et guidée, ou opter pour l'intégration manuelle via les paramètres du projet pour des configurations plus complexes [8][9]. GTM permet également des mises à jour instantanées des balises sans nécessiter de republier votre site [2][8].
Pour rester conforme au RGPD en France, configurez vos balises afin qu'elles ne se déclenchent qu'après un consentement explicite recueilli via une CMP appropriée et le Consent Mode v2 [1][4][10]. Quelques erreurs fréquentes sont à éviter : ne pas dupliquer vos balises (par exemple, ne configurez pas GA4 à la fois dans Webflow et GTM), testez toujours vos configurations en mode Aperçu avant publication, et documentez votre travail pour faciliter la maintenance [7][3][2].
Obtenir de l'aide avec Vanara
Si vous souhaitez aller plus loin dans l’optimisation de votre tracking, l’agence Vanara propose un accompagnement sur mesure.
Pour les entreprises françaises, Vanara peut concevoir et implémenter des architectures de tracking avancées, tout en respectant les exigences du RGPD. L’agence élabore un plan de marquage structuré dans GTM, adapté à vos objectifs et à vos contraintes techniques [7][3][5]. Elle intègre également des CMP comme Axeptio, configure le Consent Mode, et veille à ce que vos balises soient déclenchées uniquement après un consentement valide, en suivant les recommandations de la CNIL [1][6].
Grâce à son expertise en Webflow, UI/UX et développement web, Vanara ne se limite pas à optimiser votre tracking. L’agence analyse aussi les comportements des utilisateurs pour améliorer votre design et votre expérience globale. En complément, Vanara propose des ateliers de formation pour que vos équipes puissent maîtriser GTM, sécuriser les balises et interpréter les données de manière autonome, réduisant ainsi votre dépendance à des prestataires externes [4][10].
How to install Google Tag Manager on Webflow
FAQs
Pourquoi intégrer manuellement Google Tag Manager sur un site Webflow ?
L'installation manuelle de Google Tag Manager (GTM) sur un site Webflow offre une grande liberté et un contrôle détaillé sur la gestion des balises. Cette méthode permet de rationaliser le suivi des données tout en ouvrant la porte à des options de personnalisation avancées, adaptées aux besoins spécifiques de votre site.
En procédant ainsi, vous pouvez également améliorer les performances globales de votre site. Cela passe par l'élimination des scripts superflus et un suivi plus précis des interactions des utilisateurs.
Comment garantir la conformité de Google Tag Manager avec le RGPD en France ?
Pour que Google Tag Manager (GTM) soit conforme au RGPD en France, il est indispensable d’obtenir le consentement explicite des utilisateurs avant de collecter leurs données personnelles. Cela passe généralement par une bannière ou une fenêtre de consentement qui respecte les exigences légales.
Il est également essentiel de configurer GTM de manière à désactiver tout suivi tant que le consentement n’a pas été accordé. Enfin, une politique de confidentialité claire, facilement accessible, doit être mise en place pour expliquer aux visiteurs comment leurs données seront utilisées.
Quelles erreurs faut-il éviter lors de l'intégration de Google Tag Manager sur un site Webflow ?
Lorsque vous intégrez Google Tag Manager (GTM) à un site Webflow, certaines erreurs peuvent limiter son efficacité. Voici les pièges les plus fréquents et comment les éviter :
- Ne pas tester les balises avant publication : Avant de publier, utilisez le mode aperçu de GTM pour vérifier que chaque balise fonctionne correctement. Cela permet d’identifier et de corriger les éventuels problèmes avant qu’ils n’affectent vos utilisateurs.
- Oublier de publier les modifications des conteneurs : Chaque fois que vous modifiez un conteneur GTM, n’oubliez pas de le publier pour que les mises à jour soient actives sur votre site. Sinon, vos nouvelles balises ou ajustements resteront inactifs.
- Négliger les tests sur plusieurs navigateurs et appareils : Assurez-vous que votre site fonctionne sans accroc sur différents navigateurs (Chrome, Firefox, Safari, etc.) et appareils (ordinateurs, tablettes, smartphones). Cela garantit une expérience utilisateur fluide pour tous vos visiteurs.
- Mauvaise gestion de la hiérarchie des balises : L'ordre d’exécution des balises est crucial. Configurez vos déclencheurs avec soin pour éviter les conflits ou les erreurs dans la collecte de données.
En prenant ces précautions, vous optimiserez l’utilisation de GTM sur votre site Webflow et éviterez des erreurs qui pourraient nuire à vos performances.