Comment suivre les soumissions de formulaires Elementor dans les événements Google Analytics à l'aide de JQuery

Comment suivre les soumissions de formulaires Elementor dans les événements Google Analytics

Je travaille depuis quelques semaines sur un site client WordPress qui présente pas mal de complexités. Ils utilisent WordPress avec une intégration à ActiveCampaign pour nourrir les prospects et un Zapier intégration à Vente Zendesk via Formes d'élémentaires. C'est un excellent système… lancer des campagnes de goutte-à-goutte aux personnes qui demandent des informations et transmettre une piste au représentant des ventes approprié lorsque cela est demandé. Je suis vraiment impressionné par la flexibilité et l'apparence de la forme d'Elementor.

La dernière étape consistait à fournir un tableau de bord analytique au client via Google Analytics, qui lui fournissait des performances mensuelles sur les soumissions de formulaires. Ils ont Google Tag Manager installé, nous capturons donc déjà les transactions de commerce électronique et l'activité de vue YouTube sur le site.

J'ai fait plusieurs tentatives pour utiliser le DOM, les déclencheurs et les événements dans Google Tag Manager pour capturer la soumission de formulaire réussie pour Elementor, mais je n'ai eu aucune chance du tout. J'ai testé une tonne de façons différentes de surveiller la page, en surveillant le message de réussite qui s'afficherait via AJAX et cela ne fonctionnait tout simplement pas. Alors… j'ai fait quelques recherches et j'ai trouvé une excellente solution de Tracking Chef, appelée Suivi des formulaires Bulletproof Elementor avec GTM.

Le script utilise jQuery et Google Tag Manager pour pousser le Événement Google Analytics lorsque le formulaire est soumis avec succès. Avec quelques modifications mineures et une amélioration de la syntaxe, j'avais tout ce dont j'avais besoin. Voici le code :

<script>
jQuery(document).ready(function($) {
    $(document).on('submit_success', function(evt) {
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({
            'event': 'ga_event',
            'eventCategory': 'Form ',
            'eventAction': evt.target.name,
            'eventLabel': 'Submission'
        });
    });
});
</script>

C'est assez ingénieux, guetter la soumission réussie, puis passer de contact comme catégorie, le nom de destination comme l'action, et Soumission comme étiquette. En rendant la cible programmatique, vous pouvez simplement avoir ce code dans le pied de page de chaque page pour observer une soumission de formulaire. Donc… lorsque vous ajoutez ou modifiez des formulaires, vous n'avez jamais à vous soucier de mettre à jour le script ni de l'ajouter à une autre page.

Installer le script via le code personnalisé Elementor

Si vous êtes une agence, je recommanderais vivement la mise à niveau illimitée et l'utilisation d'Elementor à tous vos clients. C'est une plate-forme solide et le nombre d'intégrations de partenaires continue de monter en flèche. Associez-le à un plugin comme Formulaire de contact DB et vous pouvez également collecter toutes vos soumissions de formulaires.

Elementor Pro a une excellente option de gestion de script intégrée. Voici comment vous pouvez entrer votre code :

Code personnalisé Elementor

  • Accédez à Elementor > Code personnalisé
  • Nommez votre code
  • Définir l'emplacement, dans ce cas la fin étiquette corporelle.
  • Définissez une priorité si vous souhaitez insérer plusieurs scripts et définissez leur ordre.

Soumission du formulaire Elementor à l'événement GA via GTM

  • Cliquez sur mettre à jour
  • Il vous sera demandé de définir la condition et de la définir simplement sur la valeur par défaut de toutes les pages.
  • Rafraîchissez votre cache et votre script est en ligne !

Prévisualisez votre intégration de Google Tag Manager

Google Tag Manager dispose d'un mécanisme fantastique pour se connecter à une instance de navigateur et tester réellement votre code pour observer si les variables sont correctement envoyées. Ceci est essentiel car Google Analytics n'est pas en temps réel. Vous pouvez tester et tester et tester et être vraiment frustré que les données ne s'affichent pas dans Google Analytics si vous ne le saviez pas.

Je ne vais pas fournir un tutoriel ici sur la façon de prévisualiser et déboguer Google Tag Manager… Je vais supposer que vous savez. Je peux soumettre mon formulaire sur ma page de test connectée et voir les données poussées vers les données GTM telles qu'elles doivent être :

couche de données du gestionnaire de balises google

Dans ce cas, la catégorie était codée en dur comme Formulaire, la cible était le formulaire Contactez-nous et l'étiquette est Soumission.

Dans Google Tag Manager, configurez les variables de données, l'événement, le déclencheur et la balise

La dernière étape consiste à configurer Google Tag Manager pour capturer ces variables et les envoyer à une balise Google Analytics configurée pour un événement. Elad Levy détaille ces étapes dans son autre article – Suivi des événements génériques dans Google Tag Manager.

Une fois ceux-ci configurés, vous pourrez voir les événements dans Google Analytics !

Obtenez Elementor Pro

Divulgation: J'utilise mes liens d'affiliation tout au long de cet article.

Que pensez-vous?

Ce site utilise Akismet pour réduire les spams. Découvrez comment sont traitées les données de vos commentaires..