Cómo rastrear envíos de formularios de Elementor en eventos de Google Analytics usando JQuery

Cómo realizar un seguimiento de los envíos de formularios de Elementor en eventos de Google Analytics

He estado trabajando en un sitio de WordPress para clientes durante las últimas semanas que tiene bastantes complejidades. Ellos están usando WordPress con una integración a ActiveCampaign para nutrir clientes potenciales y un Zapier integración a Venta de Zendesk vía Formularios de Elementor. Es un gran sistema ... iniciar campañas de goteo para las personas que solicitan información y enviar un cliente potencial al representante de ventas adecuado cuando se solicite. Estoy realmente impresionado con la flexibilidad de forma y la apariencia de Elementor.

El último paso fue proporcionar un panel de análisis para el cliente a través de Google Analytics que les proporcionó un rendimiento mes a mes en los envíos de formularios. Tienen instalado Google Tag Manager, por lo que ya estamos capturando transacciones de comercio electrónico y actividad de visualización de YouTube en el sitio.

Hice varios intentos de utilizar DOM, activadores y eventos dentro de Google Tag Manager para capturar el envío exitoso del formulario para Elementor, pero no tuve suerte en absoluto. Probé un montón de formas diferentes de monitorear la página, buscando el mensaje de éxito que aparecería a través de AJAX y simplemente no estaba funcionando. Entonces ... hice algunas búsquedas y encontré una excelente solución de Tracking Chef, llamada Seguimiento de formularios Elementor a prueba de balas con GTM.

El guión utiliza jQuery y Google Tag Manager para impulsar la Evento de Google Analytics cuando el formulario se envía correctamente. Con algunas ediciones menores y una mejora de sintaxis, tenía todo lo que necesitaba. Aquí está el 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>

Es bastante ingenioso, estar atento a la presentación exitosa y luego pasar El formulario como la categoría, el nombre del destino como la Acción, y Sumisión como la etiqueta. Al hacer que el objetivo sea programático, simplemente puede tener este código en el pie de página de cada página para observar el envío de un formulario. Entonces ... a medida que agrega o modifica formularios, nunca debe preocuparse por actualizar el script ni agregarlo a otra página.

Instale el script a través del código personalizado de Elementor

Si es una agencia, le recomiendo encarecidamente la actualización ilimitada y el uso de Elementor para todos sus clientes. Es una plataforma sólida y la cantidad de integraciones de socios continúa disparándose. Combínalo con un complemento como Formulario de contacto DB y también puede recopilar todos los envíos de formularios.

Elementor Pro tiene una excelente opción de administración de scripts incorporada. A continuación, le indicamos cómo puede ingresar su código:

Código personalizado de Elementor

  • Navegue hasta Elementor> Código personalizado
  • Nombra tu código
  • Establecer la ubicación, en este caso el final etiqueta del cuerpo.
  • Establezca una prioridad si tiene más de un script que desea insertar y establezca el orden de los mismos.

Envío de formularios de Elementor al evento de GA a través de GTM

  • Haga clic en actualizar
  • Se le pedirá que establezca la condición y simplemente establezca el valor predeterminado de todas las páginas.
  • ¡Actualice su caché y su script estará activo!

Vista previa de la integración de Google Tag Manager

Google Tag Manager tiene un mecanismo fantástico para conectarse a una instancia del navegador y probar su código para observar si las variables se envían correctamente o no. Esto es esencial porque Google Analytics no es en tiempo real. Puede probar y probar y probar y realmente frustrarse de que los datos no aparezcan en Google Analytics si no se dio cuenta de esto.

No voy a proporcionar aquí un tutorial sobre cómo obtener una vista previa y depurar el Administrador de etiquetas de Google... Voy a asumir que lo sabes. Puedo enviar mi formulario en mi página de prueba conectada y ver los datos enviados a los datos de GTM como deben ser:

capa de datos del administrador de etiquetas de Google

En este caso, la categoría estaba codificada como Formulario, el objetivo era el formulario Contáctenos y la etiqueta es Envío.

En Google Tag Manager, configure variables de datos, eventos, activadores y etiquetas

El último paso es configurar Google Tag Manager para capturar esas variables y enviarlas a una etiqueta de Google Analytics configurada para un evento. Elad Levy detalla estos pasos en su otra publicación: Seguimiento de eventos genérico en Google Tag Manager.

Una vez configurados, podrá ver los eventos en Google Analytics.

Obtén Elementor Pro

Divulgación: estoy usando mis enlaces de afiliados a lo largo de este artículo.

¿Qué piensas?

Este sitio usa Akismet para reducir el correo no deseado. Descubra cómo se procesan los datos de sus comentarios.