Esta guía explica cómo usar los oyentes de eventos de JavaScript para responder a las interacciones de los visitantes con los formularios de Omnisend.Con los oyentes de eventos, puedes:
⚠️ Importante: Los oyentes de eventos funcionan en popups, flyouts y formularios incrustados.No están soportados en las páginas de destino de Omnisend en este momento.
Antes de empezar
El fragmento de JavaScript de Omnisend debe estar ya instalado en tu sitio. Sin él, el
el evento omnisendForms no se activará, y tu oyente nunca se ejecutará.En Shopify y WooCommerce, el fragmento se añade automáticamente.En cualquier otra plataforma, agrégalo manualmente antes del cierreetiqueta en cada página donde aparece tu formulario.Solo necesitas un fragmento por página. Un script de Omnisend habilita todos los formularios, el rastreo y la escucha de eventos. Si tienes tanto un formulario incrustado como un oyente de eventos en la misma página, un solo fragmento cubre ambos.
Para la integración de Google Analytics: Su GA4
El script de gtag debe estar ya cargándose en la página antes de que se active el oyente de eventos de Omnisend.Sigtag no está presente cuando se ejecuta el oyente, el evento de GA4 no se enviará.
Eventos de formulario
Los formularios de Omnisend activan un evento llamado omnisendForms en el objeto window cada vez que hay actividad en un formulario.El siguiente ejemplo muestra la carga útil del evento
const event = new CustomEvent("omnisendForms", {
detail: {
eventName: 'submit',
brandID: 'F12345',
form: {
id: 'F12345',
name: 'F12345',
displayType: 'popup',
versionID: 'F12345',
versionName: 'F12345',
},
formValues: {
emailField: '[email protected]',
phoneNumberCountryCodeField: 'US',
phoneNumberField: '11111111',
firstName: 'Name',
lastName: 'LastName',
//... any other form value
}
}
});
window.dispatchEvent(event);Tipos de eventos de formulario
El campo type dentro del objeto de evento puede ser cualquiera de estos siete eventos distintos:
view – se activa cuando un popup, flyout o formulario incrustado se muestra inicialmente en una página.interacción – se activa una vez cuando el usuario interactúa con el formulario (por ejemplo, selecciona un campo de entrada).enviar – se activa una vez cuando un visitante completa la acción principal de conversión (por ejemplo, la suscripción inicial por correo electrónico o SMS).cerrar – se activa cuando un visitante cierra el formulario.vistaPaso – se activa cada vez que se muestra un paso de un formulario de varios pasos; puede activarse múltiples veces por formulario.interacciónPaso – se activa una vez por paso cuando el usuario interactúa con un formulario de varios pasos.enviarPaso – se activa cada vez que se envía un paso de un formulario de varios pasos; puede activarse múltiples veces por formulario.
Elige el tipo de evento según tus necesidades específicas de rastreo.Para análisis generales de formularios, como rastrear envíos de formularios en Google Analytics, usa submit – se activa solo una vez por formulario.Para formularios de varios pasos, también captura datos de pasos usando stepSubmit.
Eventos de paso
Los eventos de paso solo se activan con formularios de varios pasos.El evento stepSubmit se activa cada vez que se envía un paso y puede activarse múltiples veces para el mismo formulario.Para un formulario de varios pasos, el evento submit se activa una vez por formulario, después de que se completan todos los pasos.
Otros detalles del evento
Además del tipo de evento, el objeto de detalle del evento contiene:
brandID – el ID alfanumérico que identifica de manera única tu marca en Omnisend.paso – el paso en el que ocurrió el evento.Aplicable solo para formularios de varios pasos.formulario – datos relacionados con el formulario, incluyendo:id – el ID alfanumérico que identifica de manera única el formulario.nombre – el nombre del formulario.displayType – el tipo de visualización del formulario (popup, flyout o incrustado).versionId – el ID alfanumérico que identifica de manera única una versión de formulario A/B.versionName – el nombre de la versión de formulario A/B.
formValues – todos los campos del formulario y sus valores enviados, incluyendo:emailField,firstName,lastName,phoneNumberCountryCodeField,phoneNumberField, y cualquier otro campo de formulario personalizado.
Ejecutar JavaScript personalizado al ocurrir un evento: Ejemplo de oyente de eventos
El siguiente es el formato estándar para un oyente de eventos personalizado para eventos de formularios de Omnisend.Reemplaza view con cualquier tipo de evento listado en la sección Tipos de eventos de formulario arriba, y reemplaza // Custom JS con el código que debe ejecutarse cuando se activa el evento.
<script>
window.addEventListener("omnisendForms", function(e) {
if (e.detail.type == 'view') {
// Custom JS
}
});
</script>
Para utilizar la marca de tiempo del evento en tu propio código JavaScript, usa e.timeStamp.
Dónde agregar este script:
Shopify: Pega el código en el pie de página o archivo de diseño de tu tema (por ejemplo,
theme.liquid), antes del cierreetiqueta, para que se cargue en cada página donde el formulario puede aparecer.WordPress / WooCommerce: Agrégalo utilizando un bloque de HTML personalizado en tu editor de páginas, o pégalo en el archivo de pie de página de tu tema antes de
.HTML simple: Pégalo antes del cierre
etiqueta en cada página donde aparece el formulario.
Implementar el rastreo de Google Analytics en eventos de formularios
Usa el siguiente fragmento para rastrear cada tipo de evento de formulario de Omnisend como un evento en Google Analytics (GA4).
Nota: Tu script de inicialización de GA4el script de gtag debe estar ya cargándose en la página antes de que se ejecute este fragmento.Sigtag no está presente cuando se activa el listener, los eventos de GA4 no se registrarán.
<script>
window.addEventListener("omnisendForms", function(e) {
if (e.detail.type == 'view') {
gtag('event', 'omnisend_form_view', { form_name: e.detail.form.name, form_id: e.detail.form.id });
}
if (e.detail.type == 'interaction') {
gtag('event', 'omnisend_form_interaction', { form_name: e.detail.form.name, form_id: e.detail.form.id });
}
if (e.detail.type == 'submit') {
gtag('event', 'omnisend_form_submit', { form_name: e.detail.form.name, form_id: e.detail.form.id });
}
if (e.detail.type == 'close') {
gtag('event', 'omnisend_form_close', { form_name: e.detail.form.name, form_id: e.detail.form.id });
}
if (e.detail.type == 'stepView') {
gtag('event', 'omnisend_form_step_view', { form_name: e.detail.form.name, form_id: e.detail.form.id });
}
if (e.detail.type == 'stepInteraction') {
gtag('event', 'omnisend_form_step_interaction', { form_name: e.detail.form.name, form_id: e.detail.form.id });
}
if (e.detail.type == 'stepSubmit') {
gtag('event', 'omnisend_form_step_submit', { form_name: e.detail.form.name, form_id: e.detail.form.id });
}
});
</script>
Nota: Los nombres de los eventos en elllamada gtag('event', ...) – por ejemplo,omnisend_form_submit – se puede renombrar a cualquier cosa que quieras que aparezca en Google Analytics, comonewsletter_signup opopup_completed.El nombre depende completamente de ti.
Preguntas Frecuentes
¿Necesito agregar el listener de eventos a mi tema de Shopify?
Sí. Pega el código del listener en una ubicación cargada globalmente en tu tema de Shopify – por ejemplo, en el pie de página de theme.liquid – para que se ejecute en cada página donde el formulario pueda aparecer.Colócalo antes de la etiqueta de cierre .
¿Es necesario instalar el plugin de Omnisend para que esto funcione?
No necesariamente. El plugin de Omnisend (en Shopify o WooCommerce) instala automáticamente el fragmento JS de Omnisend.En cualquier otra plataforma, necesitas agregar el snippet manualmente.El snippet en sí es el requisito – no el plugin.
¿Cómo puedo rastrear en qué paso los visitantes abandonan mi popup de múltiples pasos?
Escucha el evento close y lee e.detail.step.Un valor de 2 significa que el visitante cerró el popup mientras estaba en el paso 2.Envía esto como un parámetro personalizado en tu llamada gtag o regístralo en cualquier otra herramienta de análisis.
¿Puedo capturar qué botón hizo clic un visitante (por ejemplo, "Sí" o "No")?
No. La carga útil del evento omnisendForms no incluye el texto del botón.Para asociar una etiqueta de botón con tu evento de seguimiento, codifícalo manualmente en tu código de listener.
¿Necesito agregar el snippet de Omnisend más de una vez para múltiples formularios en una página?
No. Un snippet por página es suficiente para todos los formularios, seguimiento y listeners de eventos en esa página.
¿Tienes problemas para resolver esto? Mensaje a nuestro equipo de soporte 24/7 en la aplicación o correo electrónico[email protected].