Como rastrexar os envíos de formularios Elementor en eventos de Google Analytics usando JQuery

Como rastrexar os envíos de formularios Elementor en eventos de Google Analytics

Durante as últimas semanas estiven a traballar nun sitio cliente de WordPress que ten bastantes complexidades. Están a usar WordPress cunha integración a ActiveCampaign para nutrir pistas e a Zapier integración a Vender Zendesk vía Formas Elementor. É un sistema estupendo ... iniciar campañas de goteo para as persoas que solicitan información e dirixir o representante de vendas correspondente cando o soliciten. Impresionou moito a flexibilidade e o aspecto de Elementor.

O último paso foi proporcionar un panel de análise para o cliente a través de Google Analytics que lles proporcionou rendemento mes a mes nos envíos de formularios. Teñen o Xestor de etiquetas de Google instalado, polo que xa estamos capturando transaccións de comercio electrónico e actividade de visualización de YouTube no sitio.

Fixen varios intentos por utilizar DOM, disparadores e eventos no Xestor de etiquetas de Google para capturar o envío correcto do formulario para Elementor, pero non tiven ningunha sorte. Probei unha chea de xeitos diferentes de controlar a páxina, observando a mensaxe de éxito que aparecería a través de AJAX e simplemente non funcionaba. Entón ... fixen unha procura e atopei unha excelente solución de Tracking Chef, chamada Seguimento de formularios a proba de balas con GTM.

O guión utilízase jQuery e Google Tag Manager para empurrar o Evento de Google Analytics cando o formulario se envía con éxito. Con algunhas modificacións menores e unha mellora da sintaxe, tiven todo o que necesitaba. Aquí tes o código:

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

É bastante enxeñoso, observando a presentación correcta e logo aprobando Forma como a categoría, o nome do destino como a Acción, e Submisión como a etiqueta. Ao facer o destino programático, pode simplemente ter este código no pé de páxina de cada páxina para observar o envío dun formulario. Entón ... mentres engades ou modificas formularios, nunca tes que preocuparte por actualizar o script nin engadilo a outra páxina.

Instala o script vía código personalizado Elementor

Se es unha axencia, recomendaríache a actualización ilimitada e o uso de Elementor para todos os teus clientes. É unha plataforma sólida e o número de integracións de socios segue disparándose. Acompáñao cun complemento como Formulario de contacto DB e tamén podes recoller todos os teus formularios.

Element Pro ten unha excelente opción de xestión de scripts integrada. Aquí podes introducir o teu código:

Código personalizado Elementor

  • desprácese ata Elementor> Código personalizado
  • Nomea o teu código
  • Estableza a situación, neste caso o final etiqueta corporal.
  • Definir unha prioridade se ten máis dun script que desexa inserir e axustar a súa orde.

Envío de formulario Elementor ao evento GA a través de GTM

  • Fai clic en actualizar
  • Pediráselle que estableza a condición e que a estableza como predeterminada en todas as páxinas.
  • Actualiza a túa caché e o teu script está en directo.

Previsualice a súa integración de Google Tag Manager

Google Tag Manager ten un fantástico mecanismo para conectarse a unha instancia do navegador e probar o seu código para observar se as variables se envían correctamente ou non. Isto é esencial porque Google Analytics non é en tempo real. Podes probar, probar e probar e sentirte frustrado de que os datos non aparezan en Google Analytics se non te decatas disto.

Aquí non vou proporcionar un tutorial sobre como facelo previsualizar e depurar o Xestor de etiquetas de Google... Vou supor que o sabes. Podo enviar o meu formulario na miña páxina de proba conectada e ver os datos enviados aos datos de GTM como deben ser:

capa de datos do xestor de etiquetas de google

Neste caso, a categoría foi codificada como Formulario, o obxectivo era o formulario Contacte connosco e a etiqueta é Envío.

En Xestor de etiquetas de Google configura as variables de datos, o evento, o disparador e a etiqueta

O último paso é configurar Google Tag Manager para capturar esas variables e envialas a unha etiqueta de Google Analytics configurada para un evento. Elad Levy detalla estes pasos no seu outro post - Seguimento xenérico de eventos no Xestor de etiquetas de Google.

Unha vez configurados, poderás ver os eventos en Google Analytics.

Obtén Elementor Pro

Divulgación: estou a usar as miñas ligazóns de afiliados ao longo deste artigo.

¿Que pensas?

Este sitio usa Akismet para reducir o spam. Aprende a procesar os teus datos de comentarios.