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

# Instruccion: Generar Clases CSS para Seguimiento de Eventos

## Contexto

Uso el sistema de seguimiento Revol, que rastrea las acciones de
los usuarios en sitios web mediante selectores CSS. El rastreador
se integra con un solo script y escucha automaticamente los eventos
en elementos que coinciden con los selectores CSS especificados.
No se necesita codigo JS adicional en el sitio (excepto para
formularios AJAX, ver mas abajo).

## Como Funciona el Seguimiento de Eventos

El sistema soporta 5 tipos de eventos:

- click — clic en elemento. Usa
  document.addEventListener('click') + e.target.closest(css_selector),
  delegacion en document en fase de captura.
- form_submit — envio de formulario. Usa
  document.addEventListener('submit') + verifica css_selector
  en la etiqueta <form>.
- scroll — desplazamiento hasta elemento. IntersectionObserver
  con threshold (0-100%), se activa una vez por sesion.
- visibility — elemento visible en viewport. IntersectionObserver,
  una sola vez.
- custom — llamada manual JS: RevolTracker.track('Nombre', {data})

## Tu Tarea

### Paso 1: Analiza Todas las Paginas del Sitio

Revisa todos los archivos HTML/plantillas y encuentra:

1. Botones (buttons/links) — CTAs, navegacion, acciones
2. Numeros de telefono — <a href="tel:...">, bloques de texto
3. Enlaces de email — <a href="mailto:...">
4. Mensajeros — Telegram, Viber, WhatsApp enlaces
5. Formularios — contacto, solicitudes, suscripciones, pedidos
6. Bloques clicables — tarjetas, banners, secciones con enlaces
7. Elementos de conversion — carrito, checkout, registro

### Paso 2: Agrega Clases CSS para Seguimiento

Para cada elemento, agrega una clase CSS con prefijo rv-:

Convencion de nombres: rv-{tipo}-{seccion}-{accion}
Tipos: btn, link, form, block, scroll

Ejemplos:
- rv-btn-hero-cta — boton CTA en seccion hero
- rv-btn-header-phone — clic telefono en header
- rv-btn-footer-phone — clic telefono en footer
- rv-btn-pricing-order — boton de pedido en precios
- rv-btn-header-telegram — clic Telegram en header
- rv-form-contact — formulario de contacto
- rv-form-callback — formulario de devolucion de llamada
- rv-block-services-card — clic en tarjeta de servicio
- rv-link-nav-about — enlace navegacion "Nosotros"
- rv-scroll-testimonials — scroll hasta testimonios

Reglas:
- La clase rv-* se agrega ADEMAS de las clases existentes
- Un elemento = una clase rv-
- La clase debe ser unica por pagina (o compartida
  para elementos similares, ej. todas las tarjetas)

### Paso 3: Reglas para Formularios

La clase rv-form-* va en la etiqueta <form>, NO en el boton submit:

  Correcto:
  <form class="contact-form rv-form-contact" action="/submit">
    <input name="phone" type="tel">
    <button type="submit">Enviar</button>
  </form>

  Incorrecto:
  <form class="contact-form">
    <button class="rv-form-contact" type="submit">Enviar</button>
  </form>

Formularios AJAX (sin submit nativo):

Si un formulario se envia via JS (fetch, axios, $.ajax) sin
evento submit nativo, el rastreador NO lo capturara. Senales:
- e.preventDefault() + fetch/axios/$.ajax en el handler
- Formulario sin action o con action="javascript:void(0)"
- Boton tiene type="button" en vez de type="submit"

Para estos formularios, agrega una llamada manual junto al AJAX:
  RevolTracker.track('Formulario de contacto', { form: 'contact' });

En la tabla de eventos, marca estos como tipo custom en vez de
form_submit e indica que se necesita llamada manual.

### Paso 4: Crea la Tabla de Eventos

Los nombres de eventos deben estar en espanol. Formato:

# | Nombre del Evento | Selector CSS | Tipo | Conversion? | Pagina | Descripcion

Ejemplo:
1 | Clic CTA Hero | .rv-btn-hero-cta | click | Si | Inicio | Boton CTA principal en hero
2 | Clic telefono header | .rv-btn-header-phone | click | Si | Todas | Clic en telefono del header
3 | Clic telefono footer | .rv-btn-footer-phone | click | Si | Todas | Clic en telefono del footer
4 | Clic Telegram | .rv-btn-header-telegram | click | Si | Todas | Clic en enlace Telegram
5 | Formulario contacto | .rv-form-contact | form_submit | Si | Contacto | Envio de formulario
6 | Formulario callback | .rv-form-callback | form_submit | Si | Inicio | Formulario "Llamame"
7 | Clic tarjeta servicio | .rv-block-services-card | click | No | Servicios | Clic en tarjeta
8 | Nav — Nosotros | .rv-link-nav-about | click | No | Todas | Navegar a Nosotros
9 | Scroll a testimonios | .rv-scroll-testimonials | scroll (80%) | No | Inicio | Scroll hasta testimonios
10 | Formulario solicitud (AJAX) | — | custom | Si | Servicios | AJAX, necesita RevolTracker.track()

### Que Cuenta como Conversion

Si — conversion:
- Clic en telefono (<a href="tel:...">)
- Clic en email (<a href="mailto:...">)
- Clic en mensajeros (Telegram, Viber, WhatsApp)
- Envio de cualquier formulario (solicitud, pedido, contacto)
- Clic en botones CTA ("Pedir", "Comprar", "Reservar")

No — no es conversion:
- Enlaces de navegacion
- Clics en bloques informativos (si no son CTA)
- Eventos scroll/visibility
- Clics en redes sociales (si no son CTA)

## Formato de Respuesta

1. Cambios en archivos — que clases rv-* agregar, con diff
2. Tabla de eventos — lista completa con todas las columnas
3. Formularios AJAX — listar por separado los formularios que
   necesitan llamada manual RevolTracker.track(), con codigo

Mi sitio web es: [PEGAR URL]
Tipo de negocio: [ej. e-commerce, SaaS, servicios, agencia]
Accion de conversion principal: [ej. formulario, compra, reserva]

Tracker

Documentation Index

​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