Intégrer la Google Tag Manager à votre site Webflow (nouvelle documentation)

Tutoriel
3 min
Publié le Jan 05, 2022
Dernière mise à jour le
Ecran d'ordinateur avec logo Google Tag Manager et le hashtag Webflow Tuto
Résumez cet article avec une IA
Points clés de l'article

Si vous utilisez plusieurs outils de tracking, d'analytics ou même une solution de cookie comme Axeptio sur votre site Webflow il peut être utile de tous les regrouper en un seul bout de code avec la Google Tag Manager.

Dans ce tutoriel guidé nous vous guidons pour intégrer une balise Google Tag manager sur votre site Webflow en quelques minutes seulement.

1. Ouvrir la documentation "Developers Google"

https://developers.google.com/tag-platform/tag-manager/web

Dans cette documentation vous trouverez les codes à copier et coller pour installer la GTM dans dans votre projet (compatible avec Wix, shopify, Wordpress, Webflow etc..)

2. Récupérer votre code de suivi

Votre ID Google Tag Manager se présente sur un format : GTM-XXXXXX

Vous pouvez le récupérer dans votre "Workspace" Google Tag Manager

3. Intégration du code dans Webflow

L'ajout de Google Tag Manager est un processus en deux étapes. L'étape 1 consiste à ajouter le code de suivi à tous les éléments "Head" de votre site via la section "Custom Code" dans les paramètres de Webflow sous l'onglet "Project Settings > Custom Code", puis l'étape 2 consiste à ajouter le code de suivi à toutes les pages de votre site via un élément <!-- fs-richtext-ignore --><embed>.

3.1 Intégration dans votre "Head Code"

Intégration du code de suivi GTM dans le head code de Webflow

⚠️ Attention :  Pensez à bien personnaliser le GTM-XXX par votre GTM ID ex : GTM-12345

3.2. Intégration avant <!-- fs-richtext-ignore --><body>

Intégration de l'embed Google tag Manager dans Webflow

Une fois l'embed intégré, placer le ensuite le plus haut possible dans votre navigator. Idéalement, juste après votre balise <!-- fs-richtext-ignore --><body>.

Pour accélérer le déploiement et simplifier la gestion de la balise, je vous encourage à transformer cet élément embarqué en un symbole, pour le dupliquer facilement sur toutes les pages de votre site web !

Comment créer et utiliser un symbol dans Webflow ? (Vidéo Youtube Tutoriel)

Bravo, vous avez installé votre balise

Et voilà ! (Si vous n'avez pas accès au mode designer de votre projet Webflow, faîtes appel à votre développeur). Vous pouvez maintenant suivre toute l'analytics de votre site web et centraliser toutes vos intégrations avec votre Google Tag manager !

Florian Bodelot
Florian Bodelot
Co-fondateur

Articles qui devraient vous intéresser

Entrée principale de VivaTech 2026 à Paris avec l’affiche officielle célébrant les 10 ans de l’événement, considéré comme le plus grand salon européen dédié à la technologie et à l’innovation.
Evénements

VivaTech : deux jours au coeur de la tech Européenne

VivaTech : deux jours au coeur de la tech Européenne
Vue générale de la scène de 2036 by Yuri & Neil, réunissant plus de 400 décideurs marketing autour du futur du rôle du CMO à l’ère de l’intelligence artificielle.
Evénements
IA

Retour sur notre participation à 2036, l’événement marketing des CMO par Yuri & Neil

Retour sur notre participation à 2036, l’événement marketing des CMO par Yuri & Neil
Participants networking during flowConf 2026 in Belgrade, a European conference focused on the future of web, Webflow, and AI, inside a modern industrial venue featuring “Future of Web Unpacked” banners.
Evénements

L’édition 2026 de la flowConf incarne bien le tournant de l’écosystème Web(flow) européen.

L’édition 2026 de la flowConf incarne bien le tournant de l’écosystème Web(flow) européen.

Transformez votre site web en un moteur de croissance.

Nous contacter