Installer Google Tag Manager (GTM) sur Webflow

Vous venez de tomber amoureux de Webflow mais… Drame… Vous venez également de réaliser qu’aucun système de tracking n’est présent sur l’outil ? Ou alors, vous avez un site qui commence à tourner pas mal mais vous vous demandez comment vous pourriez améliorer l’expérience de vos visiteurs en améliorant vos analytics ? Ça tombe bien, car il est possible d’installer Google Tag Manager sur Webflow pour bien comprendre ce que vos visiteurs font.

Vérifier si Google Analytics est déjà configuré sur le site

Avant de commencer une nouvelle configuration, assurez-vous de ne pas avoir de configuration Analytics et/ou GTM déjà présentes.

• Si une configuration GTM est déjà présente, assurez-vous de travailler depuis le même compte.
• Si Analytics est configuré en “dur” dans Webflow, on vous recommande de le supprimer - Webflow ne permet malheureusement pas de contrôler l’envoi des données utilisateurs correctement, ce qui peut s’avérer problématique pour le RGPD.

Vous souhaitez supprimer les configs ? Suivez le guide :

Google Tag Manager - qu’est-ce que c’est ?

Google Tag Manager (GTM) est un système de gestion des balises qui vous permet de :

• Collecter des données sur les interactions des utilisateurs
• Transmettre ces données à des outils comme Google Analytics, Meta Business, Google Ads
• Gérer vos balises sans toucher au code de votre site

C’est ce que l’on appelle un TMS (Tag management système - Ou système de gestion des balises). Pour faire simple, c’est un outil qui va vous permettre de collecter des informations sur vos utilisateurs, et notamment sur les interactions qu’ils effectuent sur votre site.

Pourquoi c’est cool ? Eh bien parce que cela va vous permettre de comprendre qui fait quoi sur votre site sans avoir à toucher à ton code :

• Quelle source de traffic génère le plus de vente ?
• Qui sont les visiteurs qui ont le panier moyen le plus élevé ?
• Combien de personnes ont cliqué sur ce bouton depuis cette page,
• etc.

Bon pour la partie “sans code”, vous verez plus bas qu’on y échappe difficilement… Mais c’est possible 🙂

Une fois les informations collectées, c’est également le GTM (Google Tag Manager) qui va vous permettre de les transmettre à Google Analytics, Meta Business, Google Ads. Au delà de la RGPD, c’est donc hyper pratique pour ne pas tout reconfigurer complètement à chaque fois.

Est-ce que je devrais installer le Google Tag Manager sur mon site Webflow ?

Je ne vais pas y aller par quatre chemins… OUI et surtout ne faites pas la même erreur que tous marketeurs qui pensent que le tracking Facebook suffit !!!

Bon je m’énerve un peu, mais comme vous l’imaginez… On m’a souvent répondu ça !

Voici les trois raisons qui devraient vous pousser à l’installer sur votre site :

1. Si vous ne disposez pas de système de gestion des balises et que vous utilisez Google Ads, ou Facebook pixel, etc.., vous êtes 100% dans l’illégalité 😱 Pour utiliser les données de vos utilisateurs, il est essentiel d’utiliser un outil de stockage des consentements comme Axeptio. Une fois les conditions acceptées, Axeptio donne l’autorisation au GTM de collecter les données.⇒ Voir notre article sur la configuration d’Axeptio sur Webflow
2. Ca évite de refaire les configurations 15 fois. Vous validez vos actions de conversions une seule fois. Plus besoin de passer des heures à s’assurer que les informations remontent bien à Facebook, puis à Google, puis … Une fois le taff fait une fois - ça fonctionnera pour tout le monde.
3. Ça permet de contrôler exactement ce qu’on envoie aux outils qui exploiteront la donnée. En poussant les limites de l’outil, vous serez capables d’attribuer chaque vente à 1 canal uniquement. (comprendre : Google Ads et Facebook ne vous diront pas avoir généré la même vente)

Comment installer Google Tag Manager sur Webflow ?

Ça y est, j’ai capté votre attention ? Passons à la configuration.

Étape 1 : Créez-vous un compte

1. Rendez vous sur https://tagmanager.google.com/;
2. Identifiez-vous via Google;
3. Cliquez sur le bouton “Créer un compte”;
4. Acceptez les conditions d’utilisation;

