Com fer un seguiment dels enviaments de formularis Elementor en esdeveniments de Google Analytics mitjançant JQuery

Com fer un seguiment dels enviaments de formularis Elementor als esdeveniments de Google Analytics

He estat treballant en un lloc de WordPress de client durant les últimes setmanes que presenta força complexitats. Estan utilitzant WordPress amb una integració a ActiveCampaign per alimentar pistes i a Zapier integració a Venda de Zendesk per Formes Elementor. És un sistema fantàstic ... iniciar campanyes de degoteig per a les persones que sol·liciten informació i dirigir el representant de vendes adequat quan se sol·liciti. Estic realment impressionat per la flexibilitat de forma i el seu aspecte.

El darrer pas va ser proporcionar un tauler d’anàlisi per al client a través de Google Analytics que els proporcionés un rendiment mes a mes en els enviaments de formularis. Tenen instal·lat Google Tag Manager, de manera que ja capturem transaccions de comerç electrònic i activitat de visualització de YouTube al lloc.

Vaig fer diversos intents d’utilitzar DOM, activadors i esdeveniments al Gestor d’etiquetes de Google per capturar l’enviament de formularis amb èxit per a Elementor, però no vaig tenir cap sort. He provat un munt de maneres diferents de supervisar la pàgina, observant el missatge d’èxit que apareixeria mitjançant AJAX i que simplement no funcionava. Així que ... vaig fer una recerca i vaig trobar una solució fantàstica de Tracking Chef, anomenada Seguiment de formularis a prova de bales amb GTM.

El guió s'utilitza jQuery i Google Tag Manager per impulsar el Esdeveniment de Google Analytics quan s’envia el formulari amb èxit. Amb algunes modificacions menors i una millora de la sintaxi, tenia tot el que necessitava. Aquí teniu el codi:

<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>

És bastant enginyós, observar l’enviament amb èxit i després passar Formulari com a categoria, el nom de la destinació com l 'Acció, i Submissió com a etiqueta. En programar l'objectiu, podeu tenir aquest codi al peu de pàgina de cada pàgina per observar l'enviament d'un formulari. Així que ... a mesura que afegiu o modifiqueu formularis, no us heu de preocupar mai d'actualitzar l'script ni afegir-lo a una altra pàgina.

Instal·leu l'script mitjançant el codi personalitzat Elementor

Si sou una agència, us recomanaria una actualització il·limitada i que utilitzeu Elementor per a tots els vostres clients. És una plataforma sòlida i el nombre d’integracions de socis continua disparant-se. Combineu-lo amb un complement semblant Formulari de contacte DB i també podeu recollir tots els vostres enviaments de formularis.

Elementor Pro té una gran opció de gestió de seqüències integrada directament. A continuació s'explica com podeu introduir el vostre codi:

Codi personalitzat Elementor

  • navegui fins Elementor> Codi personalitzat
  • Posa un nom al teu codi
  • Definiu la ubicació, en aquest cas el final etiqueta corporal.
  • Definiu una prioritat si teniu més d'un script que voleu inserir i configureu-ne l'ordre.

Enviament del formulari Elementor a l'esdeveniment GA mitjançant GTM

  • Feu clic a Actualitza
  • Se us demanarà que configureu la condició i que la definiu per defecte a totes les pàgines.
  • Actualitzeu la memòria cau i el vostre script està actiu.

Previsualitzeu la integració de Google Tag Manager

Google Tag Manager té un mecanisme fantàstic per connectar-se a una instància del navegador i provar el codi per observar si s’envien correctament les variables. Això és essencial perquè Google Analytics no és en temps real. Podeu provar, provar i provar, i veritablement us frustrareu que les dades no apareguin a Google Analytics si no us n’heu adonat.

Aquí no vaig a proporcionar un tutorial sobre com fer-ho previsualitzeu i depureu Google Tag Manager... Vaig a suposar que ho saps. Puc enviar el formulari a la pàgina de prova connectada i veure les dades transmeses a les dades de GTM tal com han de ser:

capa de dades de Google Tag Manager

En aquest cas, la categoria estava codificada com a formulari, l'objectiu era el formulari de contacte i l'etiqueta és Enviament.

A Google Tag Manager, configureu variables, dades, esdeveniments, activadors i etiquetes de dades

L'últim pas en això és configurar Google Tag Manager per capturar aquestes variables i enviar-les a una etiqueta de Google Analytics configurada per a un esdeveniment. Elad Levy detalla aquests passos en el seu altre missatge: Seguiment d'esdeveniments genèric a Google Tag Manager.

Un cop configurats, podreu veure els esdeveniments a Google Analytics.

Obteniu Elementor Pro

Divulgació: faig servir els meus enllaços d’afiliació a tot aquest article.