Seguimiento de abandono de formularios con Google Tag Manager

El seguimiento del abandono de formularios es una herramienta esencial para la optimización de la tasa de conversión. No solo proporciona datos sobre los puntos de salida, sino que también ofrece información valiosa sobre el comportamiento del usuario en cada campo del formulario. Al medir el abandono de campos, se obtiene un entendimiento más profundo de las razones por las cuales los usuarios abandonan el formulario. En este artículo, exploraremos cómo realizar el seguimiento del compromiso con los formularios utilizando Google Tag Manager (GTM), cómo enviar esos datos a Google Analytics y presentaremos un estudio de caso sobre la implementación práctica del seguimiento del abandono de formularios.

Si bien existen soluciones como Hotjar que ofrecen un enfoque más elegante para la analítica de formularios, a veces es preferible mantener todos los datos en un solo lugar. Si tu presupuesto es limitado o simplemente deseas centralizar tu información en Google Analytics, sigue leyendo.

En este artículo:

• Aprenderás a rastrear el abandono de formularios con Google Tag Manager.
• Descubrirás cómo enviar datos de abandono de formularios a Google Analytics.
• Exploraremos cuándo el seguimiento del abandono de formularios puede fallar.
• Te mostraré un estudio de caso sobre la implementación del seguimiento de abandono de formularios en una situación de la vida real.

Escucha de abandono de formularios

El script desarrollado por Simo Ahava, y posteriormente actualizado por Lauri Pisspanen, permite rastrear automáticamente el abandono de formularios, incluso si hay múltiples formularios en una misma página. Cuando un formulario es abandonado, es decir, cuando el visitante navega a otra página o cierra la pestaña del navegador, este script genera un evento en el Data Layer. Este evento registrará qué campos del formulario fueron interactuados por el visitante, el cual se podría presentar de la siguiente manera:

nombre > apellido > dirección > número de tarjeta de crédito

Este ejemplo indica que el último campo completado por el visitante fue el de número de tarjeta de crédito, sugiriendo que el siguiente campo puede ser el responsable del abandono. Si el usuario hace clic en enviar, no se creará un evento de abandono de formulario (aunque existen algunas limitaciones, ¡sigue leyendo!).

Es importante tener en cuenta que el listener de abandono de formularios de Lauri no registrará la historia exacta de las interacciones. Por ejemplo, si el visitante llena el campo de apellido y luego regresa al campo de nombre, esta interacción no se reflejará en los informes de eventos de Google Analytics.

¿Cuál es el plan?

1. Primero, necesitamos crear una etiqueta HTML personalizada en Google Tag Manager con el código del listener de abandono de formularios. Esta etiqueta debe activarse solo en las páginas que contienen tus formularios (no en todas las páginas, ya que la optimización de etiquetas es una de las mejores prácticas de GTM).
2. El listener personalizado generará un evento en el Data Layer cada vez que se abandone un formulario. Debemos «enseñar» a Google Tag Manager a reconocer ese nuevo dato creando variables del Data Layer y un trigger personalizado.
3. Finalmente, crearemos una etiqueta de evento de Google Analytics que enviará los metadatos del evento desde el Data Layer a los servidores de Google Analytics.

Creando una etiqueta HTML personalizada en Google Tag Manager

Accede a tu cuenta de GTM, dirígete a la sección de Etiquetas y haz clic en Crear nueva. Selecciona el tipo de etiqueta HTML Personalizado y pega el siguiente fragmento de código:

