Google Tag Manager Form Tracking: 7 maneras de alcanzar su objetivo

Mientras hablaba con los vendedores, noté que uno de los temas más populares entre ellos es el rastreo de formas. Desafortunadamente, en algunos casos el seguimiento de formularios puede convertirse en un verdadero dolor de cabeza (especialmente si un vendedor no tiene ni idea de lo que es CSS o HTML). Pero no teman porque en esta entrada del blog les mostraré 7 técnicas de seguimiento de formularios de Google Tag Manager. Sugerencia : algunas de ellas requerirán la aportación del desarrollador, pero haré todo lo posible por poner todo en claro.

Nota: esta entrada del blog enseña cómo rastrear eventos con Universal Analytics. Si quiere familiarizarse con el seguimiento de eventos en Google Analytics 4, también puede consultar esta entrada de blog.

Capítulos de esta entrada de blog:

Seguimiento de formularios del Administrador de etiquetas de Google: Contexto básico

En esta cosa maravillosa llamada INTERNET, hay varios tipos de formas. Algunos de ellos se refrescan después de una presentación exitosa, otros no, algunos pueden redirigirte a una página de «gracias», etc. El principal problema con el rastreo de formularios es que no hay estándares globales de cómo deben ser desarrollados los formularios. Algunos desarrolladores pueden preferir una tecnología (por ejemplo, AJAX) a otra, y tienen pleno derecho a hacerlo.

Dado que está interesado en el seguimiento de formularios, probablemente ha notado los disparadores de formularios y las variables de formularios incorporadas en el Administrador de etiquetas de Google. Habilita al menos una variable de formulario y crea un activador de envío de formularios (que escucha todos los envíos de formularios), con lo que activarás la función de escucha automática de eventos de formularios de Google Tag Manager.

Laescucha automática de eventos de formularios escucha un evento estándar del navegador de envíos. Sin embargo, la gran mayoría de los formularios utilizan otras formas de enviar sus datos (p. ej., $.ajax de jQuery), por lo que el evento de envío no funciona. En ese caso, el Google Tag Manager nunca registra el envío de un formulario. Y ese es un problema bastante común.

Si el receptor de formularios de GTM no funciona en tu situación, hay otras alternativas para que puedas alcanzar el objetivo. En esta entrada del blog, explicaré tanto las opciones estándar como las soluciones para el seguimiento de formularios de Google Tag Manager.

Tag + Trigger

Probablemente ya estés familiarizado con el concepto principal de Google Tag Manager: cada interacción que quieras rastrear necesita una etiqueta y un disparador. Si quieres hacer un seguimiento de todos los envíos de formularios con Google Analytics, tendrás que crear una etiqueta de Google Analytics y un disparador (regla) cuando una etiqueta debe dispararse. La creación de una etiqueta es la parte más fácil de este proceso. Vamos a crear una: la necesitarás en los próximos capítulos de esta entrada de blog):

1. Ir a Etiquetas
2. Presiona el botón Nuevo
3. En la configuración de la etiqueta elija Universal Analytics:
   1. Elija el tipo de pista – Evento
   2. Categoría del evento – Presentación del formulario (siéntase libre de elegir otro título apropiado)
   3. Acción del evento – Formulario de contacto (siéntase libre de elegir otro título apropiado)
   4. Etiqueta de evento – {{Página URL}}. P.D. Puedes elegir otros valores para una categoría de evento, acción y etiqueta.
   5. Seleccione la variable de configuración de Google Analytics.
4. Deje la parte del desencadenante vacía (por ahora) y haga clic en Guardar. Volveremos a ello más tarde. El 80% de esta entrada del blog está dedicado a varios tipos de desencadenantes que puedes utilizar. La elección del tipo de disparador depende de la forma en que se desarrolló un formulario.

Las 7 técnicas de seguimiento de formularios que mencioné en el título de esta entrada del blog son disparadores. Cada uno de ellos depende de diferentes elementos/eventos que ocurren en un sitio web después de la presentación del formulario:

• El auto-evento del formulario oyente.
• Página de agradecimiento.
• Seguimiento de formularios AJAX.
• Rastreo con elemento disparador de visibilidad
• Escribir tu propio formulario de auto-escucha de eventos.
• Evento de la capa de datos (dataLayer.push).
• Raspado DOM.

Un disparador mal configurado resultará en datos e informes falsos (esto llevará a conclusiones y acciones erróneas). Así que lea todo cuidadosamente. Si tienes alguna pregunta o si algunas partes de esta entrada del blog son engañosas, házmelo saber en la sección de comentarios de abajo, Twitter o LinkedIn. Estaré encantado de ayudar.

Antes de continuar: Guías preparadas

Ahora, antes de que nos adentremos en esta guía, hay algo que deberías saber. Toda esta guía es universal y cubre casi todas las formas del planeta (bueno, no todas, pero alrededor del 95% (estadísticas inventadas)).

Sin embargo, para ahorrarles tiempo, me gustaría preguntarles esto: ¿están usando los plugins Contact Form 7, Caldera Forms o Gravity Forms?

Si es así, entonces tengo buenas noticias para ti. Aquí hay tres guías adaptadas a esos populares plugins de formas:

Si su formulario es personalizado o construido con otra tecnología, no se preocupe. He cubierto todos los consejos en los próximos capítulos.

¿Qué método de seguimiento de formularios debe elegir?

Antes de sumergirnos en los disparadores de la piscina, tendremos que inspeccionar un formulario y decidir qué técnica se ajusta mejor a nuestras necesidades. He preparado un esquema de flujo que debería ayudarte a elegir el método de seguimiento de formularios de Google Tag Manager adecuado.

