Eventos - Revol

Descripción General

La pestaña Eventos le permite definir eventos de seguimiento para capturar acciones específicas de los visitantes en su sitio web. Rastree clics en botones, envíos de formularios, hitos de scroll, visibilidad de elementos, o dispare eventos personalizados desde su propio código. Cualquier evento puede marcarse como un objetivo de conversión para medir la efectividad de las campañas.

Lista de Eventos

La tabla de eventos muestra todos los eventos definidos con métricas clave:

Columna	Descripción
Nombre	Nombre del evento
Tipo	Tipo de evento (Clic, Scroll, Envío de Formulario, Visibilidad, Personalizado)
Activaciones	Número total de veces que se ha activado este evento
Conversión	Si este evento cuenta como objetivo de conversión
Estado	Activo o inactivo
Acciones	Editar o eliminar el evento

Filtros

Filtre la lista de eventos por:

Filtro	Descripción
Tipo	Mostrar solo eventos de un tipo específico
Conversión	Mostrar solo eventos de objetivo de conversión
Estado	Mostrar eventos activos o inactivos
Buscar	Buscar eventos por nombre

Crear un Evento

Haga clic en Crear Evento para definir un nuevo evento de seguimiento. Cada evento requiere:

Campo	Requerido	Descripción
Nombre	Sí	Nombre del evento para identificación (por ejemplo, “Clic Botón CTA”, “Envío Formulario Contacto”)
Tipo	Sí	Cómo se activa el evento (vea Tipos de Eventos a continuación)
Selector CSS	Depende	Selector CSS que apunta al elemento (requerido para Clic, Envío de Formulario, Visibilidad)
URL de Página	No	Restringir el evento para que se active solo en una página específica
Objetivo de Conversión	No	Alternar para contar este evento como conversión en analíticas

Tipos de Eventos

Cada tipo de evento rastrea un tipo diferente de interacción del visitante. El script de seguimiento maneja todos los tipos automáticos — no se requiere programación.

Clic

Se activa cuando un visitante hace clic en un elemento que coincide con el selector CSS.

Configuración	Descripción
Selector CSS	Selector del elemento objetivo (por ejemplo, `#cta-button`, `.buy-now`, `a[href="/contact"]`)
URL de Página	Opcional — limitar el seguimiento a una página específica

Qué se captura:

Contenido de texto del elemento (primeros 100 caracteres)
Nombre de la etiqueta del elemento (button, a, div, etc.)
Selector CSS que coincidió
URL de la página actual

Use las Herramientas de Desarrollador del navegador para encontrar el selector CSS correcto. Haga clic derecho en el elemento → Inspeccionar → clic derecho en la etiqueta HTML → Copiar → Copiar selector.

Ejemplos de selectores CSS:

/* Botón por ID */
#buy-now-btn

/* Todos los botones con una clase específica */
.add-to-cart

/* Enlace a una página específica */
a[href="/pricing"]

/* Botón dentro de una sección específica */
.hero-section .cta-button

/* Cualquier elemento con un atributo de datos */
[data-action="subscribe"]

Scroll (Visibilidad)

Se activa cuando el visitante se desplaza más allá de un elemento específico en la página. Utiliza un IntersectionObserver para detectar cuándo el elemento entra en el viewport.

Configuración	Descripción
Selector CSS	Elemento objetivo a observar (por ejemplo, `#pricing-section`, `.testimonials`)
Umbral de Scroll	Porcentaje del elemento que debe ser visible (predeterminado: 50%)

Casos de uso:

Rastrear cuántos visitantes ven su sección de precios
Medir el engagement con bloques de contenido específicos
Detectar si los visitantes llegan al final de una página larga

Cada evento de scroll se activa solo una vez por sesión por elemento — incluso si el visitante se desplaza más allá de él varias veces. Esto evita conteos inflados.

Envío de Formulario

Se activa cuando un visitante envía un formulario que coincide con el selector CSS.

Configuración	Descripción
Selector CSS	Elemento de formulario objetivo (por ejemplo, `#contact-form`, `.signup-form`)
Campos del Formulario	Opcional — lista de nombres de campos permitidos para capturar (por ejemplo, `email, phone, name`)

Qué se captura:

Valores de los campos <input>, <select> y <textarea>
Nombres de campos y sus valores (hasta 500 caracteres por campo)
Los campos de contraseña y ocultos se excluyen automáticamente

Por defecto, todos los campos de formulario visibles se capturan. Use la lista de Campos del Formulario permitidos para limitar la recopilación de datos a campos específicos y evitar capturar información sensible.

Visibilidad de Elemento

Se activa cuando un elemento específico se hace visible en el viewport del navegador. Similar a Scroll, pero enfocado en rastrear si un elemento particular de la interfaz fue visto.

Configuración	Descripción
Selector CSS	Elemento objetivo (por ejemplo, `.promo-banner`, `#special-offer`)

