Eventos Personalizados

Realiza seguimiento de eventos personalizados e interacciones de usuarios para entender cómo los visitantes interactúan con tu sitio web.

Descripción General

Los eventos personalizados te permiten realizar seguimiento de acciones específicas del usuario que importan para tu negocio:

• Clics en botones
• Envíos de formularios
• Reproducción de videos
• Descargas de archivos
• Clics en enlaces externos
• Profundidad de desplazamiento
• Tiempo dedicado a la página

Seguimiento Básico de Eventos

Utiliza la función track() para enviar eventos personalizados:

// Registra un evento simple
zenovay('track', 'button_click');

// Registra un evento con propiedades
zenovay('track', 'video_play', {
video_id: 'intro-video',
video_title: 'Getting Started with Zenovay',
video_duration: 120
});

Propiedades de Eventos

Incluye contexto adicional en tus eventos utilizando propiedades:

zenovay('track', 'purchase', {
product_id: 'pro-plan',
product_name: 'Pro Plan',
price: 29.99,
currency: 'USD',
category: 'subscription'
});

Patrones Comunes de Eventos

Envíos de Formularios

document.getElementById('contact-form').addEventListener('submit', function(e) {
zenovay('track', 'form_submit', {
  form_name: 'contact_form',
  form_type: 'lead_generation'
});
});

Descargas de Archivos

document.querySelectorAll('a[href$=".pdf"]').forEach(link => {
link.addEventListener('click', function(e) {
  zenovay('track', 'file_download', {
    file_name: this.href.split('/').pop(),
    file_type: 'pdf',
    file_url: this.href
  });
});
});

Interacciones con Videos

const video = document.querySelector('video');

video.addEventListener('play', () => {
zenovay('track', 'video_play', {
  video_title: video.title,
  video_duration: video.duration
});
});

video.addEventListener('ended', () => {
zenovay('track', 'video_complete', {
  video_title: video.title,
  watch_time: video.currentTime
});
});

Integración con React

Para aplicaciones React, utiliza el objeto global zenovay del script de seguimiento:

function ProductCard({ product }) {
const handleAddToCart = () => {
  // Usa el objeto global zenovay del script de seguimiento
  zenovay('track', 'add_to_cart', {
    product_id: product.id,
    product_name: product.name,
    price: product.price
  });
};

return (
  <button onClick={handleAddToCart}>
    Add to Cart
  </button>
);
}

Convenciones de Nomenclatura de Eventos

Sigue estas convenciones para un seguimiento de eventos consistente:

Nombres de Eventos Recomendados

Directrices para Propiedades

• Mantén los nombres de propiedades descriptivos y consistentes
• Utiliza snake_case para los nombres de propiedades
• Incluye contexto relevante (IDs, nombres, categorías)
• Evita información de identificación personal (PII)

Visualización de Eventos Personalizados

Los eventos personalizados aparecen en el panel de control de tu dominio. Abre Dominios, haz clic en tu sitio y luego usa la pestaña relevante:

• Pestaña Analítica — ve los recuentos de eventos junto a las vistas de página y otras métricas de comportamiento
• Pestaña Ingresos — crea embudos de conversión y realiza seguimiento de completados de objetivos desde eventos personalizados

Depuración de Eventos

Utiliza la consola del navegador para depurar el seguimiento de eventos:

// Habilita el modo de depuración
zenovay('debug');

// Registra un evento (se mostrará en la consola)
zenovay('track', 'test_event', { debug: true });