<script>
(function() {
  if (typeof document.querySelectorAll === "undefined") {
    return
  }
    window.addEventListener('beforeunload', function(e) {
      findUnsubmittedForms().forEach(function(it) {
        window.dataLayer.push({
          'event' : 'formAbandonment',
          'eventCategory' : 'Form Abandonment',
          'eventAction' : it.history.join(" > ")
        })
      })
    })

    var history = {}

    window.addEventListener("load", function() {
      document.addEventListener("change", function(e) {
        var target = e.target
        if (target && target.tagName && (target.tagName.toUpperCase() == "INPUT" || target.tagName.toUpperCase() == "TEXTAREA" || target.tagName.toUpperCase() == "SELECT")) {
          var inputName = target.getAttribute("name")
          var form = target.form
          if (form && inputName) {
            var formName = form.getAttribute("name")
            if (typeof history[formName] == "undefined") {
              history[formName] = []
            }
            if (history[formName].slice(-1) != inputName) {
              history[formName].push(inputName)
            }
          }
        }
      })
    })

    function findUnsubmittedForms() {
      return Object.keys(history).filter(hasNoFormSubmitEvent(window.dataLayer)).map(findFormFromHistory).filter(notEmpty)
    }

    function hasNoFormSubmitEvent(dataLayer) {
      return function(name) {
        return dataLayer.filter(isFormSubmitEvent).map(getFormName).indexOf(name) == -1
      }
    }

    function isFormSubmitEvent(e) {
      return e.event === 'gtm.formSubmit'
    }

    function getFormName(e) {
      return e['gtm.element'].name
    }

    function findFormFromHistory(name) {
      return {
        name: name,
        history: (history[name] || [])
      }
    }

    function notEmpty(form) {
      return form.history.length > 0
    }

})()
</script>

En la sección de activación de la etiqueta, haz clic en el botón con el icono de más (Crear nuevo trigger).

Ingresa la siguiente configuración:

• Título – Pageview – Página de contacto (ajusta el título según la página donde se encuentre tu formulario).
• Tipo de trigger – Pageview
• Este trigger se activa en – Algunas vistas de página
• Regla: Page Path contiene /contact-us.
  En lugar de /contact-us, deberías ingresar la dirección de la página donde se encuentra tu formulario. Si tu sitio web tiene varios dominios, se recomienda utilizar URL de página en lugar de ruta de página.

Guarda tanto el trigger como la etiqueta. Sin embargo, en este momento no es posible realizar pruebas, ya que el evento de abandono del formulario solo se activará al cerrar la pestaña del navegador o navegar a otra página, por lo que la consola de vista previa y depuración de GTM no mostrará nada. Continúa leyendo y te mostraré cómo probar todo.

Crear trigger y variables del Data Layer

Antes de crear la etiqueta de evento para Universal Analytics, deberás crear un Trigger de evento personalizado y dos Variables del Data Layer.

El listener de abandono de formularios generará un evento en el Data Layer llamado formAbandonment cuando se abandone un formulario:

dataLayer.push({
 'event': 'formAbandonment',
 'eventCategory': 'Form Abandonment',
 'eventAction': 'campos que fueron completados por un visitante'
});

Como puedes observar en el ejemplo anterior, el evento formAbandonment contiene dos variables: eventCategory y eventAction. Esta información es muy valiosa, así que vamos a transferirla a Google Analytics.

Podemos utilizar el evento formAbandonment como un trigger personalizado, que se verá de la siguiente manera:

Y las dos Variables del Data Layer deben tener esta apariencia:

Enviar datos a Google Analytics

Ahora, pasemos a la etiqueta de evento:

• Selecciona Tipo de etiqueta – Universal Analytics
• Ingresa el ID de seguimiento de Google Analytics
• Elige Tipo de seguimiento – Evento
• Completa los campos de Categoría y Acción del evento con las Variables del Data Layer que acabas de crear.
• He configurado el campo de No Interacción en Verdadero, ya que esto no es realmente una interacción del usuario, sino más bien metadata sobre la vista de página, pero puedes configurarlo como desees.
• Importante: ve a Más configuraciones -> Campos a establecer, y agrega lo siguiente:
  • Nombre del campo: transport
  • Valor: beacon (esta función enviará los datos cuando un usuario abandone el formulario)

No olvides asignar el trigger formAbandonment a esta etiqueta de evento de Google Analytics.

En resumen:

