¿Estás haciendo seguimiento a los formularios abandonados con Google Tag Manager en tu web? Es de gran ayuda para obtener una solución gratuita, pues existen herramientas especializadas que nos ayudan en este punto con planes de pago mensual. Conocer no solo la cantidad sino las razones por los que un formulario es abandonado es tan importante como hacer seguimiento a los formularios correctamente llenados.

El proceso es más simple de lo que suena. Solo es necesario configurar una forma de rastrear cada vez que los usuarios empiezan a llenar un formulario. Luego se identifica el abandono y se envía la data a Google Analytics para su análisis. Pero ¿qué es un abandono de formulario? Se da este caso cuando un usuario inicia el llenado del formulario, no lo termina  y luego cambia de página o cierra el navegador. Si no inicia el formulario entonces no existe un abandono del mismo. Esta solución nos indicará qué campos fueron llenados antes de haber sido abandonado.

 

Seguimiento del Abandono

Vamos a utilizar un script adaptado por Julius Fedorovicius que debería trabajar en todo tipo de sitio web. Debemos incluir este script en una etiqueta HTML personalizado y activarlo solo en las páginas donde incluimos un formulario:

<script>
(function() {
if (typeof document.querySelectorAll === "undefined") {
return
}
window.addEventListener('beforeunload', function(e) {
findUnsubmittedForms().forEach(function(it) {
window.dataLayer.push({
'event' : 'FormAbandonado',
'eventCategoria' : 'Formulario Abandonado',
'eventCampos' : 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>

 

Configuración de Etiqueta

Al crear la nueva etiqueta solo debemos definir un nombre y elegir el tipo HTML personalizado para pegar el script completo en la sección HTML.

Formularios Abandonados con Google Tag Manager

Luego va a ser necesario configurar el activador que será del tipo Página vista. Aquí debemos indicar que se active solo en las páginas que incluyen un formulario para cumplir con las buenas prácticas de etiquetado y evitar que trabaje en páginas que no lo requieren:

Formularios Abandonados con Google Tag Manager

Ahora tenemos forma de hacer seguimiento a los formularios abandonados, pero no vamos a poder probar esta etiqueta con la vista previa de Google Tag Manager. Así que nos toca enviar la data a Google Analytics.

Enviar la Data a Google Analytics

Es importante mencionar que podemos personalizar algunas opciones dentro del script. Básicamente con las que tienen que ver con el Data Layer en esta sección:

window.addEventListener('beforeunload', function(e) {
findUnsubmittedForms().forEach(function(it) {
window.dataLayer.push({
'event' : 'FormAbandonado',
'eventCategoria' : 'Formulario Abandonado',
'eventCampos' : it.history.join(" > ")

Es posible modificar el nombre del evento que, de forma predeterminada, es FormAbandonado. Puedes colocar el nombre que desees siempre y cuando coincida con la configuración que vamos a realizar más adelante. De la misma forma el valor de eventCategoria puede cambiarse. Este valor (Formulario Abandonado) es el que tomaremos como la Categoría del Evento que vamos a crear en la nueva etiqueta que envía la data a Google Analytics. Por último, dentro de los valores de eventCampos se van a mostrar los diferentes campos que el usuario sí llenó separados de un símbolo (» > «) que puede ser reemplazado por lo que deseemos.

Crear Variables

Para lograr enviar la data a Google Analytics va a ser necesario configurar 2 variables que coincidan con la sección del script recién mencionada: eventCategoria y eventCampos. para lograrlo solo necesitamos crear variables definidas por el usuario eligiendo el tipo Variable de capa de datos. Debemos colocar en la sección Nombre de variable de capa de datos el mismo nombre que tenemos en el script para que quede así:

Formularios Abandonados con Google Tag Manager

Estas 2 variables nos van a ayudar a definir los valores del evento que vamos a crear.

Crear Activador

La configuración es tan sencilla como la que hicimos con las variables. Solo elegimos el tipo Evento personalizado y en Nombre del evento colocamos el mismo que hemos configurado en el script inicial (deben coincidir exactamente):

Formularios Abandonados con Google Tag Manager

 

Crear Etiqueta

Solo reata configurar el evento con toda la data que necesitaremos para analizar los abandonos en Google Analytics. Debe quedar así:

Formularios Abandonados con Google Tag Manager

 

Esta etiqueta debe ser lanzada por el activador del tipo evento personalizado FormAbandonado que se acaba de crear.  Luego debemos ingresar al modo vista previa para poder verificar que todo funcione correctamente.

 

Comprobación Final

Ahora es momento de acceder a la página que incluye el formulario. En este ejemplo estamos en una de las páginas demo que utilizamos en Negzy y colocamos la información en los campos nombre, email y asunto:

Formularios Abandonados con Google Tag Manager

 

Pero el abandono no se completará hasta que cambiemos de página o cerremos la ventana del navegador con la página. Recién al realizar este último paso vamos a poder ver los resultados en los informes en tiempo real (eventos) de Google Analytics:

Formularios Abandonados con Google Tag Manager

 

Una vez verificada nuestra etiqueta debemos publicar los cambios en Google Tag Manager para que empiece a guardar el comportamiento de todos los usuarios que abandonan el formulario. Lo que nos toca es poder definir qué campos son los que normalmente evitan conseguir mayor cantidad de registros para optimizar el formulario y mejorar nuestra tasa de conversión. ¿Lo probaste en tus páginas? Coméntanos si te fue útil y qué aplicación piensas darle.