Tracker les formulaires Elementor avec Google Tag Manager
Mis à jour : mardi 16 juillet 2024
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];
}
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>
![Balise HTML personnalisé pour ajouter l'Elementor form listener](https://data-marketing-school.com/images/blog/google-tag-manager/forms/elementor/custom_html_tag_hucdd27cc99166e43e175b379001281f77_306009_2138x0_resize_q75_h2_box.webp)
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.
form_id
pour les différencier dans GTM.![Événement generate_lead dans la Data Layer](https://data-marketing-school.com/images/blog/google-tag-manager/forms/elementor/generate_lead_data_layer_hucdd27cc99166e43e175b379001281f77_112154_1804x0_resize_q75_h2_box.webp)
Créer les variables Data Layer correspondantes
L’identifiant du formulaire
![Récupérer le form_id dans la Data Layer](https://data-marketing-school.com/images/blog/google-tag-manager/forms/elementor/dlv_form_id_hucdd27cc99166e43e175b379001281f77_68469_1272x0_resize_q75_h2_box.webp)
Les champs de formulaires
Ici vous devez créer une variable pour chaque champ de votre formulaire.
![Récupérer les champs du formulaire dans la Data Layer](https://data-marketing-school.com/images/blog/google-tag-manager/forms/elementor/dlv_form_fields_email_hucdd27cc99166e43e175b379001281f77_72775_1312x0_resize_q75_h2_box.webp)
Si vous désirez changer les noms des champs, vous pouvez le faire dans Elementor.
![Changer les identifiants des champs du formulaire dans Elementor](https://data-marketing-school.com/images/blog/google-tag-manager/forms/elementor/change_form_fields_id_hud49da568400d9062178718c4e59fe2d3_77538_578x0_resize_q75_h2_box.webp)
Aller plus loin
Vous pouvez transmettre les données utilisateurs collectées via votre formulaire Elementor aux plateformes publicitaires pour améliorer vos performances :
Vous n'avez pas trouvé de solution ?
Demandez de l'aide au Data Marketing Club