Cómo configurar el seguimiento de eventos de Google Analytics para un formulario de registro

Objetivos del artículo

Descubre cómo enviar la actividad de tus formularios de registro de Klaviyo a Google Analytics 4 (GA4), incluidas las aperturas, los envíos y los cierres de formularios. También puedes marcar interacciones importantes, como form_submit, como eventos clave en GA4. Sigue este proceso de 2 pasos:

1. Agrega un fragmento de código a tu sitio web para enviar los datos del formulario de registro de Klaviyo a Google Analytics.
2. Marca los eventos que son importantes para tu empresa como eventos clave en Google Analytics.

Antes de empezar

Antes de agregar el fragmento, asegúrate de que haya un formulario de Klaviyo activo en tu sitio web y de que tu etiqueta de Google esté configurada para tu propiedad de GA4. Este fragmento usa gtag, que debe definirse y configurarse en la página antes de que ocurran eventos del formulario. Este fragmento envía eventos del formulario a GA4; no instala Google Analytics.

Configurar el seguimiento de eventos para tus formularios de registro en Google Analytics requiere pegar un fragmento de código en tu sitio. Si no te sientes cómodo pegando código y no tienes a un desarrollador que te ayude, Klaviyo cuenta con una amplia red de socios en nuestro Directorio de socios. 

Rastrear la actividad de los formularios de Klaviyo

Puedes rastrear la actividad de formularios de Klaviyo en Google Analytics agregando un listener para el evento klaviyoForms y enviando un evento de GA4 por cada interacción que quieras medir. Instala el listener una sola vez en cada página donde quieras rastrear formularios y asegúrate de que se cargue antes de la actividad del formulario que quieras capturar.

• Si usas Shopify, pega el fragmento en el archivo theme.liquid en una nueva línea, arriba de la etiqueta de cierre </body>. Ten en cuenta que, si usas páginas de producto personalizadas, es posible que debas agregar este fragmento a un archivo de tema diferente o a tus páginas de producto personalizadas individuales.
• Como alternativa, si el tema Shopify 2.0 tiene una sección o un bloque de Custom Liquid, agrega el fragmento ahí en cada plantilla en la que aparezca el formulario. Elige un método de instalación por página para evitar enviar eventos duplicados.
• Si usas una tienda Stencil de BigCommerce, usa Gerente de scripts para esa tienda para agregar el fragmento al pie de página en las páginas de la tienda.

Usa el siguiente listener con gtag.js para enviar aperturas de formulario, envíos, envíos de pasos, redireccionamientos de URL y cierres a Google Analytics:

<script>
  window.addEventListener("klaviyoForms", function(e) { 
    if (e.detail.type == 'open' || e.detail.type == 'embedOpen') {
      gtag('event', 'form_open', {'form': 'Klaviyo form', 'form_id': e.detail.formId});
    }
    if (e.detail.type == 'submit') {
      gtag('event', 'form_submit', {'form': 'Klaviyo form', 'form_id': e.detail.formId});
    }
    if (e.detail.type == 'stepSubmit') {
      gtag('event', 'form_step_submit', {'form': 'Klaviyo form', 'form_id': e.detail.formId, 'step_name': e.detail.metaData.$step_name});
    }
    if (e.detail.type == 'redirectedToUrl') {
      gtag('event', 'form_url_redirect', {'form': 'Klaviyo form', 'form_id': e.detail.formId});
    }
    if (e.detail.type == 'close') {
      gtag('event', 'form_close', {'form': 'Klaviyo form', 'form_id': e.detail.formId});
    }
  });
</script>

Guarda los cambios del sitio web y luego sigue los pasos de prueba que se indican a continuación para confirmar que el listener envía eventos a la propiedad de GA4.

Para hacer seguimiento de diferentes versiones del formulario o hacer una prueba A/B de variantes, agrega form_version_id a los parámetros de cada llamada de gtag que quieras comparar. Por ejemplo, usa esta llamada en la rama form_open:

gtag('event', 'form_open', {'form': 'Klaviyo form', 'form_id': e.detail.formId, 'form_version_id': e.detail.formVersionId })

