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

Interface de Webflow Optimize affichant le tableau de bord d’analyse et les opportunités d’optimisation des conversions, avec suivi du trafic et des sources organiques.
Documentation
Webflow

Optimize by Webflow, l'outil de CRO boosté à l'IA pour les équipes marketing

Optimize by Webflow, l'outil de CRO boosté à l'IA pour les équipes marketing
Graphique de performance boursière d'Apple Inc. montrant les variations de prix intrajournalières et les données de marché dans une interface sombre.
Documentation
Développement

Pourquoi et comment intégrer des graphiques, tableaux et données financières sur votre site web ?

Pourquoi et comment intégrer des graphiques, tableaux et données financières sur votre site web ?
Projection du logo Digidop sur la façade d'un bâtiment dans une grande ville la nuit, symbolisant la visibilité de la marque.
Storytelling
Digidop

Était-ce une bonne idée (ou pas) d’appeler notre entreprise Digidop ?

Était-ce une bonne idée (ou pas) d’appeler notre entreprise Digidop ?

Transformez votre site web en un moteur de croissance.

Nous contacter