Estoy seguro de que algunas partes de ese plan pueden parecer vagas. Continúe leyendo y todo se volverá mucho más claro.

#1. Activador de envío de formularios del Google Tag Manager

Primero, intentemos con el escuchador de formularios incorporado de GTM. Abre una lista de variables en tu cuenta de Google Tag Manager. Por defecto, las variables de formulario están desactivadas y ocultas, por lo tanto, es necesario habilitarlas. En las variables incorporadas, haga clic en Configurar y en la barra lateral derecha habilite todas las variables de formulario (todos los cambios se guardan automáticamente).

A continuación, abre una lista de todos los activadores (haciendo clic en Activadores en la barra lateral izquierda). Crea un nuevo disparador:

• Título «Todos los envíos de formularios».
• Tipo de disparador – Envío de formularios .
• Deje la opción Esperar para las etiquetas sin marcar.
• Haga clic en la casilla de verificación Comprobar validación . Una vez que esta casilla esté marcada, el Google Tag Manager no disparará el activador si se impide la acción predeterminada del formulario (enviar y redirigir). Si se deja sin marcar, el activador se activará siempre que se registre un evento de envío (incluso cuando se envíe un formulario con errores (por ejemplo, se dejen en blanco varios campos obligatorios)). En la siguiente captura de pantalla, he activado este disparador SOLO en la página donde se encuentra mi formulario de contacto (La ruta de la página contiene contact-us)
• Disparen. En este ejemplo, he configurado el seguimiento de Todos los formularios (que se encuentran en la página Contáctenos (porque en el párrafo anterior de esta guía, he configurado el disparador para que se active sólo en una página en particular).

Ahora, usemos el modo de vista previa y depuración del GTM para averiguar si el escuchador automático de eventos de formularios por defecto funciona para nosotros. En la esquina superior derecha de su cuenta de Google Tag Manager, haga clic en Preview.

Una vez que se habilite el modo de vista previa, verá un banner naranja con el siguiente aspecto:

DEBE aparecer. Si el banner no aparece, lee esta guía sobre cómo solucionar el modo de vista previa y de depuración de Google Tag Manager.

Una vez habilitado el modo de vista previa y de depuración, navega al sitio donde se encuentra el formulario y verás una consola de depuración en la parte inferior del navegador que muestra información detallada sobre las etiquetas, incluido su estado de disparo y los datos que se están procesando. Esta ventana de la consola aparecerá sólo en su computadora mientras usted hace una vista previa del sitio, y no es visible para los demás visitantes de su sitio web. Debería tener un aspecto parecido a este:

Si ya ha abierto esa página con el formulario pero no ve la consola de depuración del GTM, actualice la página. Si todavía tiene problemas, le sugiero que lea más sobre los errores más comunes del Google Tag Manager para encontrar la solución.

Volvamos al seguimiento del formulario. Llene el formulario (trate de no dejar ningún campo en blanco):

1. Presiona el botón de envío. ¿Apareció un evento gtm.formSubmit en la consola de vista previa y depuración? (Editar: ahora se llama Form Submission, en lugar de gtm.formSubmit). Si no es así, entonces el escuchador de eventos automáticos de GTM no funcionará con este formulario y deberá elegir la siguiente opción de seguimiento de formularios que se describe en esta entrada del blog.
   
2. Si el evento Form Submission apareció en la consola de Vista previa y Depuración, entonces debería hacer otra prueba – intente dejar por lo menos un campo del formulario requerido vacío y envíe el formulario de nuevo. De esta manera imitarás un error en tu formulario:
   1. Si el evento Form Submission se dispara una vez más, entonces debe marcar otras opciones de seguimiento de formularios mencionadas en esta entrada del blog.
   2. Si el evento de envío de formularios no se disparó, ¡es genial! Significa que GTM rastreará sólo las presentaciones de formularios que se completaron con éxito (y esto es exactamente lo que necesitas).

Genial! Hemos identificado que nuestro formulario puede ser rastreado con el escuchador de formularios incorporado en el GTM. Vamos a crear un disparador específicamente para ese formulario. ¿Recuerdas el evento de envío de formularios que se mencionó anteriormente? Haga clic en él (en el modo de vista previa y depuración), y luego haga clic en Variables.

Luego desplácese hacia abajo y comience a buscar cualquier variable de formulario que sea única para ese formulario. Por lo general, será la variable Form ID, en otras ocasiones – Form Classes (pero Form ID es la mejor opción (si es posible)). Como pueden ver en la imagen de abajo, he enviado un formulario (del cual la variable Form ID es form_contact2).

Este es un buen identificador que no se usa en ningún otro elemento del sitio web, así que lo usaré para mi disparador:

1. Ve a Triggers y haz clic en New
2. Haga clic en la sección de configuración del disparador y elija el tipo de disparador – Presentación deformularios
3. Haga clic en Comprobar la validación y establezca la regla La URL de la página coincide con RegEx (.*). Esta regla significa que este disparador de envío de formularios estará disponible en todas las páginas. Si desea que sólo sea accesible en determinadas páginas, puede añadir reglas más específicas, como la URL de la página contiene /contact-us/ (depende de la URL de su formulario de contacto).
4. Entonces configura este disparador para que dispare sólo en algunas formas e introduce la siguiente regla: El ID de la forma es igual a contacto_forma2.
   1. Si no ves la variable Form ID – Actívalo en la lista de variables incorporadas de Google Tag Manager.
   2. El ID de formulario puede (y probablemente lo hará) ser diferente en tu situación (comparado con mi ejemplo).

Probemos

1. Asigna este nuevo disparador a la etiqueta de Google Analytics que creaste al principio de esta entrada de blog.
2. Abre (o actualiza) un modo de vista previa y depuración, actualiza una página web con un formulario que quieras rastrear.
3. A continuación, rellena el formulario y envíalo. Si la etiqueta de Google Analytics se disparó, ¡son buenas noticias! También (si es posible), intenta enviar un formulario diferente en tu sitio web: en caso de que el envío sea exitoso, una etiqueta GA no debería dispararse.

#2. Seguimiento de la página «Gracias» con el Google Tag Manager

Si el listener de formularios estándar del Administrador de etiquetas de Google no funciona en su caso, debe comprobar si ese formulario redirige al usuario después de un envío correcto a otra página.

• Si es así, ¿a qué URL (dirección web) se redirige?
  
  • ¿Es esa dirección única?
  • Si es así, ¿pueden los usuarios navegar a esa página sin enviar un formulario? Si la respuesta a la última pregunta es no , entonces puedes crear un disparador de páginas que dispare sólo en esa éxito página. Sugerencia: siempre puedes revisar tus informes de flujo de comportamiento de Google Analytics para ver si los usuarios acceden éxito desde diferentes lugares de su sitio web. Su objetivo aquí es evitar las visitas accidentales al éxito (también conocido como página de «Gracias») tanto como sea posible.

Ahora vamos a crear un disparador que dispare sólo en el éxito página.

1. Ir a Triggers en Google Tag Manager
2. Presiona el botón Nuevo
3. Elija el tipo de disparador – Pageview y Algunas visitas a la página
4. Si el visitante es redirigido a https://www.example.com/form/thankyou.html, entonces puede establecer una de las siguientes reglas para este disparador:
   1. El camino de la página es igual a /form/thankyou.html.
   2. o el URL de la página contiene /form/thankyou.html. Intenta ser lo más específico posible. Establecer sólo «gracias» como la regla para este disparador puede no ser la mejor idea porque puede haber otras páginas, que pueden contener esa palabra (¡y no queremos eso!) en el URL.
5. Y no olvides nombrar correctamente el disparador – «Pageview – Envío de formulario exitoso». El título debe ser claro, de lo contrario, tendrás un lío en tu cuenta de Google Tag Manager (a largo plazo). Puedes obtener más información acerca de los consejos sobre nombres (también conocidos como Convención sobre nombres) aquí

Probemos

1. Asigna este nuevo disparador a la etiqueta de Google Analytics que creaste al principio de esta entrada de blog.
2. Abre (o actualiza) un modo de vista previa y depuración, actualiza una página web con un formulario que quieras rastrear.
3. A continuación, rellena el formulario y envíalo. Después de haber enviado el formulario, serás redirigido a una página de «Gracias» – si la etiqueta de Google Analytics es despedida, ¡buen trabajo! También (si es posible), intente enviar un formulario diferente en su sitio web (para ver si la etiqueta no se disparó por accidente).

#3. Rastree los envíos de formularios AJAX con el Google Tag Manager

Si está leyendo esta parte, es probable que su formulario no esté enviando eventos válidos de envío de formularios y no esté redirigiendo a los usuarios a una página de «agradecimiento». Probablemente sólo se refresca a sí mismo y luego muestra el mensaje «Ha rellenado con éxito el formulario» sin que la página se actualice. Hay una gran posibilidad de que este formulario esté usando AJAX. Sugiero que se salte toda la palabrería técnica de aquí (ya que no soy un desarrollador + no creo que sea capaz de explicar claramente cómo funciona). La única cosa que debes saber aquí es que el AJAX escucha.

Bounteous ha compartido un increíble escuchador AJAX para GTM que todo el mundo puede utilizar de forma gratuita. Aquí tomaremos prestado su código para rastrear los envíos de formularios. Copia el código de abajo y pégalo en el tag HTML personalizado del Google Tag Manager:

Ponga esa etiqueta HTML personalizada para disparar en todas las páginas. Ahora, vamos a comprobar si un formulario está construido en AJAX:

1. Habilitar (o refrescar) el modo de vista previa y depuración.
2. Refrescar la página web con un formulario.
3. Intenta enviar el formulario (sin errores).
4. ¿Apareció el evento ajaxComplete en la consola de vista previa y depuración?
   1. Si es así, el formulario está usando AJAX.
   2. Si no, pasa al siguiente capítulo de esta entrada de blog.

Si su respuesta a las preguntas anteriores fue Sí, echemos un vistazo a lo que podemos hacer con ese formulario AJAX. Haga clic en el evento ajaxCompletar en el modo de vista previa y depuración y, a continuación, haga clic en Capa de datos:

Parece difícil para un no-desarrollador, ¿verdad? Pero es más fácil de lo que crees. Estos son los datos que se pasaron a la capa de datos después de haber enviado el formulario con éxito, cada línea es un punto de datos separado de la capa de datos que puede ser usado como una variable de la capa de datos en el GTM. Usted debe buscar algo que ayude a identificar el envío exitoso del formulario. Desplácese hacia abajo y busque «respuesta».

Echemos un vistazo más de cerca. ¿Puedes ver el mensaje «Este mensaje ha sido enviado con éxito»? ¡Bingo! Podemos usarlo como un disparador.

Primero, vamos a crear una variable de la capa de datos en el Google Tag Manager.

1. Ir a Variables
2. Desplácese hacia abajo hasta la variable definida por el usuario y pulse Nuevo
3. Haga clic en Configuración de la variable y elija el tipo de variable – Variable de la capa de datos
4. Introduzca el nombre de la variable de la capa de datos – attributes.response. Deje todos los demás ajustes como están.
5. Mi recomendación para el título de esta variable GTM es dlv – attributes.response («dlv» significa Data Layer Variable).

Probablemente adivinen por qué introduje attributes . response como Nombre de la Variable de la Capa de Datos, en lugar de sólo response. Veamos más de cerca la Capa de Datos en el modo de Vista Previa y Depuración. En la línea 2 ves el nombre de evento ajaxComplete – es el mismo nombre que aparece en la vista previa y en el lado izquierdo de la consola de depuración. Luego vemos atributos que es un objeto que contiene varios puntos de datos (pares clave-valor). Y la respuesta es una de esas claves.

Así que cuando queremos decirle al Administrador de etiquetas de Google que estamos interesados en el valor de la respuesta, tenemos que decir la ruta exacta a esos datos. En nuestro caso, son los atributos de respuesta de →. Cada nivel de la ruta debe ser separado con el punto → attributes .response . Otro ejemplo: digamos que estás interesado en los datos del servidor (de esa respuesta AJAX tan exacta). En ese caso, el Nombre de la Variable de la Capa de Datos debe ser attributes .headers.Server .

Después de haber creado la variable attributes. response Data Layer en el Google Tag Manager, vamos a depurar. Actualizar el modo de vista previa y depuración y actualizar la página donde está el formulario AJAX. Para fines educativos/de prueba, estoy utilizando los formularios de este sitio web (usa el ejemplo 1). Siéntase libre de probarlos usted mismo.

Rellene el formulario y envíelo. Haz clic en el evento más reciente de ajaxComplete en la consola de Vista Previa y Depuración, luego navega a la pestaña de Variables y encuentra la nueva variable dlv – attributes.response. Si lo has hecho todo correctamente, debería tener este aspecto:

Ese es un mensaje del formulario enviado correctamente. Si el valor de esa variable no está definido, entonces deberías empezar a buscar errores. Los más comunes son los errores en el nombre de la variable o la ruta de la variable mal definida. Algunos intentan usar response en lugar de attributes.response.

Ahora vamos a crear un disparador que se dispara cuando el evento es ajaxComplete Y nuestra nueva variable de Capa de Datos contiene texto El mensaje ha sido enviado con éxito.

1. Ve a Triggers y haz clic en New
2. Elija Tipo de disparador – Evento personalizado. Si eres nuevo en esto, Evento personalizado = Evento de capa de datos. El oyente AJAX de ‘Bounteous’ crea un evento de Capa de datos(a través del método dataLayer.push) cada vez que se realiza una solicitud AJAX.
3. Introduzca el nombre del evento – ajaxComplete
4. Este disparador debería disparar sobre algunos eventos personalizados.
5. Definir una condición cuando el disparador se disparará – dlv – attributes.response contiene El mensaje ha sido enviado conéxito.

Probemos

1. Asigna este nuevo disparador a la etiqueta de Google Analytics que creaste al principio de esta entrada de blog.
2. Abre (o actualiza) un modo de vista previa y depuración, actualiza una página web con un formulario que quieras rastrear.
3. Luego rellena el formulario AJAX y envíalo. Después de un envío exitoso, la etiqueta de Google Analytics debería dispararse (se mostrará en el modo de vista previa y depuración). También puede consultar los informes de eventos en tiempo real de Google Analytics).

