Objetivos de Eventos Personalizados

Pro Plan

Los objetivos de eventos personalizados le permiten rastrear cualquier acción al generar eventos JavaScript. Perfecto para formularios, reproducciones de video e interacciones complejas.

Cuándo usar eventos personalizados

Ideal para rastrear:

• Envíos de formularios (AJAX)
• Interacciones de video (reproducción, finalización)
• Navegación de aplicaciones de una sola página
• Acciones de agregar al carrito
• Uso de funciones en aplicaciones web
• Cualquier acción desencadenada por JavaScript

Cómo funcionan los eventos personalizados

1. Agregue código JavaScript a su sitio
2. El código se ejecuta cuando ocurre la acción
3. Zenovay recibe el evento
4. El objetivo se registra

Implementación básica

Rastrear un evento

// Evento simple
zenovay('goal', 'event_name');

// Evento con valor
zenovay('goal', 'purchase', { value: 99.99 });

// Evento con valor y moneda
zenovay('goal', 'purchase', {
  value: 99.99,
  currency: 'USD'
});

Una llamada de objetivo registra value y currency. Cualquier otra clave que pase se envía con la carga útil del evento subyacente, pero el objetivo en sí se informa por su nombre y valor.

Crear el objetivo

1. Abra el panel de su sitio web y seleccione la pestaña Journeys
2. Abra la subpestaña Objetivos y haga clic en Agregar objetivo
3. Elija Evento personalizado
4. Ingrese el nombre del evento (por ejemplo, purchase) para que coincida con el nombre que genera en el código
5. Opcionalmente, active el rastreo de valores y establezca un valor predeterminado
6. Guardar

Los objetivos de eventos personalizados también se crean automáticamente la primera vez que Zenovay recibe un nombre de evento que no ha visto, por lo que puede generar eventos primero y aparecerán en la lista de objetivos.

Nomenclatura de eventos

Mejores prácticas

Buenos nombres	Malos nombres
signup_complete	goal1
purchase	click
video_50_percent	event
add_to_cart	123

Convenciones de nomenclatura

Elija un patrón consistente:

• snake_case: form_submit
• camelCase: formSubmit
• kebab-case: form-submit

Categorías con prefijos

Organice eventos con prefijos:

// Eventos de comercio electrónico
zenovay('goal', 'ecom_add_to_cart');
zenovay('goal', 'ecom_checkout_start');
zenovay('goal', 'ecom_purchase');

// Eventos de participación
zenovay('goal', 'engage_video_play');
zenovay('goal', 'engage_scroll_50');

Implementaciones comunes

Envío de formulario

document.querySelector('form').addEventListener('submit', function(e) {
  zenovay('goal', 'contact_form');
});

// O para formularios AJAX
function onFormSuccess() {
  zenovay('goal', 'contact_form');
}

Interacciones de video

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

video.addEventListener('play', function() {
  zenovay('goal', 'video_play');
});

video.addEventListener('ended', function() {
  zenovay('goal', 'video_complete');
});

// Rastrear progreso del 50%
video.addEventListener('timeupdate', function() {
  if (video.currentTime / video.duration > 0.5) {
    zenovay('goal', 'video_50_percent');
  }
});

Acciones de comercio electrónico

// Agregar al carrito
function addToCart(product) {
  // Su lógica de carrito...

  zenovay('goal', 'add_to_cart', {
    value: product.price
  });
}

// Compra completa
function onPurchaseComplete(order) {
  zenovay('goal', 'purchase', {
    value: order.total,
    currency: 'USD'
  });
}

Registro / Inscripción

async function handleSignup(formData) {
  try {
    const response = await api.signup(formData);

    if (response.success) {
      zenovay('goal', 'signup_complete', {
        value: 50 // Valor de cliente potencial estimado
      });
    }
  } catch (error) {
    // Manejar error
  }
}

Pasar valores

Valor estático

Establecido en la configuración de objetivo:

• Habilitar rastreo de valores
• Ingresar un valor predeterminado (por ejemplo, 50)
• Cada finalización cuenta hacia ese valor

Valor dinámico

Pase desde su código:

// Valor de orden
zenovay('goal', 'purchase', {
  value: orderTotal
});

