Fermer

septembre 25, 2021

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


Je travaille depuis quelques semaines sur un site WordPress client qui présente quelques complexités. Ils utilisent WordPress avec une intégration à ActiveCampaign pour nourrir les prospects et une intégration Zapier à Zendesk Sell via Elementor Forms. C'est un excellent système… lancer des campagnes de goutte-à-goutte aux personnes qui demandent des informations et transmettre un prospect 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 au client un tableau de bord analytique via Google Analytics qui lui fournissait des performances mensuelles sur les soumissions de formulaires. Google Tag Manager est 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 n'a pas eu de 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 apparaîtrait via AJAX et cela ne fonctionnait tout simplement pas. Alors… J'ai fait quelques recherches et trouvé une excellente solution de Tracking Chef, appelée Suivi de formulaire 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 :

C'est assez ingénieux, de surveiller la soumission réussie, puis de passer Form comme catégorie, le nom de destination comme Action, et Submission 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.

Installez le script via le code personnalisé Elementor

Si vous êtes une agence, je vous le recommande vivement la mise à niveau illimitée et l'utilisation d'Elementor pour 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 Contact Form DB et vous pouvez également collecter toutes vos soumissions de formulaires.

Elementor Pro intègre une excellente option de gestion de script. Voici comment vous pouvez saisir votre code :

Elementor Custom Code
  • Naviguez vers Elementor > Custom Code
  • Nommez votre code
  • Définissez l'emplacement, dans ce cas la fin balise body.
  • 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 la mise à jour
  • Il vous sera demandé de définir la condition et de la définir sur la valeur par défaut de toutes les pages.
  • Actualisez votre cache et votre script est en ligne !

Aperçu de votre gestionnaire de balises Google Intégration

Google Tag Manager dispose d'un mécanisme fantastique pour se connecter à une instance de navigateur et ac 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éboguez Google Tag Manager… Je suppose que vous le savez. Je peux soumettre mon formulaire sur ma page de test connectée et voir les données transmises aux données GTM telles qu'elles doivent être :

google tag manager data layer

Dans ce cas, la catégorie était codé 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.




Source link