Tutorial de Google Tag Manager, parte 4: Seguimiento de envíos de formularios - Avanzado

En la Parte 3 de nuestro Tutorial actualizado de Google Tag Manager, cubrimos el seguimiento de formularios con el Activador de envío de formularios , que es un enfoque sencillo para dominar el seguimiento de formularios de contacto. Sin embargo, dependiendo del código del formulario y su tecnología, es posible que esto no siempre funcione. Esto se puede vincular a problemas de JavaScript en el sitio o envíos de formularios que GTM no recogió.

En esta última parte de nuestra serie, analizaremos más de cerca el seguimiento de envío de formularios con la ayuda del activador de visibilidad de elementos . Este tipo de disparador es útil no solo para formularios, sino también para todo tipo de ventanas emergentes y pancartas y notificaciones de visualización.

Google Analytics no rastrea automáticamente esta actividad, pero Google Tag Manager (GTM) ofrece una solución automatizada para rastrear los envíos de formularios.

En este tutorial, asumimos que ya tiene una cuenta de Google Tag Manager, ha creado un contenedor y lo ha instalado en su sitio web. También debe tener una cuenta de Google Analytics configurada para su sitio web y haberla vinculado a GTM.

¿Qué dificulta el seguimiento de formularios?

Demos un paso atrás y aclaremos por qué existen tantas técnicas diferentes para el seguimiento de formularios. Existen varios tipos de formularios y no hay un estándar global sobre cómo se desarrollan, lo que, como consecuencia, puede hacer que su seguimiento sea un desafío. Aquí hay una descripción general de los escenarios / eventos más comunes que pueden ocurrir en su sitio web después de que se envió un formulario:

• El formulario redirige al usuario a una página de agradecimiento : Genial, esto se rastrea automáticamente a través de Pageview .
• Se ha hecho clic los espectáculos forman un agradecimiento yo notificación u después de la forma botón de envío: Muy bien, si se envía un formulario para presentar GTM. Lea más sobre esto en nuestro tutorial de publicación de blog .
• El formulario se actualiza y muestra un texto de agradecimiento : Desafiante pero factible con el activador de visibilidad de elementos .
• Una ventana emergente informa al usuario sobre el envío exitoso: Desafiante pero no imposible con el Activador de visibilidad del elemento .

Cómo comenzar con el seguimiento de formularios

Para empezar, le recomendamos que habilite las Variables de formulario integradas de GTM y cree un Activador de envío de formularios que escuche todos los envíos de formularios. Lea más sobre la configuración en nuestro último tutorial de publicación de blog . El oyente de eventos automáticos de formularios detectará todos los eventos estándar del navegador de envío. Ejecute algunas pruebas con su formulario.

Si GTM no registra el envío de un formulario en el modo de vista previa y depuración, el enfoque de seguimiento estándar no funcionará y tendrá que utilizar un método alternativo. Esto es bastante común, por lo que trabajaremos con una alternativa increíble: el activador de visibilidad de elementos .

Explicación del disparador de visibilidad del elemento

El activador de visibilidad de elementos (EVB) rastrea cuándo aparece un elemento en particular en la pantalla (debido a hacer clic, desplazarse u otras interacciones) y, por lo tanto, tiene una amplia variedad de casos de uso. Esta técnica se puede aplicar a los formularios cuando aparece un mensaje de agradecimiento en particular después de que el formulario se envió correctamente. Puede ser una notificación de agradecimiento en la misma página del formulario, un banner de agradecimiento cuando se vuelve a cargar la página del formulario o una ventana emergente. Para obtener más ejemplos prácticos, haga clic aquí .

En resumen, el activador de visibilidad de elementos se activa cada vez que un elemento (s) que especificó aparece en la ventana gráfica del navegador. La ventana gráfica es el área visible de la ventana del navegador. Cuando un elemento está visible allí, el usuario puede verlo.

Para el método de selección, para determinar a qué elemento desea apuntar, tiene dos opciones para elegir:

• ID de elemento : coincide con el primer elemento de la página con el ID proporcionado. Esto funciona bien si solo tiene un elemento para rastrear.
• Selector de CSS : esto coincide con el elemento o un grupo de elementos en la página que se ajusta a su selector y es adecuado para rastrear múltiples elementos que pueden aparecer en una página.

Paso 1: busque un identificador único

Empiece por inspeccionar el mensaje de éxito del formulario que se muestra.

Para hacerlo, haga clic derecho para acceder a las herramientas de desarrollo de su navegador. En Chrome, por ejemplo, haga clic con el botón derecho en el elemento que desea inspeccionar y seleccione Inspeccionar elemento . Esto le mostrará información diversa, como el contenido del mensaje, su clase CSS, ID y más elementos. En nuestro ejemplo a continuación, el mensaje tiene una ID de mensaje enviado que es único y se puede usar como condición en el activador EVB .