• El listener de abandono de formularios detecta que un visitante ha abandonado el formulario y luego genera un evento en el Data Layer con eventCategory y eventAction.
• El evento del Data Layer activa la etiqueta de evento de Google Analytics y los valores de eventCategory y eventAction se transfieren a los servidores de GA.

Pruebas

Activa el modo de vista previa y depuración de GTM (si no funciona, consulta estas 10 soluciones para arreglar el modo de vista previa) y actualiza la página donde se encuentra tu formulario. Completa varios campos (pero no todos) y luego cierra la pestaña del navegador. Luego, abre los informes de eventos en tiempo real de GA y haz clic en «Eventos (últimos 30 minutos)», ya que los eventos de no interacción solo se muestran en esta sección de los informes en tiempo real.

¡Eso es todo! Estás listo para comenzar.

Si el evento no apareció, revisa el siguiente capítulo de este artículo. También recomiendo verificar los errores más comunes en Google Tag Manager.

¿Por qué no está funcionando el seguimiento de abandono de formularios?

Si has intentado rastrear formularios antes, ya sabes que puede ser un verdadero dolor de cabeza. El hecho de que existan al menos 5 métodos de seguimiento de formularios con GTM lo demuestra. El seguimiento de abandono de formularios no es una excepción.

El problema principal con el seguimiento de formularios a través de Google Tag Manager es que no existen estándares globales sobre cómo deben desarrollarse los formularios. Algunos desarrolladores pueden preferir una tecnología (por ejemplo, AJAX) sobre otra, lo cual es perfectamente válido. Recuerda que no hay un “método único para rastrearlos todos”.

Estas son algunas razones por las cuales el seguimiento del abandono de formularios puede no haber funcionado para ti:

#1. Navegador no compatible

El visitante debe usar Chrome, Firefox, Microsoft Edge, Opera o un navegador moderno de Android. Safari (incluso en iOS) e Internet Explorer no admiten esta función, por lo que su abandono de formularios no se rastreará. Aquí tienes una lista completa de navegadores (no) compatibles: Caniuse.

#2. Etiqueta <form>

El formulario debe estar desarrollado utilizando la etiqueta <form> de HTML. He visto formularios que solo utilizan <div>, lo que impide que este listener los rastree. Puedes verificar esto inspeccionando el formulario.

#3. Atributo “name”

Cada campo de entrada del formulario debe contener un atributo “name” para poder rastrear los títulos de los campos del formulario.

O necesitarás editar el código del listener de abandono de formularios. Como no tengo mucha experiencia en Javascript y no quiero romper el sitio web, prefiero no editarlo. Si tienes acceso a desarrolladores, pídeles que te ayuden a editar el código.

#4. Evento “Submit” válido del formulario

El formulario debe generar un evento de submit válido en el navegador. El script de abandono de formularios de Simo Ahava y Lauri Piispanen escucha el evento de envío del navegador; si ocurre, no se disparará el evento de abandono del formulario.

Si tu formulario está construido con AJAX, el listener de abandono de formularios generará un evento si hay un envío exitoso del formulario.

En este artículo, mostraré un estudio de caso sobre este mismo problema, donde un formulario no genera un evento de submit válido y cómo se puede resolver.

Estudio de caso

Contexto

Este artículo fue inspirado por mi colega Nathan Hague, quien solicitó consejos sobre el seguimiento de formularios. En lugar de darle una respuesta directa, decidí publicar un artículo. Nathan, espero que encuentres esto útil.

El cliente de Nathan, Epic Charters, ofrece tours en yates de lujo, catamaranes y barcos de motor en Phang Nga Bay, Krabi, Phi Phi Islands, Racha Islands, Phuket y el mar de Andamán.

En su sitio web, verás un catálogo de varios barcos. Cada uno de ellos tiene un botón de Consulta que abre un formulario. Nathan me preguntó si podía rastrear el abandono de estos formularios y enviar los datos a Google Analytics.

