Cuando hablamos de optimizar un formulario web, muchos piensan en diseño, colores o la cantidad de campos. Todo eso importa, claro, pero hay algo aún más importante: entender cómo interactúan los usuarios con el formulario.
Capturar eventos en un formulario de Zoho, como en qué campo hacen clic, si cometen errores o si abandonan el formulario antes de enviarlo, te da superpoderes analíticos.
Con esta información puedes:
- Detectar campos que generan errores o dudas.
- Saber en qué parte del proceso los usuarios abandonan.
- Medir si los mensajes de error son claros o confusos.
- Priorizar mejoras con base en datos reales.
Controlar los errores de los formularios mediantes eventos y enviarlos a GTM es una buena solución para detectar problemas con los formularios. Al igual que en qué campo se pone el cursor y su posición. Gracias a esta información podemos mejorar nuestros formularios y su conversión.
¿Por qué capturar eventos en Zoho Forms?
Muchas veces los formularios embebidos como los de Zoho no nos dan acceso al HTML interno ni a sus eventos, lo que complica el trabajo de seguimiento desde herramientas como Google Tag Manager.
Sin embargo, Zoho lanza alert() cuando se produce un error de validación. Y ahí está la clave: podemos capturar ese comportamiento con JavaScript, enviarlo al dataLayer y trabajar con él en GTM sin tocar el backend de Zoho ni modificar el formulario original.
Esta solución se basa en utilizar un poco de JavaScript personalizado, como veremos más adelante.
Checklist para activar el tracking de formularios Zoho desde Google Tag Manager
Antes de capturar eventos, o enviar datos personalizados a Google Tag Manager, necesitas tener listo el entorno. Esta pequeña checklist te ayudará a asegurarte de que todo está en su sitio para empezar a hacer tracking de formularios con GTM sin problemas.
Esto aplica tanto si estás haciendo un seguimiento básico como si quieres configurar eventos personalizados, o detectar errores en formularios Zoho.
Asegúrate de tener:
- GTM instalado y funcionando.
- El formulario de Zoho embebido en tu sitio.
- Posibilidad de insertar código JS personalizado (desde GTM o directamente en el sitio).
Una vez cumplas estos requisitos, ya puedes continuar con la implementación práctica.
Pasos para detectar errores y envíos en Zoho Forms usando Google Tag Manager
Ahora que tienes todo listo, veamos paso a paso cómo detectar eventos en Zoho Forms, aprovecharlos en GTM.
- Capturar los
alert()que lanza Zoho cuando hay un error. - Detectar cuándo se envía el formulario correctamente.
- Enviar ambos eventos al
dataLayerde GTM. - Usar esos eventos como disparadores para etiquetas en GA4, conversiones o embudos personalizados.
Estos pasos te permiten obtener un seguimiento completo sin necesidad de modificar el formulario original ni depender de integraciones complejas.
Código para capturar eventos de error y envío en formularios Zoho con GTM
Vamos con la parte técnica. A continuación tienes un script en JavaScript que detecta los errores y envíos correctos en formularios Zoho Forms, y los envía como eventos al dataLayer de Google Tag Manager.
Puedes insertarlo como una etiqueta HTML personalizada dentro de GTM o, si lo prefieres, incluirlo directamente en tu sitio:
Nota: en el código verás variables como
form_name,form_id,inputs, oinputs_required. Estas deben adaptarse según tu caso y estructura del formulario, o puedes eliminarlas si no las necesitas.
const form = document.querySelector('form');
let errorForm = false;
if (!form) {
console.log('Formulario no encontrado en el DOM');
return;
}
// Guardar la función alert original
const originalAlert = window.alert;
// Sobrescribir el método alert para capturar los mensajes de error
window.alert = function(message) {
// console.log('Alert interceptado:', message);
errorForm = true;
// Determinar si es un mensaje de error de validación
if (message && typeof message === 'string') {
// La mayoría de los mensajes de error de validación contienen frases como "required", "campo obligatorio", etc.
if (message.match(/requer|obligator|empty|vac[ií]o|invalid|inválid/i)) {
// console.log('Error de validación detectado:', message);
// Identificar el campo relacionado con el error.
// Sin cambios en el DOM es difícil, pero podemos hacer una estimación
let fieldName = 'campo_desconocido';
// Buscar nombres de campos comunes en el mensaje
const formInputs = document.querySelectorAll('form input, form select, form textarea');
formInputs.forEach(input => {
// Si el nombre del campo o su etiqueta aparece en el mensaje de error
const label = input.closest('.zcwf_row')?.querySelector('label')?.textContent || '';
if (message.includes(input.name) ||
message.includes(label) ||
message.toLowerCase().includes(input.name.toLowerCase()) ||
message.toLowerCase().includes(label.toLowerCase())) {
fieldName = input.name;
}
});
// Enviar al dataLayer
var obj = {
'event': 'form_submit',
'event_category': 'communication',
'form_name': 'formulario contacto',
'form_id': 'id_form_Zoho',
'form_fields': inputs,
'm_form_fields': inputs_required,
'element_text': 'ENVIAR',
'result': 'error',
'detail': message
};
// console.log('Evento de error enviado al dataLayer:', obj);
window.dataLayer = window.dataLayer || [];
window.dataLayer.push(obj);
}
}
// Llamar a la función alert original para mostrar el mensaje al usuario
return originalAlert.apply(this, arguments);
}
// Enviar evento de envío de formulario
form.addEventListener('submit', function(e) {
// console.log(' errorForm: ', errorForm);
if ( !errorForm ) {
// Enviar al dataLayer
var obj = {
'event': 'form_submit',
'event_category': 'communication',
'form_name': 'formulario contacto',
'form_id': 'id_form_Zoho',
'form_fields': inputs,
'm_form_fields': inputs_required,
'element_text': 'ENVIAR',
'result': 'OK',
'detail': 'Gracias por tu mensaje. Ha sido enviado.'
};
// console.log('Evento de envío enviado al dataLayer:', obj);
window.dataLayer = window.dataLayer || [];
window.dataLayer.push(obj);
}
});Este código es totalmente adaptable. Puedes añadir más variables como el nombre del formulario, campos específicos o identificar mejor el campo con error si tu DOM lo permite.
Además, si en algún momento Zoho cambia su forma de mostrar errores (por ejemplo, dejando de usar alert()), este script se puede ajustar fácilmente para capturar nuevos comportamientos.
Cómo probar si los eventos se están capturando correctamente
Una vez tengas el código insertado, es importante validar que los eventos realmente se están enviando al dataLayer y que GTM los detecta como se espera.
Pasos para probar el tracking del formulario:
- Entra en el modo Preview de Google Tag Manager.
- Abre la consola del navegador en la página donde esté embebido el formulario.
- Intenta enviar el formulario con algún campo vacío o erróneo → deberías ver un evento con
result: "error". - Luego envíalo correctamente → deberías ver un evento con
result: "OK". - Si todo va bien, ya puedes usar el evento
form_submitcomo disparador para etiquetas en GA4, conversiones o audiencias.
¿Consola del navegador o extensión?
Puedes visualizar estos eventos de dos maneras distintas, según tu nivel de comodidad técnica:
Opción 1: Herramientas de desarrollador de Chrome
Desde la pestaña Consola, podrás ver los objetos form_submit tal como se empujan al dataLayer. Es útil para inspeccionar el detalle técnico y depurar errores.
Visualización en la consola de Chrome del evento form_submit, con detalle del error por campo obligatorio vacío, útil para depurar integraciones con Google Tag Manager.
Opción 2: Extensión Analytics Debugger
Con la extensión gratuita Analytics Debugger, puedes visualizar todos los eventos enviados al dataLayer de forma estructurada, sin necesidad de abrir la consola.
La extensión ofrece una vista más organizada e ideal para compartir con perfiles de marketing o producto, mientras que la consola es más útil si estás ajustando el código o depurando errores.
Vista estructurada del evento form_field con error en campo ‘Nombre’ vacío, capturada desde la extensión Analytics Debugger.
Ventajas de enviar eventos personalizados a GTM desde Zoho Forms
Implementar este tipo de seguimiento no solo resuelve el problema de medir formularios incrustados. También te da una serie de ventajas clave para mejorar la conversión y tomar decisiones basadas en datos reales:
- Seguimiento completo del formulario sin tocar el backend de Zoho.
- Identificación de errores reales que frustran a los usuarios y afectan la conversión.
- Puedes detectar puntos de fuga, sabiendo en qué paso se detienen los usuarios.
- Permite crear eventos personalizados que activan conversiones, audiencias o embudos en GA4.
- Facilita el análisis sin depender de herramientas externas o integraciones pesadas.
- Ideal para optimizar formularios Zoho basándote en comportamiento real, no en intuiciones.
- Compatible con estrategias avanzadas de marketing como retargeting o segmentación por interacción.
Cómo usar el seguimiento de eventos para mejorar la conversión de formularios Zoho
Una vez que los eventos están siendo capturados correctamente, es momento de transformar esos datos en decisiones. Aquí tienes algunas estrategias prácticas para aprovechar al máximo la información recopilada desde Zoho Forms con Google Tag Manager:
Analiza los errores frecuentes
Revisa qué mensajes de error aparecen con mayor frecuencia. ¿Están mal explicados? ¿Son demasiado estrictos? ¿El campo es confuso? Esta información te permitirá tomar decisiones concretas para mejorar la experiencia del usuario.
Detecta abandonos en el formulario
Si hay muchos eventos de foco pero pocos envíos, algo está fallando. Puede ser un campo intimidante, una mala experiencia móvil o simplemente desconfianza. Los datos te mostrarán exactamente dónde se produce el abandono.
Haz A/B testing para mejorar la conversión
Cambia textos de ayuda, orden de campos o mensajes de error y compara los resultados. A veces, un pequeño ajuste en la redacción puede reducir los errores y aumentar los envíos.
Crea embudos personalizados en GA4
Con los eventos en Google Analytics 4 puedes ver:
- Cuántos usuarios comenzaron a rellenar el formulario.
- Cuántos llegaron a cada paso.
- Dónde se produce la mayor pérdida.
Esto te ayudará a optimizar con precisión y sin suposiciones.
¿Qué hacer si Zoho cambia su forma de mostrar errores en los formularios?
Actualmente, el script se basa en interceptar los alert() que Zoho lanza cuando detecta errores de validación. Sin embargo, si en el futuro Zoho decide cambiar este mecanismo —por ejemplo, mostrando los errores directamente en el DOM o usando notificaciones internas—, este enfoque dejaría de funcionar tal como está.
Pero no te preocupes: puedes adaptar el seguimiento fácilmente para seguir detectando errores con Google Tag Manager.
En ese caso, tendrías que observar qué elementos del DOM cambian al fallar un envío (por ejemplo, nuevos mensajes, clases CSS o atributos) y ajustar el código para capturar esos eventos.
Consejo: Usa herramientas como MutationObserver o delegación de eventos para escuchar los cambios que ocurren en el formulario. Así mantendrás el tracking actualizado sin importar los cambios que haga Zoho.
Conclusión: todo lo que puedes mejorar cuando entiendes cómo usan tu formulario
Capturar eventos en formularios de Zoho y enviarlos a Google Tag Manager es una de las formas más efectivas de mejorar formularios basándote en datos reales. Ya no se trata solo de medir cuántos formularios se envían, sino de entender cómo interactúan los usuarios con cada campo, en qué punto surgen errores o dónde abandonan el proceso.
Desde que implementamos este tipo de seguimiento, muchos de nuestros clientes han dejado de tomar decisiones a ciegas. Ahora saben con exactitud qué parte del formulario funciona y qué necesita optimización, lo que les permite tomar decisiones informadas y medir el impacto de sus mejoras.
Si necesitas integrar Zoho Forms con Google Tag Manager o enviar eventos personalizados a GA4, y estás buscando soporte técnico para configurarlo correctamente, puedes conocer más sobre nuestro servicio de implementación especializada en Bubuku. Nos encargamos de todo el proceso técnico para que te enfoques en tomar decisiones más inteligentes basadas en datos.