Cosas a tener en cuenta cuando se rastrean los formularios AJAX:

1. La respuesta de tu formulario puede ser diferente, así que intenta ajustar mi tutorial a tu situación.
2. Si los desarrolladores cambian los datos de la respuesta, tu disparador fallará. Informa a los desarrolladores sobre tu implementación del GTM.
3. Si la página contiene más de un formulario AJAX, intente buscar más información en la capa de datos que puede ayudar a Google Tag Manager a diferenciar esos formularios.

#4. Rastrear los envíos de formularios con el disparador de visibilidad de elementos

Uno de los más impresionantes disparadores en el GTM (en mi opinión) es el disparador de la Visibilidad del Elemento. Le permite rastrear cuando un elemento en particular aparece en la pantalla (debido al desplazamiento o a otras circunstancias).

La misma técnica puede aplicarse a los formularios cuando aparece un mensaje particular (por ejemplo, «Gracias») después de que un formulario ha sido enviado con éxito.

Lo primero que hay que hacer aquí es inspeccionar el mensaje de éxito de un formulario. Tendremos que encontrar la forma de indicar al administrador de etiquetas de Google en qué elemento particular del sitio web estamos interesados.

Después de enviar el formulario con éxito, haga clic con el botón derecho del ratón en el mensaje de éxito y elija Inspeccionar elemento.