// Valor calculado
const leadValue = isPremium ? 100 : 25;
zenovay('goal', 'lead', { value: leadValue });

Valor de página

Leer desde el DOM:

const price = parseFloat(
  document.querySelector('.price').textContent.replace('$', '')
);
zenovay('goal', 'purchase', { value: price });

Campos de valor de objetivo

Una finalización de objetivo registra estos campos:

Propiedad	Tipo	Ejemplo
value	number	99.99
currency	string	"USD"

Pase value como un número simple (sin símbolo de moneda o cadena). currency es un código de moneda ISO y el valor predeterminado es USD.

Integraciones de frameworks

React

import { useCallback } from 'react';

function SignupForm() {
  const handleSubmit = useCallback((data) => {
    // Lógica de envío...

    window.zenovay('goal', 'signup');
  }, []);

  return <form onSubmit={handleSubmit}>...</form>;
}

Vue

<script>
export default {
  methods: {
    handleSubmit() {
      // Lógica de envío...

      window.zenovay('goal', 'signup');
    }
  }
}
</script>

Next.js

// Rastreo del lado del cliente en un componente
'use client';

export default function CheckoutButton() {
  function handleSuccess() {
    if (typeof window !== 'undefined') {
      window.zenovay('goal', 'purchase');
    }
  }

  return <button onClick={handleSuccess}>Completar</button>;
}

Aplicaciones de una sola página (SPAs)

Rastreo de cambios de ruta

Para vistas de página virtuales:

// React Router
history.listen(() => {
  zenovay('page');
});

// Vue Router
router.afterEach(() => {
  zenovay('page');
});

Objetivo después de la navegación

// Navegar y luego rastrear
router.push('/success').then(() => {
  zenovay('goal', 'signup_complete');
});

Rastreo condicional

Rastrear basado en condiciones

// Solo rastrear si se cumplen las condiciones
if (user.isNewUser && !user.hasConvertedBefore) {
  zenovay('goal', 'first_conversion');
}

// Variante de prueba A/B
if (experimentVariant === 'B') {
  zenovay('goal', 'variant_b_conversion');
}

Debouncing de eventos

Prevenir disparos duplicados:

let hasTracked = false;

function trackOnce(eventName) {
  if (!hasTracked) {
    zenovay('goal', eventName);
    hasTracked = true;
  }
}

Manejo de errores

Rastreo seguro

Maneja casos donde Zenovay no está cargado. El fragmento de rastreo define una pequeña cola de comandos, por lo que las llamadas realizadas antes de que finalice la carga del script se procesan de todas formas:

function safeTrackGoal(eventName, properties) {
  if (typeof zenovay === 'function') {
    zenovay('goal', eventName, properties);
  } else {
    console.warn('Zenovay not loaded');
  }
}

Prueba de eventos

Modo de depuración

Habilitar registro en consola:

zenovay('debug');

// Ahora rastrear algo
zenovay('goal', 'test_event');
// Verificar consola para salida

Verificar en el panel

1. Generar un evento de prueba
2. Abra el panel de su sitio web y seleccione la pestaña Live View para observar la actividad en tiempo real, o abra Journeys → Objetivos para ver el número de finalización del objetivo
3. Verificar que el objetivo aparezca y el número aumente
4. Verificar el valor del objetivo

Pestaña Redes

1. Abra DevTools → Redes
2. Generar el evento
3. Buscar una solicitud a api.zenovay.com
4. Verificar la carga útil

Solución de problemas

Eventos no se registran

Verificar que el script esté cargado:

console.log(typeof zenovay); // Debería ser 'function'

Verificar que el nombre del evento coincida:

• Objetivo: signup
• Código: zenovay('goal', 'signup') ✓
• Código: zenovay('goal', 'Signup') ✗

Verificar errores:

• Consola del navegador para errores
• Pestaña Red para solicitudes fallidas

Valor no se registra

Asegúrate que el valor sea un número:

// Incorrecto
zenovay('goal', 'purchase', { value: "$99.99" });

// Correcto
zenovay('goal', 'purchase', { value: 99.99 });

Próximos pasos

• Configurar embudos de conversión
• Atribución de objetivos
• Atribución de ingresos