Reemplaza la siguiente llamada en lugar de agregar una segunda llamada. Mantén form_id configurado en e.detail.formId para que el listener use el formulario que activó el evento:

gtag('event', 'form_open', {'form': 'Klaviyo form', 'form_id': e.detail.formId })

Para comparar versiones en los informes o exploraciones de GA4, crea una dimensión personalizada con alcance de evento para form_version_id. Usa el mismo proceso para otros parámetros personalizados sobre los que quieras generar informes, como step_name.

En un formulario de varios pasos, el navegador puede enviar más de 1 evento submit durante una sola interacción con el formulario. Con el fragmento de código anterior, cada uno de estos eventos envía un evento form_submit a GA4. El evento de envío se activa en las siguientes situaciones:

• En los formularios con acciones de suscripción por correo electrónico o SMS, enviar correctamente un correo electrónico o un número de teléfono activa un evento de envío.
• En los formularios que recopilan suscripciones de correo electrónico y SMS en pasos separados, enviar cada paso de suscripción activa un evento de envío. Por ejemplo, enviar el paso de correo electrónico y luego el paso de SMS envía 2 eventos form_submit a GA4.
• En los formularios que solo contienen campos de perfil, como los campos de texto, el primer paso enviado que recopila esos campos activa un evento de envío. Para enviar el paso, haz clic en un botón con la Acción configurada como Enviar formulario.

El evento stepSubmit se activa cuando se envía cada paso. El fragmento envía estas interacciones a GA4 como form_step_submit, con form_id y step_name para que puedas identificar el formulario y el paso.

Prueba el código de seguimiento

Una vez que hayas instalado el código de seguimiento en el sitio, puedes probarlo para asegurarte de que se esté dando seguimiento a los datos. Para probar el código:

1. Ve a tu sitio web e interactúa con el formulario (p. ej., envíalo o ciérralo).
2. Abre Google Analytics, selecciona la propiedad de GA4 configurada para tu sitio web y ve a Informes > En tiempo real.
3. En Recuento de eventos por nombre de evento, busca el evento que coincida con tu acción. Por ejemplo, cerrar el formulario envía form_close. Selecciona el evento para comprobar que el parámetro form sea Klaviyo form y que form_id coincida con el formulario que probaste. Para un formulario de varios pasos, revisa form_submit y form_step_submit a medida que envías cada paso de suscripción.

Si no ves los eventos, asegúrate de que Google Analytics esté configurado correctamente y de que el fragmento de código que usaste sea el correcto. También ten en cuenta que los eventos solo serán visibles en En tiempo real durante 30 minutos. Consulta [GA4] Informe En tiempo real para obtener más detalles.

Marca eventos importantes de formularios como eventos clave

Después de confirmar que los eventos del formulario llegan a GA4, elige qué interacciones son lo bastante importantes como para marcarlas como eventos clave. Por ejemplo, elige form_submit para medir los envíos. Necesitas acceso de Editor o Administrador para completar la configuración que aparece a continuación.

1. En Google Analytics, ve a Administrador > Mostrar datos > Eventos. Abre la pestaña Eventos recientes y encuentra el evento que quieres marcar, como form_submit.
2. Haz clic en el ícono de estrella junto al evento para marcarlo como evento clave.

Si tu evento aún no aparece, puedes marcar un evento nuevo como evento clave con anticipación. Usa el nombre exacto que envía el snippet, como form_submit.

Para contar los envíos de un formulario específico, crea un evento independiente basado en valores de parámetros con condiciones coincidentes: event_name es igual a form_submit y form_id es igual al ID de ese formulario. Asígnale un nombre de evento distintivo y luego marca ese nuevo evento como un evento clave.

GA4 cuenta los eventos clave según el método de recuento del evento: Una vez por evento cuenta cada ocurrencia, mientras que Una vez por sesión lo cuenta una vez dentro de una sesión. Revisa los recuentos de eventos clave de los formularios en Administrador > Visualización de datos > Eventos en la pestaña Eventos clave.

Recursos adicionales