Cómo enviar eventos de formularios de Klaviyo a GA4

En muchas ocasiones nos encontramos con la necesidad de centralizar los eventos clave del ecommerce en un solo lugar y no de forma disgregada como ocurre en muchas ocasiones al estar trabajando con diferentes aplicaciones.

La centralización permite crear Dashboards, definir embudos y tomar decisiones basadas en datos con una visión completa.

Es por ello que en este artículo vamos a explicar cómo enviar los eventos de formulario de Klaviyo (vista y envío) a GA4, vía GTM, y poder enriquecer así tus dashboards.

¿Qué necesitas antes de empezar?

• Acceso al tema de Shopify (u otra plataforma donde insertar el script)
• Acceso a Google Tag Manager configurado en el ecommerce
• Klaviyo funcionando correctamente en el ecomm (formularios)
• Acceso a GA4

¿Qué hace el script?

Básicamente:

1. Escucha el evento de Klaviyo “klaviyoForms”.
2. Filtra los eventos de tipo “open” & “submit”.
3. Empujar la información al dataLayer e incluye el identificador del formulario.

Insertar el script en Shopify.

Os mostramos paso a paso cómo insertar el script de seguimiento de aperturas & envíos de forms de Klaviyo y enviar al dataLayer.

Usamos Shopify como ejemplo ya que es una de las plataformas donde más se implementa Klaviyo.

Otra opción es implementar el script directamente desde Google Tag Manager. En ese caso, es necesario ajustar el código para garantizar compatibilidad con entornos que no soportan ECMAScript 2015.

Concretamente, se debe:

• Reemplazar la desestructuración de objetos (línea 6) por asignaciones tradicionales.
• Sustituir const por var para evitar posibles errores de ejecución.

Al final del artículo encontrarás el script ya adaptado para su uso en GTM.

Crear el archivo en el assets del theme de Shopify

En Shopify, ve al apartado “Canales de ventas” y haz clic en “Tienda Online” y a continuación en “Temas”

Verás el tema activo de tu ecommerce, hace clic en los tres puntos y selecciona “Editar código”.

Ahora, desde el editor del tema, haz clic en “assets” y a continuación en “agregar un nuevo recurso” para insertar el script.

Indica la extensión, “js” y el nombre del archivo, en esta caso “klaviyo-form-to-datalayer” y clic en “Listo”

A continuación, copia y pega el siguiente script y haz clic en “Guardar”

window.addEventListener("klaviyoForms", function(e) {
   if (!e.detail) return;

  const { type, formId } = e.detail;

  if (type === "open" || type === "submit") {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      event: type === "open" ? "klaviyo_form_opened" : "klaviyo_form_submitted",
      formId: formId
    });

    console.log("[Klaviyo] Event detected", type, "→ Form ID:", formId);
  }
});

Una vez testeado, puedes eliminar el “console.log” ya que lo insertamos a modo de debug.

Debe quedar de la siguiente manera:

Añadir el archivo en el theme.liquid de Shopify.

Una vez creado el script, has de añadirlo en el theme.liquid para que se ejecute.

Emplázalo justo antes de cerrar el body utilizando el siquiente fragmento de código:

     <script src="{{ 'klaviyo-form-to-datalayer.js' | asset_url}}" defer="async"></script>

Quedaría de la siguiente manera:

Testear el script.

Ahora, comprueba que se ejecuta correctamente el script.

Validar desde la consola.

Para ello, accede al ecommerce y activa en tu navegador las “devTools”. (F12 en Windows o Option + ⌘ + I en Mac).

Ve a la consola y comprueba que aparece el siguiente mensaje tras mostrarse el formulario lanzado desde Klaviyo.

A continuación, testea que se está lanzando al datalayer la información de tipo de evento y el formId.

Desde la misma consola teclea dataLayer y presiona intro. Localiza dentro del array de objetos el evento “klaviyo_form_opened”.

Repite los mismos pasos enviando el formulario. Deberá mostrarse en el dataLayer el evento de envío “klaviyo_form_submitted”

Validar desde Google Tag Manager.

También puedes comprobar desde Google Tag Manager si se está lanzando correctamente al dataLayer el evento. En Google Tag Manager, clic en “Vista Previa”.

Comprueba que aparece en el resumen el evento “klaviyo_form_opened” al mostrarse el formulario. Puedes ver el detalle si haces clic en “Capa de datos”.

Envía el formulario y comprueba que se muestra el evento “klaviyo_form_submitted”

Configurar Google Tag Manager

El siguiente paso es preparar las variables, triggers y tags en GTM para lanzar el evento a GA4.

Crear las variables en Google Tag Manager

Ahora, has de crear la variable para recoger el “formId” tanto en el momento en que se muestra el formulario como en el envío.

1. En GTM, ve “Variables”.
2. En el apartado “Variables definidas por el usuario”, haz clic en “Nueva”.
3. Selecciona el tipo “Variable de capa de datos”
4. En el campo “Nombre de la variable de capa de datos” indica “formId”.
5. Asigan un nombre a la variable, por ejemplo “dlv-formId”. Utiliza la convención dlv (dataLayer Variable) para todas las variables basadas en el dataLayer.
6. Guarda la configuración.

