# Seguimiento analíticas avanzado

El módulo de tracking escucha todos los eventos personalizados de Joinchat y los envía automáticamente a **Google Analytics 4 (GA4)** y **Google Tag Manager (GTM)**. Esto permite realizar un seguimiento completo de las interacciones del usuario con el chat.

## Integración

### Google Analytics 4 (GA4)

Si `gtag()` está disponible en la página, los eventos se envían usando:

```
gtag('event', action, {
  event_category: 'JoinChat',
  event_label: label,
  value: value
});
Lenguaje del código: JavaScript (javascript)
```

### Google Tag Manager (GTM)

Si `dataLayer` está disponible, los eventos se envían con información adicional:

- `event`: 'joinchat\_event'
- `event_category`: Categoría del evento (por defecto: 'JoinChat')
- `event_action`: Acción realizada
- `event_label`: Descripción o contexto
- `event_value`: Valor numérico (opcional)
- `is_mobile`: 'yes' o 'no'
- `page_location`: URL actual
- `page_title`: Título de la página

**Parámetros adicionales para eventos de enlaces:**

- `link_url`: URL completa (disponible en: `button_click`, `link_click`, `option_link`)
- `link_domain`: Dominio extraído de la URL

## Eventos Rastreados

### Joinchat Events

#### Chat Open

**Evento:** `joinchat:show`
**Acción GA:** `chat_open`
**Label:** Tipo de trigger ('button', 'auto', 'hover', 'url', etc.)

Se dispara cuando se abre la ventana del chat.

#### Chat Close

**Clic en:** `.joinchat__close`
**Acción GA:** `chat_close`

Se dispara cuando el usuario cierra la ventana del chat.

#### Button Click

**Clic en:** `.joinchat__btn` dentro de `.joinchat__bubble`
**Acción GA:** `button_click`
**Label:** Texto del botón (máx. 100 caracteres)

Se dispara cuando se hace clic en un botón dentro de las burbujas del chat.

**Parámetros adicionales (solo GTM):**

- `link_url`: URL completa del enlace
- `link_domain`: Dominio del enlace

#### Link Click

**Clic en:** `<a>` dentro de `.joinchat__bubble`
**Acción GA:** `link_click`
**Label:** Texto del enlace (máx. 100 caracteres)

Se dispara cuando se hace clic en un enlace dentro de las burbujas del chat.

**Parámetros adicionales (solo GTM):**

- `link_url`: URL completa del enlace
- `link_domain`: Dominio del enlace

#### Opt-in Toggle

**Evento:** `joinchat:optin`
**Acción GA:** `optin_toggle`
**Label:** 'accept' o 'reject'

Se dispara cuando el usuario activa o desactiva el checkbox de opt-in.

### Chat Funnels Events

#### Goto (Opción Seleccionada)

**Evento:** `joinchat:goto`
**Acción GA:** `goto`
**Label:** Texto de la opción seleccionada
**Value:** Número de paso

Se dispara cuando el usuario selecciona una opción en el funnel.

#### Input (Campo Rellenado)

**Evento:** `joinchat:input`
**Acción GA:** `input`
**Label:** `nombre_campo (tipo)`

Se dispara cuando el usuario envía un campo de entrada.

**Eventos adicionales específicos:**

- `input_email` - Label: nombre del campo
- `input_phone` - Label: nombre del campo

**Nota de privacidad:** Por cumplimiento de GDPR, no se envía el valor introducido por el usuario, solo el nombre y tipo del campo.

#### Link Option Clicked

**Evento:** `joinchat:link`
**Acción GA:** `option_link`
**Label:** Texto de la opción seleccionada

Se dispara cuando el usuario hace clic en una opción de tipo enlace.

**Parámetros adicionales (solo GTM):**

- `link_url`: URL completa del enlace
- `link_domain`: Dominio del enlace

#### AI Agent Activated

**Evento:** `joinchat:ai`
**Acción GA:** `ai_agent`

Se dispara cuando se pasa el control a un agente AI.

#### Contact Options Shown

**Evento:** `joinchat:contact`
**Acción GA:** `contact_show`
**Label:** Modo de contacto ('default', 'custom', 'custom\_message')

Se dispara cuando se muestran las opciones de contacto.

#### Submit Success

**Evento:** `joinchat:submitSuccess`
**Acción GA:** `submit_success`

Se dispara cuando los datos se envían correctamente al servidor.

#### Submit Error

**Evento:** `joinchat:submitError`
**Acción GA:** `submit_error`
**Label:** Mensaje de error

Se dispara cuando falla el envío de datos al servidor.

#### Webhook Success

**Evento:** `joinchat:webhookSuccess`
**Acción GA:** `webhook_success`

Se dispara cuando una llamada webhook se completa correctamente.

#### Webhook Error

**Evento:** `joinchat:webhookError`
**Acción GA:** `webhook_error`
**Label:** Mensaje de error

Se dispara cuando falla una llamada webhook.

#### Funnel Load

**Evento:** `joinchat:funnel`
**Acción GA:** `funnel_load`
**Label:** ID del funnel (ej: 'Funnel 2')

Se dispara cuando se carga un funnel específico.

### Media Events

#### Video Play/Pause

**Evento:** `joinchat:video`
**Acción GA:** `video_play` o `video_pause`
**Label:** `servicio: video_id` (servicio puede ser 'youtube', 'vimeo')

Se dispara cuando se reproduce o pausa un video embebido.

### Support Agents Events

#### Expand Agents List

**Evento:** `joinchat:expand_agents`
**Acción GA:** `agents_expand`
**Label:** `X/Y online` (X agentes online de Y totales)

Se dispara cuando se expande la lista colapsada de agentes.

---

## Configuración

El tracking se activa automáticamente cuando el archivo se carga. No requiere inicialización manual.

### Data Layer Personalizado

El script busca el data layer en el siguiente orden:

1. `joinchat_obj.settings.data_layer` - Configuración personalizada
2. `window.gtm4wp_datalayer_name` - Plugin GTM4WP para WordPress
3. `window.dataLayerPYS` - Plugin PixelYourSite
4. `window.dataLayer` - Data layer por defecto

### Categoría de Evento Personalizada

Por defecto, todos los eventos usan la categoría 'JoinChat', pero puede personalizarse mediante:

```
joinchat_obj.settings.event_category = 'MiCategoria';
Lenguaje del código: JavaScript (javascript)
```

## Compatibilidad

- **Google Analytics 4** (gtag.js)
- **Google Tag Manager** (dataLayer)
- Compatible con GTM4WP y PixelYoursite plugins

## Requisitos

- `window.joinchat_obj` debe estar definido
- Al menos uno de los siguientes debe estar disponible: 
    - Función `gtag()` (Google Analytics 4)
    - Objeto `dataLayer` (Google Tag Manager)

## Notas Técnicas

- El script se ejecuta en un IIFE (Immediately Invoked Function Expression) para evitar contaminar el scope global
- Usa 'strict mode' para mayor seguridad
- Todos los event listeners se registran en el `document` para capturar eventos de toda la aplicación
- Las etiquetas de texto se limitan a 100 caracteres para evitar datos excesivamente largos