Como rastrexar os envíos de formularios Elementor en eventos de Google Analytics usando JQuery
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:
- 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.
- 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:
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.
Divulgación: estou a usar as miñas ligazóns de afiliados ao longo deste artigo.