Partie 1 : créez un conteneur Google Tag Manager, installez-le dans Webflow avec le code du head et un embed dans le body, puis testez-le. La partie 2 ajoute Google Analytics 4.
Mise à jour, octobre 2026 : Google a changé plusieurs choses depuis que nous avons écrit cet article. Universal Analytics a cessé de traiter des données en juillet 2023 et Google Optimize a été arrêté en septembre 2023 ; si vous les voyez dans les captures d'écran ci-dessous, vous n'en aurez donc pas besoin. L'extension Chrome Tag Assistant que nous utilisons pour les tests a depuis été fusionnée en une seule extension, simplement appelée Tag Assistant, sur le même lien du Chrome Web Store. Les étapes ci-dessous fonctionnent toujours, mais Webflow a depuis ajouté un paramètre natif pour la balise Google dans Site settings, Apps & Integrations, et Webflow suggère de migrer les balises Google codées à la main vers ce paramètre (voici leur article à ce sujet). Webflow indique que vous pouvez y connecter votre balise Google ou Google Tag Manager, cela vaut donc le coup d'œil si vous préférez éviter le code. Nous n'avons pas testé cette voie nous-mêmes ; la méthode du code dans le head et de l'embed dans le body que nous présentons ci-dessous est celle dont nous savons qu'elle fonctionne. Si vous préférez exécuter vos balises en périphérie, jetez un œil à notre guide sur Cloudflare Zaraz et Google Analytics 4 sur Webflow.
Webflow est généralement la solution no-code idéale pour concevoir un site rapidement et facilement, et j'oserais même dire pour le développer, mais installer correctement Google Tag Manager peut tenir un peu du bricolage. Webflow nous a malheureusement laissé un moyen rapide, mais pas robuste, d'ajouter GA à votre projet. Il n'y a rien de mal à cela, et si tout ce dont vous avez besoin est d'ajouter Google Analytics, alors suivez simplement leur guide. Si vous avez besoin de quelque chose de plus souple, pour ajouter non seulement Google Analytics, mais aussi le suivi des conversions, les publicités, les réseaux sociaux, etc., Tag Manager est la solution.
Aujourd'hui, nous allons vous présenter la solution la plus simple pour mettre en place Tag Manager le plus vite possible, tout en ayant un fonctionnement à 100 %. Milk Moon Studio est un petit studio Webflow axé sur le design ; pour nous, une solution low-code est donc le moyen le plus simple d'y parvenir avec le moins d'effort possible. Utiliser Tag Manager évite d'avoir une pile de scripts de suivi et de conversion dans le <head> du projet, qu'il faudrait gérer et maintenir. Avec cette approche, vous ajoutez le script Tag Manager, et à partir de là, vous gérez tout le reste dans Tag Manager. Propre et ordonné, exactement comme un designer Webflow aime que les choses soient.
Mais commençons par le commencement :
Créer un conteneur Tag Manager
Si vous ne l'avez pas encore fait, nous allons vous guider rapidement. (Nous avons publié un article à part expliquant pourquoi utiliser Tag Manager plutôt que la simple installation de Google Analytics en collant le code de suivi GA UA dans Webflow, ainsi que sur une multitude d'autres avantages de Tag Manager : pourquoi utiliser Google Tag Manager dans Webflow.)
Étape 1 : créer un compte Tag Manager
Cette partie est super facile. Inscrivez-vous à Tag Manager et cliquez sur Create Account.
Donnez un nom au compte, sélectionnez le pays, indiquez votre URL et cliquez sur Web.
Après avoir accepté le contrat d'utilisation, vous arriverez aux instructions d'installation. La première partie se résume à un copier-coller, mais la seconde, qui va dans la balise <body>, sera un peu plus délicate.
Étape 2 : installer Tag Manager dans Webflow
Une fois arrivé à l'écran ci-dessus, copiez le code qui va dans le <head> et rendez-vous sur la page des paramètres de votre projet Webflow.
Dans les paramètres, ouvrez Custom Code, collez le code du conteneur Tag Manager dans la section Head Code et enregistrez. Cette étape est simple comme bonjour.
Direction ensuite le Designer. Ajoutez un nouvel HTML Embed.
Collez le second morceau de code de Tag Manager, celui qui est censé aller dans le <body>. Enregistrez et fermez.
Nous vous recommandons d'en faire un Symbol / Component, car vous allez le réutiliser sur chaque page de votre projet Webflow.
Une fois transformé en Symbol, faites-le glisser tout en haut pour qu'il se place juste sous votre élément Body. Il doit toujours se trouver tout en haut de la liste d'éléments de chaque page.
Et voilà. Tag Manager est maintenant solidement intégré à votre projet Webflow. Pensez simplement à vérifier qu'il se trouve tout en haut de chaque page dans la liste d'éléments du Navigator, et à publier le conteneur dans Tag Manager avant de publier votre projet Webflow. Votre code dans le <head> fait le gros du travail. Le code de votre symbol est la solution de repli noscript, qui ne s'active que pour les visiteurs dont JavaScript est désactivé.
Mais ce n'est pas tout :
Étape 3 : les tests
Naturellement, vous voulez vous assurer que Tag Manager est bien installé, alors testons.
Vous allez devoir installer cette extension pour Chrome (désolé pour les utilisateurs de Safari).
Assurez-vous d'avoir publié Tag Manager puis Webflow, et rendez-vous maintenant sur votre site.
Ouvrez l'extension et cliquez sur Enable.
Cela fait, actualisez la page (commande+R).
L'extension devrait maintenant afficher un petit chiffre (il varie selon le nombre de balises chargées) :
Vous remarquerez que la mienne en affiche quatre. Le numéro 4 est mon conteneur Tag Manager ; la partie floutée est l'ID de mon conteneur, qui doit correspondre à mon conteneur dans Tag Manager lui-même.
Le n° 1 est ma balise Google Analytics 4, le n° 2 est mon ancienne balise Google Analytics (Universal Analytics), et le n° 3 est Google Optimize. Nous avons des articles sur leur configuration dans Tag Manager, dont ajouter des analyses comportementales gratuites avec Tag Manager et Microsoft Clarity, alors ne vous inquiétez pas : si vous venez de créer votre conteneur, vous n'en verrez aucune.
Mais voilà, c'est terminé, bravo, vous avez installé Google Tag Manager dans Webflow. Petite remarque : ne vous inquiétez pas du petit visage bleu triste à côté du conteneur Tag Manager, c'est simplement parce qu'il s'agit d'une implémentation non standard de Tag Manager. Malheureusement, c'est à peu près ce que l'on peut faire de mieux : tant que Webflow ne change pas les choses, vous ne verrez pas de smiley vert, mais tout fonctionne très bien, croyez-nous.
Dans la partie 2 de cette série, nous verrons comment configurer Google Analytics dans Tag Manager. Vous trouverez la partie 2 ici. Vous pouvez aussi consulter comment lier votre compte GA4 à BigQuery ici et un guide pour accélérer votre site grâce aux balises différées ici.
Questions fréquentes
Comment ajouter Google Tag Manager à Webflow ?
Créez un conteneur Tag Manager, collez le premier extrait dans Site settings (appelé Project settings à l'époque où nous avons écrit cet article), Custom code, Head code, puis ajoutez le second extrait dans un HTML Embed tout en haut de chaque page, juste sous l'élément Body. Publiez ensuite le conteneur dans Tag Manager avant de publier votre projet Webflow. Les étapes 1 et 2 ci-dessus vous guident pas à pas.
Où placer le code body de Google Tag Manager dans Webflow ?
Dans un HTML Embed placé tout en haut de chaque page, sous votre élément Body dans le Navigator. Nous transformons cet embed en Symbol / Component pour pouvoir le réutiliser sur chaque page. Il contient la version noscript du conteneur, qui ne s'exécute que pour les visiteurs dont JavaScript est désactivé ; c'est le code du head qui fait le vrai travail.
Comment ajouter Google Analytics 4 à Webflow avec Tag Manager ?
Installez d'abord le conteneur, comme ci-dessus, puis ajoutez votre balise Google Analytics 4 dans Tag Manager. Nous le détaillons dans la partie 2, ajouter Google Analytics à Webflow avec Tag Manager. Si Analytics est tout ce dont vous avez besoin, la configuration Google Analytics native de Webflow est plus rapide, mais Tag Manager est plus flexible dès que vous ajoutez le suivi des conversions, les publicités ou les réseaux sociaux.
Pourquoi Tag Assistant affiche-t-il un visage bleu triste à côté de mon conteneur ?
Parce qu'il s'agit d'une implémentation non standard de Tag Manager, et que Webflow ne nous permet pas de la faire de la façon standard. Tout fonctionne quand même très bien.
Si vous avez des questions, écrivez-nous dans les commentaires, et n'oubliez pas de consulter la section How-To de notre blog pour d'autres tutoriels.
Mise à jour Nous avons ajouté du contenu vidéo en haut de l'article pour faciliter le suivi pas à pas ; nous espérons que cela vous aidera. Abonnez-vous à la chaîne pour rester au courant de nos derniers tutoriels et contenus mis à jour.