Casos de uso:

Rastrear impresiones de banners promocionales
Medir la visibilidad de CTAs importantes
Detectar si el contenido cargado dinámicamente es visto (funciona con SPAs)

El tracker usa un MutationObserver para vigilar elementos añadidos dinámicamente. Si el elemento objetivo es renderizado por JavaScript después de la carga de la página (React, Vue, etc.), aún será detectado.

Personalizado (Manual)

Se activa cuando usted llama a la API de JavaScript desde su propio código. Este es el tipo de evento más flexible — usted controla exactamente cuándo y con qué datos se dispara el evento.

Configuración	Descripción
Nombre	Nombre del evento que coincide con el nombre usado en `RevolTracker.track()`

Los eventos personalizados se cubren en detalle en la sección API de Eventos Personalizados a continuación.

Objetivo de Conversión

Cualquier evento puede marcarse como Objetivo de Conversión activando el interruptor. Cuando está activado:

El evento se cuenta en la tarjeta KPI de Conversiones en el Panel de Control
Se usa para calcular la Tasa de Conversión en la tabla de Rendimiento de Campañas
Las sesiones que contienen este evento se resaltan en la vista de detalle de sesión
El evento aparece en embudos de conversión e informes

¿Qué Constituye un Buen Objetivo de Conversión?

Generación de leads

Marque los envíos de formularios como conversiones — formularios de contacto, solicitudes de cotización, registros a boletines. Estos son indicadores claros de que un visitante se convirtió en lead.

Comercio electrónico

Marque los eventos personalizados de agregar al carrito o compra completada como conversiones. Rastree el embudo completo desde la vista de página hasta la compra.

Engagement

Marque los eventos de scroll más allá de precios o reproducción de video como micro-conversiones. Estos indican un fuerte interés incluso sin envío de formulario.

Llamadas y chats

Marque los eventos de clic en número de teléfono o widget de chat abierto como conversiones. Estos muestran intención de interactuar directamente.

Puede tener múltiples objetivos de conversión activos al mismo tiempo. El KPI de Conversiones del Panel de Control cuenta sesiones únicas con al menos un evento de conversión — así que una sesión que activa 3 eventos de conversión aún cuenta como 1 conversión.

API de Eventos Personalizados

Los eventos personalizados le dan control total sobre el seguimiento de eventos desde su propio código JavaScript. Úselos cuando el seguimiento automático (clics, formularios, visibilidad) no es suficiente — para interacciones dinámicas, procesos de múltiples pasos o acciones específicas del negocio.

Uso Básico

// Evento simple — sin datos adicionales
RevolTracker.track('button_clicked');

// Evento con datos personalizados
RevolTracker.track('item_added_to_cart', {
    item_id: 'SKU-12345',
    item_name: 'Running Shoes',
    price: 89.99,
    currency: 'USD'
});

Referencia de la API

RevolTracker.track(eventName, data)

Parámetro	Tipo	Requerido	Descripción
`eventName`	`string`	Sí	Nombre del evento — debe coincidir con el nombre definido en la pestaña Eventos si desea que esté vinculado a una definición de evento
`data`	`object`	No	Payload personalizado — cualquier dato serializable a JSON (objetos, arrays, cadenas, números)

Capturado automáticamente (no necesita pasar estos):

URL de la página actual
ID de sesión
Marca de tiempo
ID de empresa

Ejemplos de Comercio Electrónico

Rastree el embudo completo de compras:

// Producto visto
RevolTracker.track('product_viewed', {
    product_id: 'SKU-12345',
    product_name: 'Running Shoes Pro',
    category: 'Footwear',
    price: 89.99
});

// Agregado al carrito
RevolTracker.track('add_to_cart', {
    product_id: 'SKU-12345',
    quantity: 1,
    price: 89.99
});

// Checkout iniciado
RevolTracker.track('checkout_started', {
    cart_total: 89.99,
    items_count: 1
});

// Compra completada
RevolTracker.track('purchase_completed', {
    order_id: 'ORD-9876',
    total: 89.99,
    currency: 'USD',
    items: [
        { id: 'SKU-12345', name: 'Running Shoes Pro', qty: 1, price: 89.99 }
    ]
});

Integración de Agregar al Carrito

Un ejemplo completo de integración de eventos personalizados con un botón “Agregar al Carrito”:

<button class="add-to-cart-btn"
        data-product-id="SKU-12345"
        data-product-name="Running Shoes Pro"
        data-price="89.99">
    Add to Cart
</button>

<script>
document.querySelectorAll('.add-to-cart-btn').forEach(function(btn) {
    btn.addEventListener('click', function() {
        // Su lógica de carrito existente
        addItemToCart(this.dataset.productId);

        // Rastree el evento en Revol
        RevolTracker.track('add_to_cart', {
            product_id: this.dataset.productId,
            product_name: this.dataset.productName,
            price: parseFloat(this.dataset.price)
        });
    });
});
</script>

