Cómo configurar el análisis de seguimiento de formularios con Google Tag Manager y Google Analytics
Publicado: 2022-04-12La tasa de conversión es una de las medidas más simples y al mismo tiempo más importantes de la eficiencia del marketing. Muestra cuántos usuarios han completado una acción objetivo: realizó una compra, se registró para recibir correos electrónicos, solicitó una llamada, etc. Para registrar y analizar las ventas de comercio electrónico, tenemos Google Analytics, que es relativamente fácil de configurar. Sin embargo, se requiere más esfuerzo para rastrear los formularios enviados en un sitio.
Eso es porque los formularios son de diferentes tipos y usan diferentes tecnologías para enviar datos al servidor. Una vez que los datos se envían correctamente, se actualizan algunos campos del formulario. Otros muestran una ventana emergente. Un tercer tipo redirige al usuario a una página de agradecimiento. El método de seguimiento de formularios depende de la tecnología que se utilice.
En este artículo, le contamos cómo recopilar datos de formularios de diferentes maneras y transferirlos a Google Analytics.
Tabla de contenido
- Método 1. Página de agradecimiento separada
- Método 2. Activar formulario de envío en Google Tag Manager
- Paso 1. Activar variables de formulario
- Paso 2. Ajusta el gatillo
- Paso 3. Comprueba si el gatillo funciona
- Paso 4. Crea la etiqueta
- Paso 5. Configura tu target en Google Analytics
- Método 3. Disparador de disponibilidad de elementos en Google Tag Manager
- Método 4. Seguimiento de formularios que usan AJAX
- Paso 1. Crea una etiqueta para comprobar cómo funciona tu formulario
- Paso 2. Crear una variable de capa de datos
- Paso 3. Crea el disparador
- Método 5. Eventos de DataLayer como disparador
- Cuánto tiempo pasan los usuarios completando sus formularios
Método 1. Página de agradecimiento separada
Si el usuario es redirigido a una página separada con una URL diferente después de completar el formulario, el seguimiento de las visitas a esta URL es el método más fácil para rastrear el envío del formulario. Basta con que crees un target con el tipo “Landing Page” en Google Analytics.
Supongamos que desea realizar un seguimiento de los registros para un seminario web. La página de agradecimiento después de registrarse con éxito se ve así: https://www.site.com/registration/thankyou
En el panel de administración, en Configuración de vista , en Destinos, haga clic en Destino y luego en Personalizado . Especifique el nombre del objetivo, seleccione el tipo de objetivo e ingrese la dirección de la página de agradecimiento:
Lo que es importante tener en cuenta: la URL de su página de agradecimiento debe ser única, es decir, debe haber solo una página en el sitio con esa dirección y los usuarios no deben poder acceder a esta página sin completar el formulario. De lo contrario, Google Analytics puede registrar datos inexactos sobre el logro de su objetivo.
Los mejores casos de marketing de BI de OWOX
DescargarMétodo 2. Activar formulario de envío en Google Tag Manager
Si sus programadores configuraron correctamente la transmisión de datos desde un formulario por medio del botón de envío, entonces para el seguimiento de envíos de formularios puede usar el activador integrado de Google Tag Manager. A juzgar por los comentarios en Internet, esta situación se encuentra con poca frecuencia, pero vale la pena intentarlo.
Con este método, cuando un usuario completa y envía un formulario, el activador envía un evento gtm.formSubmit a la matriz dataLayer.
Nota: Antes de ir a la configuración, asegúrese de que la etiqueta Vista de página esté habilitada en Google Tag Manager para todas las páginas del sitio.
Paso 1. Activar variables de formulario
Para ello, abra el menú Variables en GTM, haga clic en Configurar y seleccione todas las variables en la sección Formularios:
Paso 2. Ajusta el gatillo
Necesita un ID de formulario o un atributo de clase de formulario para crear un activador. Puede verlos en el código HTML haciendo clic con el botón derecho en su formulario y haciendo clic en Explorar elemento en Firefox o Ver código en Chrome:
En nuestro ejemplo, la identificación del formulario es enviar-solicitud-formulario, que usaremos al configurar el activador.
Vaya al menú Activadores , haga clic en Nuevo , abra Configuración de activadores y seleccione Enviar formulario :
En la ventana que se abre, verá dos casillas de verificación:
Esperar etiquetas : si habilita esta opción, el formulario no se enviará hasta que se activen todas las etiquetas asociadas o hasta que expire el tiempo que especifique.
Verificar validación : es mejor habilitar esta opción. De lo contrario, el activador se activará incluso cuando el usuario no haya completado los campos obligatorios.
Después de activar la comprobación de errores, aparecen configuraciones adicionales. Si habilita el disparador, especifique la URL de la página que contiene su formulario. Y si activa el activador, especifique el ID del formulario que mencionamos anteriormente:
Proponga un nombre conveniente y comprensible para el activador, como Enviar una solicitud, y guárdelo.
Paso 3. Comprueba si el gatillo funciona
Antes de publicar cambios en un contenedor, utilice el modo de vista previa en Google Tag Manager. Abra la página con el formulario, complételo y presione enviar. En la consola de depuración, debería aparecer un evento gtm.formSubmit.
Si este evento no aparece, entonces este método de seguimiento no funcionará para usted. En ese caso, pruebe uno de los otros métodos descritos en este artículo.
Si el evento aparece, aún es necesario realizar una prueba más para verificar si el disparador funciona correctamente. Abra un formulario, deje algún campo obligatorio en blanco y envíe el formulario. Si vuelve a aparecer un evento gtm.formSubmit en la consola de depuración, el activador integrado funciona incorrectamente y no le ayudará. Si el evento no se transfirió, ¡genial! Vaya a los siguientes pasos.
Paso 4. Crea la etiqueta
Ahora debe crear una etiqueta que envíe información a Google Analytics de que se envió el formulario. Para hacer esto, vaya al menú Etiquetas , haga clic en Nuevo, abra Configuración de etiquetas y seleccione Google Analytics – Universal Analytics.
Para mayor claridad, puede nombrar la etiqueta del mismo modo que el disparador. A continuación, rellene los siguientes campos:
- Tipo de etiqueta: seleccione {{Configuración de Google Analytics}}
- Tipo de pista: seleccione "Evento"
- Categoría: lo mismo que la etiqueta y el activador por conveniencia
- Acción – Envío
- Etiqueta: por ejemplo, {{Form ID}})
- No interacción: deje "Falso"
Si desea activar la etiqueta, seleccione el disparador que creó en el Paso 3 y haga clic en Guardar :
¡Está listo! Puede verificar cómo funciona la etiqueta generada al enviar un formulario usando el modo de vista previa de Google Tag Manager o usando el informe de eventos en tiempo real en Google Analytics.
Paso 5. Configura tu target en Google Analytics
Una vez que publique el contenedor con cambios, debe configurar el objetivo en Google Analytics para considerar el envío de formularios como conversiones. Para hacer esto, agregue un nuevo objetivo propio en la configuración de vista de Google Analytics. Seleccione el tipo de evento y complete los campos Categoría, Acción y Acceso directo tal como lo hizo cuando configuró la etiqueta en Google Tag Manager:
Guarda el objetivo. Hecho. ¡Configuró el seguimiento de formularios sin cambiar ningún código en su sitio!
Método 3. Disparador de disponibilidad de elementos en Google Tag Manager
Si aparece una ventana en el sitio con un agradecimiento o un mensaje sobre el envío exitoso después de enviar un formulario, puede probar con otro disparador de GTM integrado. Se activa cuando aparece un elemento en particular en la pantalla (en nuestro caso, una ventana emergente) y envía un evento gtm.elementVisibility a la capa de datos.
Para configurar este disparador, debe conocer el selector de CSS del elemento monitoreado. Para encontrar este selector, haga clic con el botón derecho en la ventana y seleccione Ver código . Estás buscando la siguiente línea:
Para copiar el selector de CSS, haga clic derecho en la línea y seleccione Copiar – Copiar selector:
En nuestro ejemplo, el selector tiene este aspecto: #webinar_marketing_automation > div.
A continuación, cree un nuevo disparador seleccionando el tipo Visibilidad del elemento :
Rellene los siguientes campos:
- Nombre del activador: por ejemplo, "Obtener grabación del seminario web"
- Método de selección - Selector CSS
- Selector de elementos: inserte el valor que copió del código HTML de la ventana emergente.
- Regla de activación: si tiene un formulario en la página, deje la opción "Una vez por página". Si hay varios formularios y aparece un mensaje, puede seleccionar "Una vez por elemento".
- Luego marque la casilla "Registrar cambios de DOM".
- Activar condiciones de activación: al seleccionar "Algunos eventos de visibilidad", puede especificar la página donde aparece el mensaje emergente o el texto.
- Guarde el gatillo.
Después de crear el activador de Disponibilidad de elementos, debe ajustar la misma configuración que se describe en detalle en el Método 2:
- Agregue una nueva etiqueta a GTM que enviará datos de envío de formularios a Google Analytics y le adjuntará el disparador creado.
- Obtenga una vista previa de cómo funciona la etiqueta cuando se envía el formulario.
- En Google Analytics, configure el objetivo del evento para realizar un seguimiento de las conversiones.
Método 4. Seguimiento de formularios que usan AJAX
Si los formularios de su sitio web utilizan la tecnología AJAX, los datos se transfieren del navegador al servidor en segundo plano y la página no se vuelve a cargar. Para configurar el seguimiento del envío de formularios AJAX, puede usar este script de Lunametrics:
<script id="gtm-jq-ajax-listen" type="text/javascript"> (function() { 'use strict' var $; var n = 0; init(); function init(n) { // Ensure jQuery is available before anything if (typeof jQuery !== 'undefined') { // Define our $ shortcut locally $ = jQuery; bindToAjax(); // Check for up to 10 seconds } else if (n < 20) { n++; setTimeout(init, 500); } } function bindToAjax() { $(document).bind('ajaxComplete', function(evt, jqXhr, opts) { // Create a fake element for magically simple URL parsing var fullUrl = document.createElement('a'); fullUrl.href = opts.url; // IE9+ strips the leading slash from a.pathname because who wants to get home on time on Friday anyways var pathname = fullUrl.pathname[0] === '/' ? fullUrl.pathname : '/' + fullUrl.pathname; // Manually remove the leading question mark, if there is one var queryString = fullUrl.search[0] === '?' ? fullUrl.search.slice(1) : fullUrl.search; // Turn params and headers into objects for easier reference var queryParameters = objMap(queryString, '&', '=', true); var headers = objMap(jqXhr.getAllResponseHeaders(), '\n', ':'); // Blindly push to the dataLayer because this fires within GTM dataLayer.push({ 'event': 'ajaxComplete', 'attributes': { // Return empty strings to prevent accidental inheritance of old data 'type': opts.type || '', 'url': fullUrl.href || '', 'queryParameters': queryParameters, 'pathname': pathname || '', 'hostname': fullUrl.hostname || '', 'protocol': fullUrl.protocol || '', 'fragment': fullUrl.hash || '', 'statusCode': jqXhr.status || '', 'statusText': jqXhr.statusText || '', 'headers': headers, 'timestamp': evt.timeStamp || '', 'contentType': opts.contentType || '', // Defer to jQuery's handling of the response 'response': (jqXhr.responseJSON || jqXhr.responseXML || jqXhr.responseText || '') } }); }); } function objMap(data, delim, spl, decode) { var obj = {}; // If one of our parameters is missing, return an empty object if (!data || !delim || !spl) { return {}; } var arr = data.split(delim); var i; if (arr) { for (i = 0; i < arr.length; i++) { // If the decode flag is present, URL decode the set var item = decode ? decodeURIComponent(arr[i]) : arr[i]; var pair = item.split(spl); var key = trim_(pair[0]); var value = trim_(pair[1]); if (key && value) { obj[key] = value; } } } return obj; } // Basic .trim() polyfill function trim_(str) { if (str) { return str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ''); } } })(); /* * v0.1.0 * Created by the Google Analytics consultants at http://lunametrics15.staging.wpengine.com * Written by @notdanwilkerson * Documentation: http://lunametrics15.staging.wpengine.com/blog/2015/08/27/ajax-event-listener-google-tag-manager/ * Licensed under the Creative Commons 4.0 Attribution Public License */ </script>
<script id="gtm-jq-ajax-listen" type="text/javascript"> (function() { 'use strict' var $; var n = 0; init(); function init(n) { // Ensure jQuery is available before anything if (typeof jQuery !== 'undefined') { // Define our $ shortcut locally $ = jQuery; bindToAjax(); // Check for up to 10 seconds } else if (n < 20) { n++; setTimeout(init, 500); } } function bindToAjax() { $(document).bind('ajaxComplete', function(evt, jqXhr, opts) { // Create a fake element for magically simple URL parsing var fullUrl = document.createElement('a'); fullUrl.href = opts.url; // IE9+ strips the leading slash from a.pathname because who wants to get home on time on Friday anyways var pathname = fullUrl.pathname[0] === '/' ? fullUrl.pathname : '/' + fullUrl.pathname; // Manually remove the leading question mark, if there is one var queryString = fullUrl.search[0] === '?' ? fullUrl.search.slice(1) : fullUrl.search; // Turn params and headers into objects for easier reference var queryParameters = objMap(queryString, '&', '=', true); var headers = objMap(jqXhr.getAllResponseHeaders(), '\n', ':'); // Blindly push to the dataLayer because this fires within GTM dataLayer.push({ 'event': 'ajaxComplete', 'attributes': { // Return empty strings to prevent accidental inheritance of old data 'type': opts.type || '', 'url': fullUrl.href || '', 'queryParameters': queryParameters, 'pathname': pathname || '', 'hostname': fullUrl.hostname || '', 'protocol': fullUrl.protocol || '', 'fragment': fullUrl.hash || '', 'statusCode': jqXhr.status || '', 'statusText': jqXhr.statusText || '', 'headers': headers, 'timestamp': evt.timeStamp || '', 'contentType': opts.contentType || '', // Defer to jQuery's handling of the response 'response': (jqXhr.responseJSON || jqXhr.responseXML || jqXhr.responseText || '') } }); }); } function objMap(data, delim, spl, decode) { var obj = {}; // If one of our parameters is missing, return an empty object if (!data || !delim || !spl) { return {}; } var arr = data.split(delim); var i; if (arr) { for (i = 0; i < arr.length; i++) { // If the decode flag is present, URL decode the set var item = decode ? decodeURIComponent(arr[i]) : arr[i]; var pair = item.split(spl); var key = trim_(pair[0]); var value = trim_(pair[1]); if (key && value) { obj[key] = value; } } } return obj; } // Basic .trim() polyfill function trim_(str) { if (str) { return str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ''); } } })(); /* * v0.1.0 * Created by the Google Analytics consultants at http://lunametrics15.staging.wpengine.com * Written by @notdanwilkerson * Documentation: http://lunametrics15.staging.wpengine.com/blog/2015/08/27/ajax-event-listener-google-tag-manager/ * Licensed under the Creative Commons 4.0 Attribution Public License */ </script> Este código verifica si su formulario realmente usa AJAX, luego crea la variable y activa en Google Tag Manager.
Paso 1. Crea una etiqueta para comprobar cómo funciona tu formulario
En Google Tag Manager, abra Etiquetas , haga clic en Nuevo , haga clic en Configuración de etiquetas y luego seleccione HTML personalizado . Copie el código anterior y péguelo en el cuadro de texto. Especifique todas las páginas como disparadores:
Luego active la vista previa de GTM, abra la página del formulario, complete el formulario y envíelo.
Si en la consola de depuración aparece un evento ajaxComplete (como en la captura de pantalla anterior), entonces su formulario usa AJAX y este método de seguimiento le conviene. En ese caso, lea más.
Paso 2. Crear una variable de capa de datos
Si hace clic en el evento ajaxComplete en la consola de vista previa y luego abre la pestaña Capa de datos, verá qué información se pasa a la matriz de niveles de datos después de enviar el formulario.
Estamos interesados en la línea de respuesta de este código; contiene texto que dice que el formulario se envió con éxito:
Esta línea se puede utilizar para crear la variable y el disparador en Google Tag Manager. Abra la sección Variables en GTM, haga clic en Crear y, en la pantalla Configuración de variables, seleccione Variable de capa de datos. En el campo Nombre de la variable de la capa de datos, escriba atributos.respuesta (es posible nombrar dos variables de la misma manera) y guarde la configuración.
¿Por qué ingresar atributos . respuesta en lugar de respuesta ? Porque atributos es un objeto que contiene la clave de respuesta y su valor. Al hacerlo, indicamos a GTM la ruta exacta a los datos que nos interesan.
Después de crear una variable, es necesario verificarla. Para ello, envíe un formulario en modo de vista previa. Haga clic en el evento ajaxComplete y abra la pestaña Variables en Google Tag Manager. Si ve la variable atributos. respuesta y el texto sobre el envío exitoso del formulario, significa que configuró todo correctamente.
Paso 3. Crea el disparador
En la sección Configuración del desencadenador, haga clic en Crear, luego en Configuración del desencadenador y seleccione el tipo de evento Usuario . Especifique ajaxComplete en el campo Nombre del evento. Luego, como condición para activar el activador, seleccione Algunos eventos personalizados y registre una condición: la variable atributos.respuesta contiene {ingrese su texto personalizado sobre el envío exitoso del formulario}.
Después de eso, lo que queda es:
- Agregar una nueva etiqueta de seguimiento de eventos a GTM que enviará información de envío de formularios a Google Analytics y le adjuntará el activador creado.
- Uso del modo de vista previa para comprobar cómo funciona la etiqueta al enviar un formulario.
- Configuración del objetivo del evento para realizar un seguimiento de las conversiones en Google Analytics.
Hemos descrito estas configuraciones en detalle anteriormente en la sección Método 2. Activar formulario de envío en Google Tag Manager.
Método 5. Eventos de DataLayer como disparador
El seguimiento de formularios mediante el método dataLayer .push es, en nuestra opinión, la solución más fiable y versátil. El único inconveniente es que si no entiendes el código, necesitarás la ayuda de los desarrolladores.
Preparar especificaciones técnicas para desarrolladores.
Haga una lista de las configuraciones que desea transferir en la capa de datos después de que el formulario se haya enviado correctamente. Pida a sus desarrolladores que agreguen este código a todas las páginas con formularios que desee monitorear:
CapaDeDatos.push({
'evento':'Formularios',
'valor variable'
})
Donde:
- Evento es el nombre de un evento. Puede reemplazarlo con cualquier evento que sea conveniente para usted.
- Variable es un conjunto de todas las variables que desea transferir junto con un evento.
Después de que sus programadores configuren el método dataLayer.push para todos los formularios, puede comprobar cómo funciona. Para ello, incluya una vista previa en Google Tag Manager y rellene el formulario de su sitio web. En la consola de depuración, debería haber un nuevo evento (en nuestro ejemplo, se llama OWOX). Al hacer clic en un evento e ir a la pestaña capa de datos, verá todos los parámetros que se transfieren a la matriz de datos:
En el ejemplo de nuestro evento en la captura de pantalla anterior (descargando un archivo PDF del blog), consideramos cómo configurar el seguimiento con GTM.
Primero, cree todas las variables de usuario requeridas: eventCategory, eventAction, eventLabel, etc. Luego, seleccione el Tipo de variable en la sección Variables definidas por el usuario e ingrese un nombre de variable entre llaves: {{eventCategory}}:
A continuación, cree un activador del tipo Evento personalizado. En la configuración, especifique el nombre del evento y configure el activador para que se active en Todos los eventos personalizados:
A continuación, cree una etiqueta que reenviará los eventos a Google Analytics. Establezca el tipo de etiqueta como Google Analytics – Universal Analytics y establezca el tipo de seguimiento como Evento.
Además, rellene estos campos:
- Categoría – {{categoría de evento}}
- Acción – {{eventAction}}
- Etiqueta: {{eventLabel}}
A continuación, seleccione una variable {{Configuración de Google Analytics}} y el disparador que creó en el paso anterior:
Todo está listo. Todo lo que queda es verificar si la etiqueta funciona en el modo de vista previa de GTM y en los informes de Google Analytics en tiempo real.
Cuánto tiempo pasan los usuarios completando sus formularios
Ahora que puede averiguar cuántos usuarios completaron correctamente el formulario, será útil averiguar qué problemas han encontrado aquellos que no lo completaron.
Sus desarrolladores deben agregar a la capa de datos los nombres y valores de todos los parámetros necesarios para el análisis de formularios. Esto te ayudará a rastrear:
- Tiempo desde la apertura de la página hasta la activación del campo
- Tiempo desde la activación del campo hasta la desactivación del campo
- Tiempo desde la activación del primer campo hasta el primer envío del formulario
- Tiempo desde la activación del primer campo hasta el envío exitoso del formulario
- Tiempo desde la activación del primer campo hasta el envío fallido del formulario
- Es hora de obtener una respuesta del servidor sobre el envío exitoso de un formulario
- Es hora de obtener una respuesta del servidor sobre el envío fallido de un formulario
- Tiempo desde la activación del formulario hasta que un usuario abandona el formulario (sin enviarlo correctamente)
Una vez que haya configurado la recopilación de estos datos en Google Analytics, podrá importar esos datos a Google BigQuery, por ejemplo, utilizando OWOX BI. Luego, puede crear cualquier informe de análisis de formulario en Hojas de cálculo de Google utilizando el complemento gratuito OWOX BI BigQuery Reports.
Estos informes te ayudarán a encontrar y solucionar problemas en la usabilidad de tus formularios y así aumentar tu tasa de conversión.
Estos son algunos ejemplos de dichos informes y las preguntas que pueden responder:
1. Al interactuar con qué campos de formulario, los usuarios encuentran un error con mayor frecuencia.
2. ¿Cuánto tiempo pasan los usuarios llenando el formulario?
3. ¿Cuánto tiempo dedican los usuarios a llenar el formulario y de qué depende?
PD: si necesita ayuda para configurar el análisis de formularios y crear un sistema de métricas personalizado para su negocio, envíenos un correo electrónico a [email protected] o complete el formulario de contacto en el sitio web de OWOX.