Étape 2 : Connecter le Google Tag Manager à votre site

1. Copiez le premier bout de code;
2. Rendez-vous sur votre Dashboard Webflow. N’allez pas trop vite, cliquez sur les trois petits points en bas à droite de l’image de votre site, puis sur setting;
3. Rendez-vous dans la section “Custom Code” et copiez le bout de code précédemment copié tout en haut du head code (si jamais vous avez du code dedans avant la configuration du GTM, pas de problème, mais assurez vous de le faire commencer APRES la balise du Google tag manager).
4. Enregistrer-les changement puis retourner sur Google tag manager pour copier le bout de code présent en bas de la popin
5. Rendez-vous sur le designer de votre site webflow;
6. Sélectionner l’embed dans la section “ajouter un élément” et positionnez-le le plus haut possible dans la structure de la page;
7. Collez le bout de code dans l’embed;
8. Créez un symbol pour copier facilement le bout de code et limiter le temps de maintenance.
9. ouvrez la rubrique symbol dans le menu latéral puis cliquez sur “Créer un symbol” sans avoir désélectionné l’embed.
10. Ajoutez le symbol sur toutes les pages de votre site (Statiques mais également les modèles de page CMS)
11. Une fois ajouté sur toutes les pages de votre site, il ne vous reste plus qu’à publier votre site (en préprod idéalement)

Étape 3 : Assurez-vous que votre site communique bien avec le Google Tag Manager

Essentiel pour ne pas perdre de temps ensuite (si jamais une config semble ne pas fonctionner 😉)

• Retournez sur la page du google tag manager et appuyez sur OK,
• Cliquez ensuite sur prévisualiser
• Inscrivez le nom de domaine de votre site puis cliquez sur Connect
• Une fenêtre devrait s’ouvrir (ou un onglet) sur votre page d’accueil;
• Si la fenêtre GTM n’affiche pas ça après avoir naviguez sur votre site, c’est que tout est dans l’ordre (n’hésitez pas à regarder la vidéo plus haut pour le voir en image)

Mises à jour 2024 pour l'installation de Google Tag Manager sur Webflow

Nouvelles réglementations et consentement V2

1. Consentement V2 et RGPD

Depuis [insérer la date exacte], Google a introduit le Consentement V2 pour se conformer aux réglementations de protection des données, notamment le RGPD en Europe. Voici ce que vous devez savoir :

• Le Consentement V2 permet une gestion plus granulaire du consentement des utilisateurs.
• Il est désormais obligatoire de collecter le consentement explicite des utilisateurs avant d'activer certains tags.

2. Configuration du Consentement V2 dans GTM

Pour configurer le Consentement V2 dans Google Tag Manager :

1. Allez dans "Administration" > "Paramètres du conteneur".
2. Activez "Consentement Overview" et "Consentement Mode".
3. Définissez les types de consentement que vous souhaitez gérer (analytics, publicité, etc.).

3. Intégration avec Axeptio ou autre CMP

Pour une gestion conforme du consentement :

1. Intégrez un outil de gestion du consentement (CMP) comme Axeptio.
2. Configurez votre CMP pour qu'il communique avec GTM via les API de consentement.
3. Assurez-vous que les tags ne se déclenchent qu'après l'obtention du consentement approprié.

Nouvelles fonctionnalités GTM pour Webflow

1. Déclencheurs personnalisés

GTM propose maintenant des déclencheurs plus avancés, particulièrement utiles pour les sites Webflow :

• Déclencheurs basés sur la visibilité des éléments.
• Déclencheurs de scrolling améliorés.

2. Intégration améliorée avec Google Analytics 4

La configuration de GA4 via GTM sur Webflow est désormais plus simple :

1. Utilisez le modèle de configuration GA4 dans GTM.
2. Activez le tracking amélioré des événements e-commerce pour Webflow.

Bonnes pratiques mises à jour

1. Performance : Utilisez le chargement différé des scripts non essentiels pour améliorer les performances du site.
2. Sécurité : Activez les paramètres de sécurité renforcée dans GTM pour prévenir les injections de code malveillant.
3. Test : Utilisez le mode debug amélioré de GTM pour tester vos configurations sur les sites Webflow avant publication.

‍