Paso 2: crear el activador de visibilidad del elemento

El disparador define exactamente qué queremos rastrear que se vuelve visible en la ventana del usuario. En este caso, es una verificación para ver si aparece el mensaje de agradecimiento .

Para la configuración del disparador, siga estos pasos:

• Navegue a Triggers en la barra lateral izquierda y cree uno nuevo.
• Reemplace Desencadenador sin título con un nombre descriptivo como EVB - Contacto - Formulario enviado .
• Elija Tipo de activador: Visibilidad del elemento .

Para la configuración del disparador, establecerá:

• Método de selección : elija ID en el menú desplegable.
• ID de elemento : mensaje enviado
  • Esto usa la identificación única que identificó en el Paso 1 para especificar exactamente qué mensaje de agradecimiento desea rastrear.
• Cuándo activar este disparador : una vez por página
  • Esto significa que se activará solo una vez en la página actual cuando el elemento que coincide con el ID sea ​​visible para el espectador.
  • Las otras dos opciones pueden resultar útiles cuando se realiza el seguimiento de más de un elemento en una página con el selector de CSS.
• Porcentaje mínimo visible : 50
  • Aquí puede especificar un valor en porcentajes, que es la cantidad del elemento que debe estar visible en la ventana gráfica para que se dispare el disparador. Entonces, si establece el valor en "50", al menos el 50% del elemento coincidente debe ser visible.
  • De forma predeterminada, los elementos deben ser al menos un 50% visibles en la pantalla para activar un evento. Esto es suficiente en nuestro caso.
• Observar cambios de DOM : marque esta casilla para permitir que el activador rastree los elementos coincidentes que aparecen a medida que cambia el DOM.
  • Esta configuración le permite realizar un seguimiento de la visibilidad de los elementos que podrían no existir en el DOM (Modelo de objeto de documento) cuando se carga el formulario de contacto por primera vez. En otras palabras, esto esperará a que aparezca un elemento HTML con el mensaje de agradecimiento .
• Otras condiciones para disparar el gatillo:
  • Dado que estamos usando una identificación , que debería ser exclusiva de este formulario, no es necesario que establezcamos más condiciones aquí.
  • Si esta ID también se usa para otros formularios, sería recomendable configurar la Ruta de la página para incluir la página donde se presenta el formulario respectivo.

Haga clic en Guardar para finalizar la configuración del disparador.

Paso 3: Cree la etiqueta de evento de envío de formulario

El último paso en el seguimiento de los envíos de formularios es simplemente crear una etiqueta que registrará el evento en Google Analytics con la información que desee. El evento se activará cuando se cumplan las condiciones del activador de visibilidad de elementos que configuró en el paso anterior. Ahora, cree la etiqueta como se indica en la siguiente captura de pantalla:

Paso 4: guarde una versión, pruebe y publique

La etiqueta que acaba de crear no comenzará a funcionar hasta que la publique, pero primero debe probar a fondo que funciona como se esperaba. Una vez guardada la etiqueta, habilite el modo Vista previa (haga clic en “Vista previa” en la esquina superior derecha), vaya a su sitio web y actualice la página.

Asegúrese de cubrir estos escenarios de prueba para el seguimiento de su formulario:

• Envíe el formulario de contacto sin haberlo cumplimentado. La etiqueta no debe dispararse en este caso.
• Complete el formulario con los detalles correctos y luego haga clic en enviar. La etiqueta debería activarse tan pronto como aparezca el mensaje de agradecimiento en su pantalla.

El Informe de eventos en tiempo real de Google Analytics debería mostrar los hits de su evento si todo funciona correctamente. Lea nuestra publicación de blog sobre los problemas de prueba del Administrador de etiquetas de Google y cómo solucionarlos si tiene algún problema.

Si todas sus pruebas tienen éxito, puede hacer clic en el botón Enviar en GTM. Asigne a esta versión publicada un nombre descriptivo como Evento de envío de formulario de contacto agregado y haga clic en Publicar .

Conclusión

Si bien el seguimiento de formularios estándar es el más fácil de configurar, a menudo no funciona debido a complicaciones en el JavaScript en el sitio. Trabajar con el activador de visibilidad de elementos le brinda una alternativa para lidiar con estos casos extremos. También hace que sus datos sean mucho más confiables y precisos. De esta manera, se asegura de que no se realice un seguimiento de los clics no válidos o no deseados en el botón de envío, sino solo de los envíos de formularios que se completaron y enviaron con éxito.

Nuestro tutorial de Google Tag Manager ha cubierto el seguimiento de enlaces externos (salientes) , el seguimiento de enlaces de descarga y los envíos de formularios básicos . ¿Hay otros tipos de eventos que le gustaría seguir? ¿Necesita ayuda con un caso más complicado? No dude en contactarnos - ¡Estaremos encantados de ayudarle! Y para obtener actualizaciones interesantes, suscríbase a nuestro boletín .