Evita envíos duplicados de formularios con Google Tag Manager

La gestión de formularios en línea es una actividad crucial para muchas empresas y organizaciones, ya que permite recopilar datos valiosos de usuarios y clientes. Sin embargo, una de las problemáticas más comunes en este proceso es la duplicación de envíos de formularios, lo que puede distorsionar los datos recopilados y hacer que las decisiones basadas en ellos sean ineficaces. Afortunadamente, herramientas como Google Tag Manager (GTM) ofrecen soluciones para mitigar este problema. A continuación, exploraremos en profundidad cómo evitar los envíos duplicados de formularios utilizando GTM.

¿Por qué es importante evitar envíos duplicados de formularios?

La duplicación de envíos puede ocurrir por varias razones, como la actualización de la página de «Gracias» después de enviar un formulario. Esta acción puede provocar que el evento se registre múltiples veces, lo que afecta la precisión de tus análisis. Aquí te mostramos por qué es crucial abordar este problema:

• Datos distorsionados: Los envíos duplicados pueden inflar artificialmente tus tasas de conversión y distorsionar los resultados de tus campañas de marketing.
• Experiencia del usuario: Un usuario que envía un formulario varias veces puede sentirse confundido o frustrado si no recibe un feedback claro sobre su envío.
• Recursos desperdiciados: La gestión y análisis de datos duplicados requieren tiempo y esfuerzo, lo que puede llevar a un uso ineficiente de los recursos.

Previniendo envíos duplicados con Google Tag Manager

Uno de los métodos más efectivos para prevenir envíos duplicados es almacenar identificadores únicos en el almacenamiento local del navegador. Este enfoque permite identificar si un formulario ya ha sido enviado por un usuario en particular. Aquí te explicamos cómo implementar esta solución paso a paso.

Crear una variable para capturar el ID del formulario

El primer paso es identificar y capturar el ID del formulario que se está enviando. Esto se puede hacer mediante una variable de URL en GTM que extraiga parámetros específicos de la URL del formulario. Aquí están los pasos a seguir:

1. Accede a Google Tag Manager y selecciona «Variables» en el menú.
2. Haz clic en «Nuevo» y selecciona «Configuración de la variable».
3. Elige «URL» como tipo de variable.
4. Configura el «Tipo de componente» a «Consulta» y especifica la clave de consulta que deseas capturar, como «form_id».
5. Guarda la variable con un nombre descriptivo, como «url – form_id».

Crear una etiqueta HTML personalizada

Una vez que hayas capturado el ID del formulario, el siguiente paso es crear una etiqueta HTML personalizada que almacene este ID en el almacenamiento local del navegador. Este proceso evita que se registren envíos duplicados. Aquí te mostramos cómo hacerlo:

1. En GTM, ve a la sección «Etiquetas» y selecciona «Nuevo».
2. En «Configuración de la etiqueta», elige «HTML personalizado».
3. Introduce el siguiente código, asegurándote de reemplazar «REPLACE THIS» con la variable que has creado anteriormente:

<script>
(function() {
    var formIdentifier = "REPLACE THIS"; // REEMPLAZA ESTO CON UNA VARIABLE GTM;

    var submittedForms = localStorage.getItem("gtm_submitted_forms");

    if (submittedForms) {
        submittedForms = JSON.parse(submittedForms);
        if (submittedForms.indexOf(formIdentifier) === -1) {
            submittedForms.push(formIdentifier);
            localStorage.setItem("gtm_submitted_forms", JSON.stringify(submittedForms));
        }
    } else {
        localStorage.setItem("gtm_submitted_forms", JSON.stringify([formIdentifier]));
    }
})();
</script>

4. Nombrar la etiqueta como «cHTML – almacenar ID del formulario en el almacenamiento local». No añadas un desencadenador todavía.

Desencadenar la etiqueta HTML personalizada

Es fundamental que esta etiqueta se dispare correctamente. Debe ejecutarse después de que se registre el evento de envío del formulario. Aquí te explicamos cómo establecer este desencadenador:

1. Localiza el desencadenador del evento form_submission en tu etiqueta de Google Analytics 4 (GA4).
2. En «Configuración avanzada», busca «Secuenciación de etiquetas». Activa «Disparar una etiqueta después del evento GA4 – form_submission».
3. Selecciona la etiqueta HTML personalizada que creaste anteriormente.

Verificación de la implementación

Después de configurar todo, es crucial verificar que todo funcione como se espera. Utiliza la herramienta de previsualización de GTM para asegurarte de que el ID del formulario se almacene correctamente en el almacenamiento local del navegador.

• Completa un envío de formulario en tu sitio web.
• Accede a las herramientas de desarrollador de tu navegador (clic derecho en la página y selecciona «Inspeccionar»).
• Navega a la pestaña «Aplicación» y busca «Almacenamiento local».
• Busca la clave «gtm_submitted_forms» y verifica que contenga el ID del formulario.

Verificar envíos previos del formulario

Para evitar que se envíe el formulario múltiples veces, es necesario crear una variable que verifique si el ID del formulario ya existe en el almacenamiento local. Esta variable debe devolver true si el ID existe y false si no. Aquí están los pasos para crear esta variable:

1. En GTM, selecciona «Variables» y luego «Nuevo».
2. Elige «JavaScript personalizado» como tipo de variable.
3. Pega el siguiente código, asegurándote de reemplazar «REPLACE THIS» con el nombre de la variable del ID del formulario:

function() {
    var formIdentifier = "REPLACE THIS"; // REEMPLAZA ESTO CON UNA VARIABLE GTM
    var submittedForms = localStorage.getItem("gtm_submitted_forms");
    if (submittedForms) {
        submittedForms = JSON.parse(submittedForms);
        if (submittedForms.indexOf(formIdentifier) !== -1) {
            return true; 
        }
    }
    return false; 
}

4. Nombra esta variable como «cjs – es envío de formulario duplicado».

Actualizar el desencadenador del evento de envío del formulario

Finalmente, debes ajustar el desencadenador del evento de envío del formulario para que solo se dispare si la variable «cjs – es envío de formulario duplicado» devuelve false. Esto garantiza que solo se registren los primeros envíos del formulario. Para hacer esto:

1. Accede al evento form_submission en GTM.
2. Haz clic en el desencadenador y añade una nueva condición que compruebe que «cjs – es envío de formulario duplicado» sea igual a «false».
3. Prueba la implementación de nuevo para confirmar que funciona como se espera.

Limitaciones a considerar

Es importante tener en cuenta que el almacenamiento local es específico de cada subdominio. Esto significa que si tu sitio web utiliza múltiples subdominios, la solución podría no funcionar como se espera. En tales casos, puede ser útil considerar el uso de cookies en su lugar.

Además, para un seguimiento más robusto de los envíos de formularios, la implementación de un evento de capa de datos puede ofrecer ventajas adicionales. Colaborar con un desarrollador puede optimizar el proceso y garantizar que los eventos se disparen de manera efectiva, incluso en casos de recarga de página.

Conclusiones sobre la gestión de envíos de formularios

Implementar una solución para prevenir envíos duplicados de formularios no solo ayuda a mantener la calidad de los datos, sino que también mejora la experiencia del usuario y optimiza el uso de recursos. A través de Google Tag Manager, puedes establecer un sistema efectivo que controle los envíos de formularios, asegurando que cada interacción se registre adecuadamente. Con estas herramientas y estrategias, estarás mejor preparado para aprovechar al máximo tus datos y mejorar tus campañas de marketing.