Pour ajouter Google Tag Manager à Webflow, il vous faut un forfait 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, deux méthodes d’installation s’offrent à vous : l’app native Google Site Tools de Webflow (OAuth, sans code) ou le collage des extraits de code head et body de GTM dans Site Settings > Custom Code. Dans les deux cas, vous devez vérifier que le conteneur se déclenche réellement avant de considérer le travail comme 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, découvrez comment ajouter Google Analytics à Webflow et 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 forfait d’hébergement payant. La fiche de l’app précise qu’elle est développée par Webflow et qu’elle exige un forfait Webflow payant ; elle ne contourne pas la restriction de forfait qui conditionne l’accès au code personnalisé. Seuls les utilisateurs ayant le rôle Designer ou Marketer peuvent l’installer et consulter les métriques.
Procédure 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 son script. 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 » en face de chaque service pour vous réauthentifier. La liste complète des étapes est documentée dans le guide de connexion Google site tools de Webflow.
L’installation manuelle consiste à coller les deux extraits de code du conteneur GTM dans Site Settings > 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 collage et d’une publication manuels face à l’installation en un clic de l’app.
<head>.<body> ; Webflow affiche le Footer Code avant la balise fermante </body>, ce qui est l’emplacement pris en charge le plus proche.Site Settings > Custom Code s’injecte sur chaque page, y compris les pages Template de collection CMS. Page Settings > Custom Code (Inside <head> tag et Before </body> tag) ne s’injecte que sur cette page précise et s’affiche après le code global du 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 l’ensemble du site, ne l’ajoutez pas aussi dans Page Settings.
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 votre code ou hébergez un fichier en externe et faites-y référence à la place. 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 cas d’échec sont détaillés juste après.
Si Google Tag Manager cesse de se déclencher sur Webflow, c’est le plus souvent 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’une bannière de consentement chargée avant lui le bloque. Les équipes qui clonent des templates Webflow déploient 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 en apparence correcte.
Utilisez ce tri rapide pour associer ce que vous observez au correctif adapté, puis remplissez le journal de diagnostic qui suit :
Copiez cette check-list dans votre feuille de QA à chaque publication. Elle impose une source unique de vérité au lieu d’une chasse aux extraits de code de page en page.
| Champ / Étape | Que 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 du conteneur GTM trouvé dans le code source | Identifiant issu du code head global du site | GTM-WV3K9P2 |
| ID en double détectés | Emplacement de tout 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 à la ligne 1, puis l’extrait de code GTM |
| Longueur du code personnalisé | Nombre de 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 actifs qu’une fois que vous publiez : 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 ne s’exécutera pas toujours avant vos balises Google et que 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 les balises déclenchées pendant que le DebugView de GA4 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 à bâtir une autorité et une visibilité durables, qui survivent aux stratégies dépendantes de la publicité.
Réussir ces vérifications, voilà la véritable ligne d’arrivée — pas le fait de cliquer 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 en webflow.io, avec les bloqueurs de publicités désactivés.
Procédure complète :
Prévisualisez sur le domaine en ligne. Dans GTM, cliquez sur « Preview », saisissez https://yourdomain.com et 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 dans 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, c’est que 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, comme /blog et /blog/[slug], ainsi que tout autre template de Collection. Webflow injecte le code personnalisé défini au niveau du site dans les templates CMS, mais du code ajouté par page ou des scripts au niveau des symboles 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 Seconds, 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 vos événements page_view et personnalisés apparaître. Realtime > overview constitue une seconde vérification pour le trafic de production une fois que vous avez publié.
Choisissez l’application native Google Site Tools si vous voulez gérer un seul conteneur via OAuth, sans coller de code ; optez pour l’installation manuelle dans le head et le 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 pour 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, comme Basic, CMS ou Business, pour publier sur un domaine personnalisé et utiliser du code personnalisé. L’application Google Site Tools est développée par Webflow et ne contourne pas cette restriction ; elle exige elle aussi que vous publiiez pour finaliser la configuration.
Non, GTM ne se déclenche pas de façon fiable sur les URL de staging en webflow.io. Il a besoin de votre domaine personnalisé en ligne, et ses effets ne sont actifs qu’une fois que vous publiez : vérifiez donc toujours sur l’URL de production publiée, avec les bloqueurs de publicités désactivés.
L’application 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’application comme Site Settings > Custom Code injectent le code sur l’ensemble du site, y compris sur les pages de template de Collection. Ajouter une nouvelle fois le même conteneur dans Page Settings est la cause la plus fréquente de balises en double.
La plupart des échecs silencieux viennent 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 façon asynchrone, il ne s'exécute pas toujours avant vos balises Google et que celles-ci peuvent se déclencher avant que les utilisateurs n'interagissent avec votre bannière de consentement : GTM est alors chargé, mais les balises restent 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 modifier le compte et le conteneur sélectionnés. 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'app et consulter les métriques. Les utilisateurs ayant un accès Editor, commentaire ou facturation uniquement ne verront pas l'option d'installation dans l'App Marketplace.
Placez le premier script dans Paramètres du site > Head code le plus haut possible et le second dans Footer code. Google demande un placement immédiatement après la balise ouvrante, et Webflow insère le Footer Code juste avant la balise fermante, ce qui constitue l'emplacement pris en charge le plus proche.