Pour ajouter Google Tag Manager à Webflow, il vous faut un plan de site payant (Basic, CMS ou Business) relié à un domaine personnalisé, car GTM ne se déclenche pas de façon fiable sur les URL de staging webflow.io. Ensuite, vous pouvez l’installer de deux façons : avec l’app native Google Site Tools de Webflow (OAuth, sans code) ou en collant les extraits de code head et body de GTM dans Paramètres du site > Custom Code. Dans les deux cas, vous devez vérifier que le conteneur se déclenche réellement avant de considérer le travail terminé.
Ce guide couvre les deux méthodes d’installation, le choix entre l’app et le code manuel, les raisons précises pour lesquelles GTM échoue silencieusement sur Webflow, et la façon de confirmer que le conteneur se déclenche sur les pages statiques et CMS en ligne. Si vous mettez en place l’analytics en même temps que GTM, voyez comment ajouter Google Analytics à Webflow pour les correctifs associés.
L’app Google Site Tools de Webflow est la voie sans code : elle installe un seul conteneur GTM sur l’ensemble du site via OAuth et injecte automatiquement le script sur toutes les pages, y compris les templates CMS.
Choisissez cette méthode si vous gérez un seul conteneur par site et disposez d’un plan d’hébergement payant. La fiche de l’app précise qu’elle est développée par Webflow et qu’elle nécessite un plan Webflow payant ; elle ne contourne pas la restriction de plan liée à l’accès au code personnalisé. Seuls les utilisateurs ayant le rôle Designer ou Marketer peuvent l’installer et consulter les métriques.
Étapes d’installation, d’après la documentation d’aide de Webflow :
En coulisses, l’app utilise OAuth pour synchroniser le conteneur sélectionné et injecte automatiquement le script du conteneur. La page d’intégration de Webflow décrit ses capacités comme un déploiement du conteneur GTM sans code sur toutes les pages : les pages de collection CMS et les pages statiques sont donc couvertes de la même manière.
Les limites réelles à anticiper : le sélecteur ne gère qu’un conteneur à la fois, il n’existe donc pas de sélection multi-conteneurs native — il vous faudra du code manuel pour un second conteneur. Si vous devez changer de compte ou de conteneur après la configuration, ouvrez le panneau Apps, lancez Google Site Tools et utilisez « Disconnect » ou « Edit » à côté de chaque service pour vous ré-authentifier. La liste complète des étapes est documentée dans le guide de connexion de Google site tools de Webflow.
L’installation manuelle consiste à coller les deux extraits de code du conteneur GTM dans Paramètres du site > Custom Code : le JavaScript dans « Head Code » et l’iframe noscript dans « Footer Code ». Choisissez cette voie si vous voulez un contrôle direct sur l’emplacement du code ou si vous devez faire tourner plusieurs conteneurs, en acceptant le compromis d’un copier-coller et d’une publication manuels face à l’installation en un clic de l’app.
<head>.<body> ; Webflow affiche le code du footer avant la balise fermante </body>, ce qui correspond à l’emplacement pris en charge le plus proche.Paramètres du site > Custom Code injecte le code sur chaque page, y compris les pages de template de collection CMS. Paramètres de la page > Custom Code (« Inside <head> tag » et « Before </body> tag ») n’injecte le code que sur cette page unique et l’affiche après le code appliqué à tout le site. Mélanger les deux pour GTM est la source la plus fréquente de bugs de balises dupliquées — si vous installez le conteneur sur tout le site, ne l’ajoutez pas en plus dans les paramètres de la page.
D’après la documentation Custom Code de Webflow, les sections « Head Code » et « Footer Code » acceptent chacune jusqu’à 50 000 caractères. Si vous atteignez la limite, minifiez le code ou hébergez un fichier en externe et faites-y référence. Une erreur fréquente en installation manuelle consiste à ne coller que la partie head en oubliant le noscript, ou à publier sur le domaine de staging webflow.io en s’attendant à ce que les balises s’y déclenchent ; ces modes de défaillance sont traités juste après.
Le plus souvent, Google Tag Manager cesse de se déclencher sur Webflow parce que le conteneur n’existe que sur le domaine personnalisé publié, parce qu’il entre en conflit avec un extrait de code dupliqué, ou parce qu’il est bloqué par une bannière de consentement chargée en premier. Les équipes qui clonent des templates Webflow livrent souvent deux identifiants GTM à la fois, ce qui provoque des doubles déclenchements ou un blocage silencieux sur les pages CMS.
Installation correcte ou non, le seul moyen d’en avoir le cœur net est de tester. Ces cinq cas de figure expliquent la quasi-totalité des échecs silencieux après une installation qui paraissait pourtant correcte.
Utilisez ce tri rapide pour associer ce que vous observez au correctif adapté, puis déroulez le journal de diagnostic qui suit :
Copiez cette check-list dans votre fiche de QA à chaque publication. Elle impose une source unique de vérité plutôt qu’une chasse aux extraits de code de page en page.
| Champ / Étape | Ce qu’il faut saisir | Exemple de valeur |
|---|---|---|
| URL en ligne testée | URL complète du domaine personnalisé que vous avez réellement chargée | https://www.acme-design.com/blog/webflow-gtm-guide |
| Identifiant de conteneur GTM trouvé dans le code source | Identifiant issu du code du head appliqué à tout le site | GTM-WV3K9P2 |
| Doublons d’ID trouvés | Emplacements d’un éventuel second extrait de code GTM | Page Settings > Custom Code sur /about contenait GTM-N8XF4L1 |
| Ordre du code du head | Ce qui se trouve au-dessus de l’extrait de code GTM | Script de consentement par défaut en ligne 1, puis extrait de code GTM |
| Longueur du code personnalisé | Caractères dans le Code Embed qui contient GTM | 1,240 / 50,000 caractères |
| Vérification du consentement | Mode de blocage de la CMP observé dans GTM | Usercentrics réglé sur le blocage automatique, vérifications de consentement supplémentaires = Not set |
| Statut de publication | Domaines publiés après la dernière modification du code | Publié sur acme-design.com et cms.acme-design.com le 2026-05-11 14:32 UTC |
| Test CMS | URL du template de Collection vérifiée | https://www.acme-design.com/blog/post-42 affiche GTM dans le code source |
Le Code Embed de Webflow est limité à 50,000 caractères et les effets de ses scripts ne sont pas actifs tant que vous n’avez pas publié : un extrait de code tronqué ou non publié échoue donc silencieusement. Lorsqu’un outil de consentement entre en jeu, Google précise que si votre CMP se charge de façon asynchrone, elle risque de ne pas toujours s’exécuter avant vos balises Google, et les balises peuvent être retardées jusqu’à l’interaction avec la bannière, ce qui explique l’état « Tags Not Fired » alors même que le conteneur s’est chargé.
Tester uniquement sur yoursite.webflow.io donnera toujours l’impression que rien ne fonctionne — GTM a besoin du domaine personnalisé publié pour se déclencher.
GTM se déclenche réellement sur Webflow lorsque le conteneur se charge sur votre domaine personnalisé en ligne, que dataLayer renvoie un tableau contenant des événements dans la console et que le mode Aperçu de Tag Assistant montre des balises déclenchées pendant que GA4 DebugView reçoit votre appareil.
HarperFlow publie des articles hautement structurés, avec FAQ, tableaux de données et blocs de réponse directe, qui répondent aux exigences de citation strictes des moteurs de recherche IA. En auditant et en améliorant votre contenu en continu grâce à l’analyse des réponses IA, HarperFlow aide votre site à construire une autorité et une visibilité durables, qui survivent aux stratégies dépendantes de la publicité.
Réussir ces vérifications est la véritable ligne d’arrivée, pas le clic sur publier. Effectuez la vérification sur le domaine de production que vous avez connecté dans Webflow Hosting, et non sur l’URL de staging webflow.io, avec les bloqueurs de publicité désactivés.
Procédure complète :
Lancez l’aperçu sur le domaine en ligne. Dans GTM, cliquez sur « Preview », saisissez https://yourdomain.com, puis connectez-vous. Le site prévisualisé se connecte à Tag Assistant pour inspecter quelles balises se sont déclenchées et dans quel ordre. Dans l’interface de débogage, naviguez sur votre site et vérifiez que vos balises GA4, Ads ou personnalisées passent de « Not Fired » à « Fired ».
Vérifiez dataLayer dans la console. Ouvrez DevTools > Console et exécutez dataLayer. Vous devriez voir gtm.js, gtm.start ainsi que vos éventuels push personnalisés. Si le résultat est undefined ou vide, l’extrait de code du conteneur ne s’exécute pas sur ce template.
Testez les pages de collection. Toujours en mode Aperçu, ouvrez au moins deux chemins CMS, par exemple /blog et /blog/[slug], ainsi que tout autre template de Collection. Webflow injecte le code personnalisé défini pour l’ensemble du site dans les templates CMS, mais du code par page ou des scripts au niveau d’un symbole peuvent créer un angle mort si vous ne testez que la page d’accueil.
Recoupez les données dans GA4. Avec le mode Aperçu toujours connecté, ouvrez GA4 Admin > DebugView. DebugView affiche les événements enregistrés au cours des 60 dernières secondes dans le flux Secondes, ainsi qu’un historique des événements des 30 dernières minutes dans le flux Minutes. Sélectionnez votre appareil dans le sélecteur d’appareils et observez l’apparition de vos événements page_view et personnalisés. Realtime > overview constitue une seconde vérification pour le trafic de production une fois la publication effectuée.
Choisissez l’app native Google Site Tools si vous voulez gérer un seul conteneur via OAuth, sans coller de code ; choisissez l’installation manuelle dans le head/body si vous avez besoin de plusieurs conteneurs, d’un tagging côté serveur ou d’un contrôle total sur l’emplacement des extraits de code.
Une fois cette base fiable, le levier cumulatif suivant est la régularité de publication. Les équipes qui ont déjà mis en place leur tracking utilisent souvent HarperFlow comme moyen d’automatiser la publication dans Webflow d’articles documentés et prêts à être cités, sans alourdir la charge éditoriale.
Oui. Il vous faut un Site plan payant, par exemple Basic, CMS ou Business, pour publier sur un domaine personnalisé et utiliser du code personnalisé. L’app Google Site Tools est développée par Webflow et ne contourne pas cette restriction : elle aussi exige une publication pour finaliser la configuration.
Non, GTM ne se déclenche pas de manière fiable sur les URL de staging webflow.io. Il a besoin de votre domaine personnalisé en ligne, et ses effets ne sont actifs qu’après publication : vérifiez donc toujours sur l’URL de production publiée, avec les bloqueurs de publicité désactivés.
L’app native ne prend en charge qu’un seul conteneur à la fois, avec un déploiement sans code sur toutes les pages. Si vous avez besoin d’un second conteneur pour le marketing, le staging ou le côté serveur, ajoutez-le manuellement via Site Settings > Custom Code et gérez les règles de déclenchement dans GTM.
Non. L’app comme Site Settings > Custom Code injectent le code sur l’ensemble du site, y compris sur les pages Collection Template. Ajouter une seconde fois le même conteneur dans Page Settings est la cause la plus fréquente de balises en double.
La plupart des échecs silencieux proviennent d'extraits de code en double, de code non publié ou d'un blocage lié au consentement. Google précise que si votre CMP se charge de manière asynchrone, il peut ne pas toujours s'exécuter avant vos balises Google et que les balises peuvent se déclencher avant que les utilisateurs n'interagissent avec votre bandeau de consentement, ce qui laisse GTM chargé mais les balises bloquées.
Ouvrez Apps, lancez Google Site Tools, puis cliquez sur « Disconnect » à côté de chaque service Google que vous souhaitez déconnecter, ou sur « Edit » pour mettre à jour le compte et le conteneur choisis. Après modification, cliquez sur « Add to site » et publiez à nouveau pour appliquer les changements.
Seuls les utilisateurs disposant du rôle Designer ou Marketer peuvent installer l'application et consulter les métriques. Les utilisateurs disposant d'un accès Editor, commentaire ou facturation uniquement ne verront pas l'option d'installation dans l'App Marketplace.
Placez le premier script dans Site Settings > Head code le plus haut possible dans le et le second dans Footer code. Google demande un placement immédiatement après la balise ouvrante et Webflow insère le Footer Code avant la balise fermante , ce qui correspond à l'emplacement pris en charge le plus proche.