Así que veamos qué pude hacer al respecto.

Investigación

Cualquier implementación de Google Tag Manager requiere una investigación inicial. Creé un contenedor de prueba en GTM, añadí (1) una etiqueta HTML personalizada con el listener de abandono de formularios, dos variables del Data Layer ((2) eventAction y (3) eventCategory), (4) un trigger personalizado (formAbandonment) y (5) una etiqueta de evento de Google Analytics. Con la ayuda de Tag Manager Injector (una extensión de Chrome), inyecté el código Javascript de mi contenedor de GTM en el código fuente del sitio web de Epic Charters (solo dentro de mi navegador; otros visitantes del sitio no se vieron afectados).

El siguiente paso fue la vista previa y depuración. Después de habilitar el modo de P&D en Google Tag Manager y actualizar la página de Epic Charters, apareció la consola de vista previa y depuración. Como puedes ver en la imagen, la etiqueta de seguimiento de abandono de formularios se activó, así que estaba listo para comenzar a probar (esto significa que un listener ahora está monitoreando los formularios abandonados en el sitio web).

Después de hacer clic en el botón Consulta, completé los dos primeros campos del formulario, cerré la pestaña del navegador y abrí los informes en tiempo real de Google Analytics. Esto fue lo que vi:

¡Increíble! Esto es un buen comienzo, ya que mi evento de abandonado de formulario fue capturado. Como puedes ver en la imagen, el valor de la acción del evento muestra que un visitante (yo) logró completar los dos primeros campos del formulario y luego abandonó (o navegó a otra página del sitio de Epic Charters).

Los nombres de los campos del formulario se capturaron correctamente porque todos ellos tienen el atributo “name”.

Además, este formulario está construido utilizando etiquetas <form> en HTML, que es un requisito para que funcione el listener de abandono de formularios:

Problemas

No obstante, no todo es perfecto aquí. Existen varios problemas:

1. Este formulario no genera un evento de envío válido. En su lugar, redirige al usuario a una página de «Gracias». Esto significa que, incluso después de un envío exitoso del formulario, el evento de abandonado de formulario se enviará a Google Analytics de todos modos.
2. No pude encontrar una manera sencilla de diferenciar (dentro de GTM) qué formulario fue abandonado. Como hay múltiples formularios en la misma página, estos datos son cruciales en los informes analíticos.

¿Cómo solucionarlo?

Ambos problemas mencionados deben ser resueltos por el desarrollador. Como ya he mencionado en mi artículo anterior sobre 22 mejores prácticas de Google Tag Manager, los desarrolladores no son tus enemigos. Está bien pedir su ayuda.

Solución al problema No.1

Para evitar eventos falsos de abandonado de formulario, el formulario debe generar un evento de submit válido en el navegador. Este es el mismo evento que se requiere para que el listener de eventos automáticos de formularios de GTM funcione. En otras palabras, si los triggers de seguimiento de formularios predeterminados de GTM no detectan tus envíos de formulario, entonces el listener de abandono de formularios enviará eventos falsos de abandonado de formulario. Para resumir, un desarrollador tendrá que editar el código fuente del formulario en consecuencia.

Solución al problema No.2

La mejor manera (en mi opinión) de rastrear qué formulario fue abandonado es pedir al desarrollador que envíe un dataLayer.push (con metadata adicional) cada vez que un visitante abra un formulario de consulta.

dataLayer.push({
 'event': 'enquiryFormOpened',
 'product': 'Luxury Power Boat'
});

El valor de la variable “product” debería cambiar dinámicamente según el formulario del producto que se abre.

Luego, crearía una variable del Data Layer llamada product  en Google Tag Manager y la agregaré a la etiqueta de evento de Google Analytics como Etiqueta de evento. Debe verse de la siguiente manera:

El resultado será que cada evento de abandono de formulario en Google Analytics también tendrá un producto específico como etiqueta del evento, lo que me permitirá analizar qué formularios de productos son los que más se abandonan.