Tracking Webflow avec GA4 : GTM, formulaires et Consent Mode v2

Sur Webflow, le tracking GA4 se fait soit par l’intégration native Google Analytics, soit par GTM, mais pas les deux à la fois. Le vrai travail porte sur les formulaires, qui ne rechargent pas la page, et sur le consentement, car les outils de bandeau n’ont pas tous la même maturité. Cette fiche couvre les points de réglage, les pièges et une méthode de recette, et renvoie vers le consultant lead generation si vous voulez un setup complet.

Où placer le code

Webflow accepte du code personnalisé à deux endroits, au niveau du site entier : Site settings > Custom code, avec une zone Head code et une zone Footer code. Chacune accepte jusqu’à 50 000 caractères, selon l’aide officielle Custom code in head and body tags. Les modifications apparaissent dans l’aperçu mais ne sont en ligne qu’après publication.

Pour GTM, le snippet officiel de chargement va dans le Head code. Le snippet noscript se place juste après l’ouverture de la balise body, ce qui exige un réglage à part : vérifiez-le dans la documentation GTM avant publication.

GA4 natif ou GTM : choisissez une seule voie

L’intégration native se configure dans Site settings > Integrations > Google Analytics. Elle n’accepte que les identifiants de mesure GA4 (préfixes G-, GT-, AW- ou GTM-). L’aide Webflow recommande de ne placer le tag Google qu’à un seul endroit, soit le champ d’intégration, soit le Head code. Si vous installez GTM et que GA4 est aussi configuré en natif, vous risquez les doubles envois.

Mon choix par défaut : GTM, car il permet de piloter les formulaires, les clics et le consentement sans republier le site à chaque modification. Le natif reste acceptable pour une vitrine sans besoin d’événements avancés. Sachez enfin que l’app Google site tools relie GA4, Tag Manager et Search Console ; si vous l’utilisez, retirez l’intégration native.

Le dataLayer sur Webflow

Webflow ne pousse pas de dataLayer par défaut. Trois sources de données sont exploitables.

• Attributs personnalisés : vous pouvez porter une information sur un élément (data- attributes), puis la lire dans un listener GTM ou un script.
• Collections CMS : les champs (nom d’article, catégorie, auteur) s’injectent dans les templates de pages. Ils permettent de qualifier les événements de lecture ou de clic par contenu.
• Interactions : les interactions Webflow déclenchent des animations, pas des événements analytics. Pour mesurer un clic, écoutez l’événement dans GTM plutôt que de compter sur l’interaction.

Formulaires natifs : mesurer le succès, pas le clic

Un formulaire Webflow envoie ses données sans recharger la page. Un déclencheur sur le clic du bouton compte donc les tentatives, pas les envois réussis : erreurs de validation et champs vides sont comptés comme des leads. Le bon signal est l’affichage du message de succès. Le code ci-dessous observe le bloc .w-form-done et pousse generate_lead quand il devient visible. Le mécanisme exact (style ou classe) peut varier selon la version du site : testez-le en navigateur avant de le publier.

<script>
window.dataLayer = window.dataLayer || [];
document.querySelectorAll('.w-form').forEach(function (wrap) {
  var done = wrap.querySelector('.w-form-done');
  var form = wrap.querySelector('form');
  if (!done || !form) return;
  var observer = new MutationObserver(function () {
    if (getComputedStyle(done).display !== 'none') {
      window.dataLayer.push({
        event: 'generate_lead',
        form_name: form.getAttribute('name') || form.id || 'webflow_form'
      });
      observer.disconnect();
    }
  });
  observer.observe(done, { attributes: true, attributeFilter: ['style', 'class'] });
});
</script>

Ce script ne gère pas les envois multiples sans rechargement. Si vos formulaires sont soumis plusieurs fois sur une même page, ajoutez un contrôle d’identifiant pour éviter les doublons. Pour comprendre comment ce type d’événement transite par le dataLayer, lisez le glossaire data layer et la FAQ GTM sur le data layer.

Consent Mode v2

Le consentement doit être en place avant que GTM n’envoie quoi que ce soit. Sur Webflow, trois situations se rencontrent.

• Finsweet Cookie Consent : les discussions de la communauté indiquent que l’intégration Consent Mode est en cours d’ajout. Vérifiez l’état actuel dans la documentation Finsweet avant de compter dessus. Les contournements proposés, qui consistent à copier des identifiants d’éléments dans le bandeau, sont fragiles.
• Consent Pro by Finsweet : l’application est présentée comme compatible Consent Mode v2, avec un modèle GTM. La configuration demande tout de même des réglages supplémentaires.
• Cookiebot, Axeptio et autres CMP : ils s’installent dans le Head code avant GTM. L’ordre compte : l’état denied par défaut doit précéder le conteneur.

Le piège le plus courant reste le double bandeau : une CMP injectée à deux endroits affiche deux fois la même question. Testez en navigation privée, consentement accepté puis refusé, et vérifiez les requêtes dans les DevTools. Lisez Consent Mode v2 en pratique et le comparatif des CMP pour le détail.

E-commerce sur Webflow

Webflow propose une boutique intégrée avec son propre tunnel de paiement. L’accès aux étapes du checkout pour pousser des événements est limité, et je ne peux pas garantir un tracking complet du tunnel sans vérifier votre formule, car ces capacités évoluent. Pour un catalogue dense et un besoin de mesure fine du panier et du paiement, une plateforme dédiée comme Shopify ou Magento offre plus de prise. La fiche Shopify et le hub des plateformes servent de points de comparaison.

Performance

Chaque script tiers ajoute du poids et de la latence. Sur Webflow, un GTM plus une CMP, plus un outil de heatmap, plus une application de chat peuvent ralentir la page de façon visible. Gardez un seul conteneur GTM, chargez les outils non essentiels après consentement, et mesurez l’effet avant et après avec les données de performance de Search Console.

Recette

1. Vérifiez qu’un seul chemin envoie GA4 : natif ou GTM.
2. Soumettez chaque formulaire avec des données valides, puis avec des champs vides, et vérifiez qu’un seul generate_lead part.
3. Testez le consentement accepté puis refusé, en navigation privée et sur mobile.
4. Contrôlez les événements dans GA4 DebugView, en filtrant par l’identifiant de session.
5. Publiez, puis refaites un test sur le site en production, pas seulement sur l’aperçu.

Foire aux questions

Puis-je utiliser à la fois GA4 natif et GTM ?

Non, pas sans risque de doublon. Choisissez l’un des deux. Si GTM est en place, le tag GA4 se configure dans le conteneur.

Les formulaires Webflow sont-ils mesurables sans code ?

Partiellement. Un déclencheur de soumission de formulaire peut compter les tentatives. Pour compter les succès, il faut observer le message de confirmation, comme dans l’extrait ci-dessus.

Peut-on mesurer les collections CMS ?

Oui, à condition d’exposer les champs utiles dans des attributs de données et de les lire dans GTM. Sans cette étape, les événements ne portent pas de contexte exploitable.

Sources

• Webflow, ajouter du code personnalisé dans les balises head et body
• Webflow, connecter un site à Google Analytics