A continuación, verás las herramientas de desarrollo del navegador que contienen diversa información sobre el mensaje: su contenido, la clase de CSS, etc. En el ejemplo que se muestra a continuación veo que el mensaje tiene una clase «gracias» que podría utilizarse como condición en el disparador de visibilidad del elemento. Era incluso mejor si el mensaje de éxito tenía un parámetro llamado «id» pero como no está disponible, usaremos la clase CSS.

Vayamos a tu contenedor de Google Tag Manager y vayamos a Triggers. Crea un nuevo disparador y elige Visibilidad del elemento como su tipo. El ingrediente clave aquí es el método de selección que ayudará a GTM a entender lo que estamos buscando.

El método de selección tiene dos opciones: Elemento ID y Selector CSS. Dado que el mensaje de éxito en mi ejemplo no tiene id (pero «clase», vamos a ir con el Selector CSS.

En el campo del Selector de Elementos, necesitamos pegar esa clase «gracias». En CSS, cada clase se define con un punto delante de ella, así que hagamos lo mismo.

Por último, asegúrese de marcar «Observar los cambios de DOM». Este ajuste significa que si un elemento aparece en la pantalla no debido a un desplazamiento, sino bajo otras circunstancias (por ejemplo, «simplemente aparece»), el GTM lo captará (lo más probable).

Eche un vistazo a la siguiente captura de pantalla. Si quieres, puedes hacer algunos otros ajustes pero lo que hice fue un mínimo.

Guarda el disparador.

Probemos

1. Asigna este nuevo disparador a la etiqueta de Google Analytics que creaste al principio de esta entrada de blog.
2. Abre (o actualiza) un modo de vista previa y depuración, actualiza una página web con un formulario que quieras rastrear.
3. A continuación, rellena el formulario y envíalo. Una vez enviado con éxito, en la consola de P&D verás el evento gtm .elementVisibility. Haz clic en él y verás que la etiqueta GA se ha disparado. Si no ves el evento gtm.element Visibility, es probable que hayas cometido algún error en el campo Método de selección o en el selector de CSS. O se olvidó de activar la casilla de verificación Observar cambios en el DOM .

Si tu mensaje de éxito no tiene un ID o una clase CSS apropiada, tendrás que sumergirte más profundamente en los selectores CSS porque sus posibilidades son enormemente enormes.

#5. Escribir tu propio formulario Escuchador de auto-evento

Sí, sé que esto suena complicado. En realidad, esto no puede estar más lejos de la verdad. En una de mis entradas del blog, he explicado cómo puedes escribir un auto-escucha de eventos sin habilidades de codificación. Definitivamente deberías comprobarlo.

Los oyentes de eventos automáticos son estas funciones de JavaScript súper útiles que rastrean interacciones particulares en una página web. En caso de que algo notable ocurra, disparan eventos de Capa de Datos que pueden ser usados como disparadores en el GTM. Además, esos eventos contienen datos valiosos que pueden ser transferidos a otras herramientas, como Google Analytics, Adwords, Mixpanel, lo que sea.

Por defecto, el Google Tag Manager ofrece un Escuchador de Auto-Eventos de Forma incorporado, pero como ya sabes, su soporte es bastante pobre (de lo contrario, esta entrada de blog no existiría).

De todos modos, en la entrada de blog mencionada anteriormente, he explicado 7 pasos sobre cómo puedes validar la idea y crear un receptor de eventos automáticos. Y para mayor claridad, lo ilustraré con el ejemplo real.

Antes de continuar, comprueba qué tipo de formulario estás usando. ¿Está hecho a medida y creado exclusivamente para ti? Si es así, pase al capítulo 6 de esta entrada de blog. De lo contrario, continúe leyendo.

Si tu sitio web funciona con WordPress, entonces definitivamente estás usando algún tipo de plugin de formulario. Averigua su nombre/marca/título/etc. ¿Lo has encontrado? Sí. Déjame llevarte a través del proceso de 7 pasos de escribir tu propia forma de auto-escucha de eventos sin habilidades de codificación.

Como ejemplo, he elegido Gravity Forms, un plugin de WordPress.

PASO 1. Verificar si hay alguna solución preparada

En primer lugar, hay que comprobar si hay un oyente de Gravity Forms GTM preparado en algún lugar de la web. La última vez que lo comprobé, no había ninguno. Aunque se podría decir Hey, he buscado en Google «Gravity Forms Google Tag Manager» y hay algunos tutorialestodo lo que puedo decir es que no son tan buenos como podrías pensar.

Traté de rastrear la forma de gravedad una vez. El problema era que el formulario enviaba un evento de envío de formulario incluso si el formulario se enviaba vacío (¡sin campos rellenados!). Y esas entradas del blog no me ayudaron a resolver este problema, así que tuve que encontrar una forma de evitarlo.

Ahí es donde este método de rastreo de formularios GTM #4 se volvió realmente útil. Continuar leyendo.

PASO 2. Comprobemos si hay una API de JavaScript

Abre Google e introduce la API de Javascript de Gravity Forms. Es crucial que busques la API de JavaScript, no la API normal. Los resultados de tu búsqueda deberían verse así:

El segundo resultado de la búsqueda parece prometedor. Hagamos clic en él. Deberíamos estar un paso más cerca de escribir un auto-escucha de eventos.

PASO 3. Veamos qué métodos de la API de JS están disponibles

Ahora, comprueba si la API está bien documentada y es fácil de entender incluso para aquellos que no saben cómo codificar. Dado que queremos rastrear SOLAMENTE los envíos de formularios exitosos, deberíamos seguir buscando algunos términos que contengan «éxito», «envío de formularios», «confirmación», etc. ¿Entiendes bien la idea?

Lo que buscamos es algún tipo de método de API relacionado con los envíos exitosos. Honestamente, me llevó un tiempo encontrar una página adecuada en la documentación de Gravity Form (porque ofrecen MUCHO material).

En el lado izquierdo de la referencia de la API de los formularios de gravedad, encontrarás una barra de navegación. Ve a Ganchos > Filtros > Confirmaciones > gform_confirmation_loaded. Este gancho de JavaScript (gform_confirmation_loaded) se dispara cuando se carga la página de «Éxito» del formulario (¡que es exactamente lo que estamos buscando!).

¡Bingo! Estamos un paso más cerca del éxito, pero aún hay algo que debemos verificar.

PASO 4. ¿Los ejemplos de código están listos para usar y son muy simples?

Aunque la API ofrece métodos útiles y la documentación está muy bien escrita, todavía queda un requisito. ¿Es la referencia del API realmente a prueba de tontos? ¿Podrá un no-desarrollador utilizarla con facilidad?

Sinceramente, no es una práctica muy común escribir ejemplos de código súper sencillo en las referencias de la API que puedan ser útiles para no desarrolladores o principiantes. A veces es incluso casi imposible.

Por ejemplo, Wistia ofrece una referencia API Javascript muy bien escrita, pero los ejemplos no están diseñados para desarrolladores de nivel básico, por lo que ni tú ni yo podremos escribir nuestros propios oyentes de auto-eventos personalizados.

En el caso de Wistia, tenemos suerte de tener a Bounteous porque sus desarrolladores publicaron este impresionante oyente de Wistia para GTM. Pero todavía hay muchas situaciones en las que una solución de rastreo ya preparada simplemente no existe.

Bien, volvamos a las formas de gravedad. He navegado hasta el gancho de JavaScript gform_confirmation_loaded y he encontrado este ejemplo de código:

¡Esto es perfecto! Déjame explicarte lo que está pasando.

Este código está listo para ser usado. Dice: si gform_confirmation_loaded ocurre, inicia una función. Actualmente, esa función está vacía pero podemos incrustar fácilmente el evento dataLayer.push simplemente reemplazando el texto //código que se disparará cuando la página de confirmación se cargue con el código real de la capa de datos.

PASO 5. Añadir el evento dataLayer.push

Copie ese código de la documentación de la Gravity Forms API y péguelo en algún editor de texto plano o de código (por ejemplo, Notepad, Notepad++, Sublime, etc.)

Eliminar //código a ser disparado cuando se cargue la páginade confirmación

Prepara el código de evento dataLayer.push:

 window.dataLayer = window.dataLayer || []; window.dataLayer.push({ 'event': 'formSubmission', //puedes nombrarlo como quieras 'formID': formId });

¿Por qué añadí «formId»? Bueno, eso es porque el webhook JavaScript del Gravity Form devuelve el ID del formulario (ver function(evento, formId) ?). Es opcional, así que siéntase libre de quitarlo.

Ahora, fusiona el fragmento de código de la Forma de Gravedad con window.dataLayer.push. Así es como debería ser el resultado final:

¡Genial! ¡Estamos muy cerca de terminar el auto-escucha de eventos de la Forma de Gravedad!

PASO 6. Crear una etiqueta HTML personalizada y probar

En la cuenta del Administrador de etiquetas de Google, crea una nueva etiqueta HTML personalizada. Pegue el código que ha creado en el paso anterior.

Listo! Guarda la etiqueta y asigna el disparador que desees, por ejemplo, Todas las páginas (o sólo en aquellas páginas donde se encuentra el formulario).

No te olvides de probar al oyente con el modo de vista previa y depuración del GTM. Cargue la página con cualquier Formulario de Gravedad y complete un envío de prueba. Un evento de Capa de Datos llamado formSubmission debe aparecer en el flujo de eventos. Haga clic en él y compruebe qué datos se pasaron a la Capa de Datos. Debería verse así.

PASO 7. Éxito

Si todo ha funcionado como he descrito, cree una variable de la Capa de Datos formId (aprenda a acceder a los datos de la Capa de Datos) y cree un Disparador de Eventos Personalizados formSubmission. Utiliza esta variable y el trigger en tu Universal Analytics o cualquier otra etiqueta.

Enhorabuena! Has escrito tu primer GTM Auto-Event Listener. Si este método de seguimiento de formularios del Google Tag Manager no funcionó, sigue leyendo y tal vez encuentres lo que buscas.

#6. Seguimiento de formularios con dataLayer Events

Descargo de responsabilidad: Aunque este método de seguimiento de formularios es una solución igualmente robusta comparada con el Escuchador de Formularios del GTM estándar (véase la Técnica Nº 1), lo he colocado como opción Nº 6 en esta lista por una razón.

Cuando otros comerciantes se dirigen a mí para pedirme consejos sobre el seguimiento de formularios, esperan una solución en la que se pueda evitar el aporte del desarrollador. «Gestionesus etiquetas de marketing sin la ayuda de los desarrolladores» es una de las principales razones por las que empiezan a considerar el Google Tag Manager en primer lugar. Esta declaración fue uno de los puntos clave de «venta» de GTM cuando se lanzó, así que no es sorprendente que los vendedores esperen que esto sea 100% cierto. Aunque sabemos que en muchas situaciones la ayuda de los desarrolladores es muy aconsejable. Mi posición aquí:

1. Si tienes acceso a los desarrolladores y el Form listener de Google Tag Manager no te funciona, te recomiendo usar el método dataLayer.push que describiré más adelante.
2. Si no tienes acceso a los desarrolladores o están súper ocupados (y probablemente lo estén), entonces está bien seguir con otras técnicas mencionadas en esta entrada del blog. Sólo ten en cuenta que otras soluciones tienen una mayor posibilidad de romperse cuando los desarrolladores realizan actualizaciones constantes en un sitio web que estás rastreando. Esto se aplica especialmente a la técnica No. 7 – DOM scraping.

Espero haber dejado claro mi punto de vista y podamos continuar.

Como se mencionó anteriormente, si el receptor de formularios estándar de Google Tag Manager no funciona con su formulario, lo mejor es pedir al desarrollador que implemente un dataLayer.push() personalizado en la función de devolución de llamada que se invoca cuando se envía el formulario con éxito. El pedazo de código podría ser algo así como:

window.dataLayer = window.dataLayer || []; window.dataLayer.push({ 'event': 'formSubmission', 'formType': 'Contact us', 'formPosition': 'Footer'});

Necesitarás preparar una tarea corta pero bien escrita y clara para un desarrollador:

1. Primero, elegir un nombre para el evento. En el ejemplo anterior elegí » formSubmission».
2. Entonces piense en cualquier dato adicional que pueda necesitar. Escriba esos puntos de datos e intente categorizarlos.
   1. En mi sitio web imaginario, tengo varios tipos de formularios – «Contáctenos» y «Suscripción al boletín de noticias». Así que decidí tener un dataLayer variable formType.
   2. Otro parámetro útil (en mi opinión) es la posición del formulario, porque algunos formularios están en el pie de página, y otros en la barra lateral de un sitio web. ¿Por qué no hacerla otra variable dataLayer?
3. Si un desarrollador es nuevo en los eventos de dataLayer y en el Administrador de etiquetas de Google en general, entréguele un enlace a esta guía dataLayer.push con ejemplos claros. Explícales que necesitas un evento con variables adicionales empujadas a dataLayer después de haber enviado el formulario con éxito. Si los desarrolladores aún tienen preguntas, esta entrada del blog debería aclararlas.

Listo! Después de que el desarrollador implemente el dataLayer .push en todos los formularios, debería probarlo:

1. Abrir el modo de vista previa y depuración.
2. Actualizar la página con el formulario.
3. Intenta enviar el formulario:
   1. Deje al menos un campo obligatorio en blanco. En este caso, el evento dataLayer no debe ser empujado.
   2. Rellene todos los campos e intente enviarlos de nuevo. ¿Apareció el evento en la consola de vista previa y depuración? Debería verse así:
      
   3. Comprueba si todos los datos están correctamente empujados a la capa de datos. Haga clic en el evento FormSubmission y luego abra la pestaña Data Layer en la consola de Vista previa. Los datos deberían tener este aspecto:
      

Configurar las variables y los disparadores en el GTM. En mi ejemplo de dataLayer.push, hay dos puntos de datos que me gustaría usar como variables: formType y formPosition, por lo que necesito incluirlos en el Administrador de etiquetas de Google creando variables de la capa de datos.

1ª variable:
Título: dlv – formType
Tipo devariable: Variable de la capa de datos
Nombre de la variable de la capa de datos: formType
Deje todos los demás ajustes como están

2ª variable:
Título: dlv – formPosition
Tipo de variable: Variable de capa de datos
Nombre de la variable de capa de datos: formPosition
Deje todos los demás ajustes como están

Ahora, vamos a crear un disparador. Ve a Triggers y haz clic en New. Introduce los siguientes ajustes:

Tipo de disparador: Evento personalizado
Nombre del evento: formSubmission (puede variar dependiendo de su situación. Asegúrate de que tú y tu desarrollador usen el mismo nombre).
Este disparador se enciende: Todos los eventos personalizados. Esto significa que todos los eventos de formSubmission serán rastreados.

Probemos

1. Asigna este nuevo disparador a la etiqueta de Google Analytics que creaste al principio de esta entrada de blog.
2. Abre (o actualiza) un modo de vista previa y depuración, actualiza una página web con un formulario que quieras rastrear.
3. A continuación, rellena el formulario y envíalo. Una vez enviado correctamente, la etiqueta de Google Analytics debería dispararse (se mostrará en el modo de vista previa y de depuración). También puede consultar los informes de eventos en tiempo real de Google Analytics).

Sugerencia: en este ejemplo, recomendaría realizar algunos cambios en la etiqueta de evento de Google Analytics. Al principio de esta entrada de blog, sugerí crear una etiqueta de evento de GA con los siguientes valores:

• Envíode formulario como categoría de evento
• Formulario decontacto como Evento de Acción
• {{i1}{b1}como Etiqueta de Evento.{b}{b}

Ya que le pedimos a nuestro desarrollador que añadiera algunas variables adicionales a través de dataLayer.push, podemos utilizar estos datos y enviarlos a GA. Podríamos cambiar:

• Categoría del evento – desde la presentación del formulario hasta El envío de formularios: {{formType}}
• Acción de eventos – desde el formulario de contacto hasta {{{formPosición}}
• Deje la etiqueta del evento como {{Página URL}}

¿Cómo se mostrará este evento en los informes de eventos de Google Analytics? Digamos que un visitante se suscribe a nuestro boletín de noticias. Los valores empujados con el evento de Google Analytics serán:

• Categoría de evento: Envío de formularios: Suscripción al boletín de noticias
• Evento Acción: Pie de página
• Etiqueta del evento: https://www.analyticsmania.com/mega-blog-post/

#7. Rastrear las presentaciones de formularios con con raspado DOM

Este método nunca debería ser tu primera opción. Intenta usar los 6 métodos de seguimiento de formularios del Google Tag Manager antes de seguir leyendo este capítulo.

Si los desarrolladores actualizan a menudo el código del sitio web, deberías tratar el raspado de DOM como último recurso debido a su riesgo. Es mejor que «sin seguimiento de formularios», pero es menos robusto que otras opciones descritas en esta entrada de blog.

Aunque se gana mucha flexibilidad y agilidad, apenas depende de la estructura del front-end del sitio web. Incluso un pequeño cambio cometido por el desarrollador podría romper su implementación. Además, requiere cierto conocimiento de los conceptos de Javascript y DOM (lo cual no es una habilidad muy común entre los mercadólogos).

Para este ejemplo, usaremos DOM Element Variable . Se trata de una variable en el Google Tag Manager que te permite raspar el contenido directamente desde el Document Object Model (en otras palabras: con su ayuda puedes transferir cualquier texto de tu sitio web a una Variable y pasarlo a tus herramientas de Marketing (por ejemplo, Google Analytics)).

Ahora abramos una demostración Shopify store Brooklyn Theme y veamos todo en acción. Me gustaría pedir disculpas a la gente de Shopify de antemano por haber enviado correos electrónicos falsos a su sitio web de demostración (pero estoy seguro de que les parece bien ). Hay un formulario de inscripción en nuestra lista de correo al final de su página de inicio.

Ingresa a [correo electrónico protegido] en el formulario de Shopify y pulse Subscribe . Una página se actualizará, la dirección web cambiará a https://brooklyn-theme.myshopify.com/?customer_posted=true#contact_form, y ese pequeño formulario muestra un mensaje de «Gracias».

En este caso, podríamos rastrear fácilmente los envíos de formularios con el disparador de Pageview de la página de agradecimiento, pero imaginemos que la dirección (URL) de esa página no cambió. Esta no es una situación común, pero es posible. Ahí es donde la variable del elemento DOM podría ser útil. Podríamos crear un disparador que podría escanear un sitio web y buscar un mensaje de éxito «Gracias por suscribirte».

Primero, creemos una variable de elemento DOM buscando ese mensaje de éxito en particular. Pasa el cursor del ratón sobre el texto del mensaje de éxito, haz clic con el botón derecho del ratón y elige Inspeccionar .

Aparecerá una consola de desarrollo con mucho código HTML. Ten en cuenta que el código del mensaje de éxito ya está seleccionado en esa consola. Ese mensaje no tiene ningún ID único, por lo que tendremos que utilizar los selectores CSS.

En la parte inferior de la captura de pantalla, puedes ver una línea de selectores CSS, por ejemplo, div.note.form-success. Estos selectores pueden ayudarnos a identificar el elemento exacto del sitio web.

Vamos a crear una variable de elemento DOM y tratar de raspar el texto «Gracias por suscribirte».

1. Ir a Variables
2. Desplácese hacia abajo hasta las variables definidas por el usuario y haga clic en Nuevo
3. Elija el tipo de variable – DOMElemento Variable
4. Método de selección – Selector CSS
5. En el campo de selección de elementos introduzca formulario div.note-éxito
   
   ¿Ves lo que hice allí? Introduje el último selector de CSS de la captura de pantalla de arriba.
6. En caso de que hubiera más de un posible mensaje de éxito en un sitio web con un selector de CSS similar, habría utilizado un selector de CSS más largo, por ejemplo, «#contact_form div.note.form-success» (sin comillas)
   
7. Deja el nombre del atributo vacío.
8. El título de la variable podría ser DOM – Mensaje de éxito de la forma.
9. Presiona Guardar.

Probemos

1. Activar el modo de previsualización y depuración (o refrescar si ya se ha lanzado).
2. Actualice la página con el formulario (o elimine ?customer_posted=true#contact_form en la URL) e intente enviarlo.
3. Elige el evento Vista de página en la consola Vista previa y depuración y haz clic en Variables.
   
4. Si la variable DOM – Form Success Message tiene el valor de Thanks for subscribing, you did a good job.

Muy bien. Ahora tenemos que crear un disparador que depende de nuestra nueva variable DOM.

1. Ve a Triggers y haz clic en New
2. Elija el tipo de disparador – Pageview
3. Este gatillo se dispara: Algunas páginas
4. Introduce la siguiente condición: DOM – Mensaje de éxito del formulario es igual a Gracias por suscribirse. Esto significa que el disparador se disparará sólo en las páginas donde se muestra el mensaje de éxito del formulario a los visitantes.

No te olvides de hacer la prueba:

1. Asigna este nuevo disparador a la etiqueta de Google Analytics que creaste al principio de esta entrada de blog.
2. Abre un modo de vista previa y depuración (o actualiza), recarga una página web con un formulario que quieras rastrear.
3. Rellena el formulario y envíalo. Una vez enviado correctamente, la etiqueta de Google Analytics debería dispararse (se mostrará en el modo de vista previa y de depuración). También puede consultar los informes de eventos en tiempo real de Google Analytics).
4. Además, intente enviar un formulario con un error intencional y vea si la etiqueta se dispara (alerta de spoiler: no debería).

Palabra final

En esta entrada del blog, describí siete métodos de seguimiento de formularios con Google Tag Manager. Esta ha sido la guía más grande de este blog hasta ahora y espero que la hayan encontrado útil. Ahora debería ser capaz de rastrear muchos más formularios sin la ayuda de un desarrollador. Pero recuerda, está bien pedir ayuda al desarrollador. Si es posible, elige el métododataLayer.push en lugar de la raspadura DOM. Las soluciones robustas deberían ser su prioridad.

¿Me he saltado algo en este post? ¿Hay algún aspecto del seguimiento de formularios sobre el que quieras más información? ¡Déjame un comentario, y veamos qué se nos ocurre!