Ejemplo de Formulario de Leads

Rastree envíos de formularios con datos de campos:

<form id="contact-form">
    <input name="name" type="text" placeholder="Your name">
    <input name="email" type="email" placeholder="Email">
    <input name="phone" type="tel" placeholder="Phone">
    <textarea name="message" placeholder="Message"></textarea>
    <button type="submit">Send</button>
</form>

<script>
document.getElementById('contact-form').addEventListener('submit', function(e) {
    var formData = new FormData(this);

    RevolTracker.track('contact_form_submitted', {
        name: formData.get('name'),
        email: formData.get('email'),
        has_phone: !!formData.get('phone'),
        message_length: (formData.get('message') || '').length
    });
});
</script>

Ejemplo SPA / React

Para aplicaciones de página única, dispare eventos en cambios de ruta o interacciones de componentes:

// React — rastrear vista de página en cambio de ruta
useEffect(() => {
    RevolTracker.track('page_view', {
        page: location.pathname,
        title: document.title
    });
}, [location.pathname]);

// React — rastrear clic en botón
function handlePricingClick(plan) {
    RevolTracker.track('pricing_plan_selected', {
        plan: plan,
        page: '/pricing'
    });
}

Cómo Se Envían los Eventos

Los eventos se almacenan en buffer y envían por lotes para rendimiento:

Cada llamada a RevolTracker.track() agrega el evento a un buffer interno
Cada 5 segundos, todos los eventos en buffer se envían al servidor en una sola solicitud
Al descargar la página, cualquier evento restante se envía vía sendBeacon() para confiabilidad
Máximo 50 eventos por lote — los eventos excedentes se descartan

No necesita crear una definición de evento en el panel de control para que los eventos personalizados se registren. Los eventos personalizados no definidos aún se almacenan con sus datos — pero no tendrán un conteo de activaciones en la lista de Eventos. Para un seguimiento completo, cree una definición de evento coincidente con el mismo nombre.

Analice Su Sitio Web con Claude Code

Si no está seguro de qué elementos rastrear, puede usar Claude Code para analizar su sitio web y sugerir una configuración óptima de seguimiento de eventos.

Prompt para análisis de sitio web

Analyze the website at [YOUR_WEBSITE_URL] and create a comprehensive
event tracking plan for Revol Tracker. I need you to:

1. Identify all interactive elements on the page:
   - CTA buttons (purchases, signups, demos)
   - Navigation links that indicate intent
   - Forms (contact, subscribe, login)
   - Media elements (video plays, image galleries)
   - Scroll landmarks (pricing section, testimonials, FAQ)

2. For each element, provide:
   - A descriptive event name (snake_case)
   - The event type (click, form_submit, scroll, visibility, custom)
   - The exact CSS selector
   - Whether it should be a conversion goal (and why)
   - Priority (high/medium/low) based on business impact

3. Generate ready-to-use event definitions that I can create
   in the Revol Tracker Events tab.

4. For any elements that need custom JavaScript tracking,
   provide the complete RevolTracker.track() code snippets.

5. Suggest a conversion funnel with 3-5 key stages
   (e.g., Visit → View Pricing → Submit Form → Start Chat).

Format the output as a table with columns:
Event Name | Type | CSS Selector | Conversion | Priority

My website is: [PASTE URL]
My business type is: [e.g., e-commerce, SaaS, service business, agency]
My main conversion action is: [e.g., form submission, purchase, demo request]

Tracker

​Descripción General

​Lista de Eventos

​Filtros

​Crear un Evento

​Tipos de Eventos

​Clic

​Scroll (Visibilidad)

​Envío de Formulario

​Visibilidad de Elemento

​Personalizado (Manual)

​Objetivo de Conversión

​¿Qué Constituye un Buen Objetivo de Conversión?

​API de Eventos Personalizados

​Uso Básico

​Referencia de la API

​Ejemplos de Comercio Electrónico

​Integración de Agregar al Carrito

​Ejemplo de Formulario de Leads

​Ejemplo SPA / React

​Cómo Se Envían los Eventos

​Analice Su Sitio Web con Claude Code

Descripción General

Lista de Eventos

Filtros

Crear un Evento

Tipos de Eventos

Clic

Scroll (Visibilidad)

Envío de Formulario

Visibilidad de Elemento

Personalizado (Manual)

Objetivo de Conversión

¿Qué Constituye un Buen Objetivo de Conversión?

API de Eventos Personalizados

Uso Básico

Referencia de la API

Ejemplos de Comercio Electrónico

Integración de Agregar al Carrito

Ejemplo de Formulario de Leads

Ejemplo SPA / React

Cómo Se Envían los Eventos

Analice Su Sitio Web con Claude Code