> ## Documentation Index
> Fetch the complete documentation index at: https://revolai.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Eventos

> Defina eventos de seguimiento personalizados — clics, formularios, triggers de scroll, visibilidad — y establezca objetivos de conversión

## 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.

<Frame>
  <img className="block dark:hidden" src="https://mintcdn.com/revolai/iNw1SuV7xncLWRFk/images/tracker-events-light.png?fit=max&auto=format&n=iNw1SuV7xncLWRFk&q=85&s=a2ff0a5cbcd29ff22b3471bcca775edd" alt="Pestaña de eventos" width="2874" height="1558" data-path="images/tracker-events-light.png" />

  <img className="hidden dark:block" src="https://mintcdn.com/revolai/iNw1SuV7xncLWRFk/images/tracker-events-dark.png?fit=max&auto=format&n=iNw1SuV7xncLWRFk&q=85&s=fdf74d88094e9f6afd40cb31abdf720a" alt="Pestaña de eventos" width="2873" height="1553" data-path="images/tracker-events-dark.png" />
</Frame>

## 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

<Tip>
  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**.
</Tip>

**Ejemplos de selectores CSS:**

```css theme={null}
/* 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

<Note>
  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.
</Note>

### 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**

<Warning>
  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.
</Warning>

### 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)

<Note>
  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.
</Note>

### 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](#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?

<AccordionGroup>
  <Accordion title="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.
  </Accordion>

  <Accordion title="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.
  </Accordion>

  <Accordion title="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.
  </Accordion>

  <Accordion title="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.
  </Accordion>
</AccordionGroup>

<Tip>
  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.
</Tip>

***

## 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

```javascript theme={null}
// 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

```javascript theme={null}
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:

```javascript theme={null}
// 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":

```html theme={null}
<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:

```html theme={null}
<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:

```javascript theme={null}
// 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:

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

<Note>
  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.
</Note>

***

## 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.

<Accordion title="Prompt para análisis de sitio web">
  ```text theme={null}
  # 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]
  ```
</Accordion>