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

Illustration abstraite minimaliste inspirée de Webflow, avec des formes géométriques bleues et blanches sur fond noir représentant l’évolution du pricing et la stratégie enterprise et IA de Webflow en 2026.
News
Webflow

Webflow change son pricing en 2026 : ce qu’il faut comprendre

Webflow change son pricing en 2026 : ce qu’il faut comprendre
Miniature de live montrant deux hommes au centre, avec les logos Webflow (fond bleu) et Claude (fond orange) en arrière-plan, un badge “LIVE” en haut à gauche et le texte “Webflow + Claude” en bas.
Documentation
IA

Webflow x Claude : le récap complet de notre live

Webflow x Claude : le récap complet de notre live
Résultat du score Agent Readiness pour Digidop affichant un score de 100 et un niveau agent native
Tutoriel
IA

Votre site est-il prêt pour les agents IA ?

Votre site est-il prêt pour les agents IA ?

Transformez votre site web en un moteur de croissance.

Nous contacter