Comment tracker les formulaires Elementor de son site web ?

Introduction au tracking des formulaires de son site WordPress

Le suivi des conversions sur un site WordPress propulsé par Elementor est indispensable pour toute stratégie de marketing digital efficace. Cet article vous propose une méthode complète pour tracker les formulaires Elementor grâce aux paramètres UTM, à l’enregistrement des données dans Google Sheets et à des tests fiables de fonctionnement. Vous y trouverez également un script avancé pour capturer les données UTM via les cookies, sans plugins.

Pourquoi tracker les formulaires Elementor ?

Les formulaires sont souvent le point de contact principal entre vos visiteurs et votre entreprise. Tracker ces formulaires vous permet de :

• Savoir quelle campagne a généré un lead
• Mesurer la performance vos campagnes (Email, Réseaux sociaux, Ads, SEO..)
• Optimiser vos pages de destination (landing pages)
• Alimenter automatiquement votre CRM avec des données précises

1. Mise en place du tracking UTM dans les formulaires Elementor

Nous allons capturer les paramètres UTM même si l’utilisateur change de page avant de soumettre le formulaire. Pour cela, deux étapes sont nécessaires :

1. Ajouter un script JavaScript dans Elementor (ou via un thème enfant)
2. Configurer les champs cachés dans le formulaire Elementor

Étape 1 : Ajouter le script JavaScript dans Elementor

Allez dans Elementor > Code personnalisé > Nouveau code
</body> – End

<script>
window.addEventListener('load', function () {
  var queryForm = function(settings) {
    var reset = settings && settings.reset ? settings.reset : false;
    var self = window.location.toString();
    var querystring = self.split("?");

    // Étape 1 : Traiter les UTM classiques si présents
    if (querystring.length > 1) {
      var pairs = querystring[1].split("&");
      for (i in pairs) {
        var keyval = pairs[i].split("=");
        if (reset || sessionStorage.getItem(keyval[0]) === null) {
          if (["utm_source", "utm_medium", "utm_campaign", "utm_term", "utm_content"].includes(keyval[0])) {
            const d = new Date();
            d.setTime(d.getTime() + (14 * 24 * 60 * 60 * 1000));
            let expires = "expires=" + d.toUTCString();
            document.cookie = keyval[0] + "=" + keyval[1] + ";" + expires + ";path=/";
          }
        }
      }
    }

    // Étape 2 : Si pas d’UTM, détecter si referrer vient de Google
    var referrer = document.referrer;
    if (referrer && referrer.includes("google.") && !document.cookie.includes("utm_source")) {
      const d = new Date();
      d.setTime(d.getTime() + (14 * 24 * 60 * 60 * 1000));
      let expires = "expires=" + d.toUTCString();
      document.cookie = "utm_source=google;" + expires + ";path=/";
      document.cookie = "utm_medium=organic;" + expires + ";path=/";
    }

    // Fonction pour lire les cookies
    function getCookie(cname) {
      let name = cname + "=";
      let ca = document.cookie.split(';');
      for(let i = 0; i < ca.length; i++) {
        let c = ca[i];
        while (c.charAt(0) == ' ') {
          c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
          return c.substring(name.length, c.length);
        }
      }
      return "";
    }

    // Injection des cookies dans les champs du formulaire
    var hiddenFields = document.querySelectorAll("input[type=hidden], input[type=text]");
    for (var i = 0; i < hiddenFields.length; i++) {
      var elementor_field_name = hiddenFields[i].name;
      var elementor_field_name_clean = elementor_field_name.match(/\[(.*?)\]/);
      if (elementor_field_name_clean) {
        var param = getCookie(elementor_field_name_clean[1]);
      }
      if (param) {
        document.getElementsByName(hiddenFields[i].name)[0].value = param;
      }
    }
  }

  setTimeout(function() {
    queryForm();
  }, 3000);
});
</script>

Ce code permet également de catégoriser les utilisateurs arrivant directement depuis GOOGLE.
Ils seront classés :

UTM Source : Google
UTM Medium : Organic

Étape 2 : Ajouter les champs cachés UTM

Dans Elementor, ouvrez le formulaire et ajoutez 5 champs cachés :

• utm_source
• utm_medium
• utm_campaign
• utm_term
• utm_content

Dans l’onglet Avancé de chaque champ, définissez la valeur par défaut comme :

• Balise dynamique > Request Parameter > utm_source
• Balise dynamique > Request Parameter > utm_medium
• Etc.

Tableau récapitulatif

2. Synchroniser Elementor avec Google Sheets via Zapier

Zapier permet d’envoyer les données de formulaire Elementor vers une feuille Google Sheets pour archivage ou traitement.

Étapes :

1. Créez un compte Zapier et une feuille Google Sheets avec les colonnes correspondant à vos champs
2. Dans Zapier, créez un nouveau Zap : Webhooks by Zap > Catch Hook
3. Copiez l’URL Webhook générée
4. Dans Elementor > Formulaire > Actions après envoi > Webhook, collez l’URL
5. Testez l’envoi, puis connectez le Zap à Google Sheets en mappant les champs

Une fois en place, chaque soumission sera enregistrée automatiquement.

3. Tester le tracking et les envois

Avant de mettre en ligne :

• Testez le formulaire avec une URL contenant des paramètres UTM
• Vérifiez dans les outils de développeur si les cookies sont bien enregistrés
• Soumettez le formulaire et vérifiez que les valeurs UTM arrivent dans la feuille Google Sheets

Accompagnement par Blue Strat

Blue Strat est une agence web spécialisée WordPress et Elementor. Nous vous accompagnons dans la mise en place de formulaires performants, dans la collecte des leads, l’intégration des balises UTM, le tracking Google Tag Manager, et la synchronisation de vos données (CRM, Sheets, Analytics).

Notre équipe vous conseille aussi sur l’optimisation SEO, la publicité Google Ads et la stratégie digitale globale. Nous assurons également la maintenance, la sécurité et l’évolution continue de vos sites WordPress.

Code original du tracking inspiré de Yevhen Reshetar