Tracker les formulaires Elementor avec Google Tag Manager

Les formulaires Elementor #

Si vous utilisez Wordpress, il est très probable que vous ayez choisi Elementor comme constructeur de page. Cet outil vous permet notamment de créer des formulaires rapidement.

Les formulaires créés avec Elementor 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 Elementor et également comment récupérer les données utilisateurs (comme par exemple l’adresse email) pour les transmettre aux plateformes publicitaires.

Installer l’Elementor Form listener #

Pour écouter l’envoi d’un formulaire valide Elementor, 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(body);
    origin_send.apply(this, arguments);
  };

  XMLHttpRequest.prototype.open = function(method, url) {
    if(url.includes("admin-ajax.php")) {
        this.addEventListener('loadend', function(event) {
            var parameter_filter = ['form_id', 'form_fields'];
            if(JSON.parse(event.currentTarget.response).success) {
                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];
                }
                dataLayer.push({
                    event: "generate_lead",
                    form_data: form_data
                });
            }
        });
        origin_open.apply(this, arguments);
    }
  };
  /*
  * 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 Elementor, l’événement generate_lead est envoyé dans la Data Layer.

Créer les variables Data Layer correspondantes #

L’identifiant 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 Elementor.

Aller plus loin #

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

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