Tracker les formulaires Webflow avec Google Tag Manager

Les formulaires Webflow #

Si vous utilisez Webflow, il est très probable vous utilisiez l’élément Form Block pour créer vos formulaires.

Les formulaires créés avec Webflow sont difficiles à tracker avec les déclencheurs natifs de Google Tag Manager.

Je vais vous montrer comment tracker uniquement les envois valides d’un formulaire Webflow et également comment récupérer les données utilisateurs (comme par exemple l’adresse email) pour les transmettre aux plateformes publicitaires.

Installer le Webflow Form listener #

Pour écouter l’envoi d’un formulaire valide Webflow, vous devez ajouter ce code dans Google Tag Manager avec une balise HTML personnalisé.

<script>
  window.dataLayer = window.dataLayer || [];
  var origin_open = XMLHttpRequest.prototype.open;
  var origin_send = XMLHttpRequest.prototype.send;
  var form_data = "";

  XMLHttpRequest.prototype.send = function(body) {
    form_data = Object.fromEntries(new URLSearchParams(body));
    origin_send.apply(this, arguments);
  };

  XMLHttpRequest.prototype.open = function(method, url) {
    if(url.includes("/api") && url.includes("/form")) {
        this.addEventListener('loadend', function(event) {
            if(JSON.parse(event.currentTarget.response).msg ==   "ok") {
                var parameter_filter = ['name', 'fields'];
                for (key in form_data) {
                    if(!parameter_filter.some(function(prefix) { return key.startsWith(prefix) })) delete form_data[key];
                    if(!form_data[key]) delete form_data[key];
                    if(key.startsWith("fields")) { 
                        var new_key = transformField(key);
                        form_data[new_key] = form_data[key];
                        delete form_data[key];
                    };
                }
                delete form_data['cf-turnstile-response'];
                dataLayer.push({
                    event: "generate_lead",
                    form_data: form_data
                });
            }
        });
        origin_open.apply(this, arguments);
    }
  };

  function transformField(fieldString) {
    return fieldString.replace(/^fields\[(.+)]$/, '$1');
  }
  /*
  * v0.1.0
  * Created by Data Marketing School at http://www.data-marketing-school.com
  * Written by https://www.linkedin.com/in/lucasrollin/
  */
</script>

Exemple d’un envoi valide de formulaire #

Lors d’un envoi valide du formulaire Webflow, l’événement generate_lead est envoyé dans la Data Layer.

Créer les variables Data Layer correspondantes #

Le nom du formulaire #

Les champs de formulaires #

Ici vous devez créer une variable pour chaque champ de votre formulaire.

Si vous désirez changer les noms des champs, vous pouvez le faire dans Webflow.

Aller plus loin #

Vous pouvez transmettre les données utilisateurs collectées via votre formulaire Webflow aux plateformes publicitaires pour améliorer vos performances :

• Suivi avancé des conversions Google Ads avec Google Tag Manager