Comprueba en la vista previa que, tras lanzar el formulario, se muestra la variable “formId”

Una vez validado, pasamos a los disparadores.

Crear los triggers (disparadores) en GTM

En este paso vamos a crear los disparadores, es decir, en qué momento se debe lanzar el evento hacia GA4. Será en cuando se lance alguno de los eventos que hemos pasado al dataLayer:

• Cuando se muestra el formulario. El nombre del evento es “klaviyo_form_opened”
• Cuando se envía el formulario.El nombre del evento es “klaviyo_form_submitted”

1. Ve a la sección “Activadores” y haz clic en “Nuevo”.
2. Selecciona el tipo “Evento personalizado”.
3. En el campo Nombre del evento, escribe exactamente “klaviyo_form_open”
4. Nombra el activador para identificarlo fácilmente, por ejemplo “Custom - Klaviyo Form Opened”
5. Guarda.
6. Repite el mismo proceso para crear un segundo activador, esta vez con el evento “klaviyo_form_submitted”.

Crear las etiquetas en Google Tag Manager

Por último, has de crear las etiquetas para poder enviar los eventos de apertura de formulario y envío de formulario a GA4.

Crear la etiqueta para cuando se muestra el formulario

1. Ve a “Etiquetas” y haz clic en “Nueva”.
2. Elige el tipo de etiqueta: “Google Analytics” y a continuación “Google Analytics: evento de GA4”.
3. Introduce tu ID de medición.
4. En campo el nombre del evento, escribe “Klaviyo Open Form”.
5. Clic en “Añadir parámetro”.
   5.1 En “parámetro de evento”, escribe “formId”.
   5.2 En “valor”, clic sobre el icono y selecciona la variable “{{dlv-formId}}",creada en el paso de creación de variables en Google Tag Manager
6. En “Activación”, selecciona el activador creado previamente llamado “Custom - Klaviyo Form Opened”
7. Clic en “Guardar”

Crear la etiqueta para cuando se envía el formulario

1. Ve a “Etiquetas” y haz clic en “Nueva”.
2. Elige el tipo de etiqueta: “Google Analytics” y a continuación “Google Analytics: evento de GA4”.
3. Introduce tu ID de medición.
4. En campo el nombre del evento, escribe “Klaviyo Send Form”.
5. Clic en “Añadir parámetro”.
   • En “parámetro de evento”, escribe “formId”.
   • En “valor”, clic sobre el icono y selecciona la variable “{{dlv-formId}}",creada en el paso de creación de variables en Google Tag Manager
6. En “Activación”, selecciona el activador creado previamente llamado “Custom - Klaviyo Form Send”
7. Clic en “Guardar”

Validar que los eventos se lanzan correctamente en GTM

Una vez creadas las variables, triggers y etiquetas, es importante que compruebes que los eventos se lanzan correctamente.

El proceso es muy similar al que anteriormente explicado al validar que los datos llegaban al dataLayer tras implementar el script.

1. Entra en Google Tag Manager y haz clic en el botón “Vista previa”.
2. Introduce la URL de tu ecommerce y conéctate.
3. En la pestaña del navegador que se abre:
   • Interactúa con un formulario de Klaviyo (ábrelo y/o envíalo).
4. En el panel izquierdo, busca los eventos:
   • “klaviyo_form_opened”
   • “klaviyo_form_submitted”
5. Haz clic sobre cada uno y verifica que:
   • La etiqueta de GA4 correspondiente se ha activado.
   • Los valores enviados (como formId) aparecen correctamente en los parámetros del evento.

Con esta configuración, ya estarás enviando a GA4 las acciones de apertura y envío de formulario desde Klaviyo.

Script para insertarlo desde Google Tag Manager

<script>
window.addEventListener("klaviyoForms", function(e) {
  if (!e.detail) return;

  var type = e.detail.type;
  var formId = e.detail.formId;

  if (type === "open" || type === "submit") {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      event: type === "open" ? "klaviyo_form_opened" : "klaviyo_form_submitted",
      formId: formId
    });

    // Opcional: dejar para debug
    console.log("[Klaviyo] Event detected:", type, "→ Form ID:", formId);
  }
});
</script>

Cómo insertar el script en Google Tag Manager

1. Ve a “Etiquetas” y haz clic en “Nueva”
2. Selecciona de tipo “HTML personalizada”
3. Copia y pega el script anterior.
4. En opciones de activación, selecciona:
   • “All Pages”
5. Guarda y publica.

Preguntas frecuentes (FAQ)

¿Puedo usar este método con otras plataformas además de Shopify?
Sí, puedes insertar el script en cualquier CMS que permita modificar el HTML o añadir scripts personalizados, como WordPress, PrestaShop o incluso sitios estáticos.

¿Qué pasa si tengo varios formularios de Klaviyo?
Cada formulario de Klaviyo tiene un formId único, que se incluye automáticamente en el evento. Esto te permite diferenciar formularios en tus informes de GA4 y Looker Studio.

¿Puedo enviar más datos además del formId?
Sí. Klaviyo incluye otros datos en el evento “klaviyoForms”, como el paso en formularios multipaso (step_name). Puedes capturarlos modificando el script y añadir más variables en el dataLayer y las etiquetas de GTM según tus necesidades.