Documentación de Tracking y Eventos

Todo lo que necesitas para instalar ClearAnalytics en tu sitio web y rastrear páginas vistas, eventos personalizados, objetivos de clic y transacciones de e-commerce.

Descripción general

ClearAnalytics ofrece dos variantes de script de tracking. Elige la que se adapte a tus necesidades: un script mínimo para analíticas básicas de páginas vistas, o un script completo para eventos personalizados, objetivos de clic y seguimiento de e-commerce.

Light Script (ca.js)

El script de tracking más ligero posible. Perfecto para blogs, páginas de destino y sitios que solo necesitan analíticas de páginas vistas.

ca.js < 1 KB

Seguimiento automático de páginas vistas
Duración de sesión y tasa de rebote
Captura de parámetros de campaña UTM
Soporte para aplicaciones de página única

Full Script (ca-events.js)

Todo lo del light script, más eventos personalizados, seguimiento de objetivos de clic, intercepción del dataLayer GA4 y soporte completo de e-commerce.

ca-events.js < 2 KB

Todo lo del light script
Seguimiento de eventos personalizados vía window.ca()
Seguimiento de objetivos de clic vía data-ca-goal
Integración con dataLayer GA4
Seguimiento completo de eventos de e-commerce

Instalación

Añade una sola etiqueta de script a tu sitio web. Sin paquetes npm, sin herramientas de compilación, sin archivos de configuración. El script se carga de forma asíncrona y no tiene ningún impacto en el rendimiento de la página.

HTML — Light Script

Añade esto en el <head> o al final del <body> en cada página. Rastrea automáticamente páginas vistas, duración de sesión y parámetros UTM.

<script defer src="https://clearanalytics.eu/js/ca.js"></script>

HTML — Full Script

Usa esta variante si necesitas eventos personalizados, objetivos de clic o seguimiento de e-commerce.

<script defer src="https://clearanalytics.eu/js/ca-events.js"></script>

HTML — Full Script con DataLayer

Añade el atributo data-ca-datalayer para interceptar automáticamente los eventos del dataLayer GA4, incluyendo todos los eventos de e-commerce.

<script defer src="https://clearanalytics.eu/js/ca-events.js" data-ca-datalayer></script>

WordPress

Añade la etiqueta de script a través del archivo functions.php de tu tema o usa un plugin de inyección de header/footer.

// functions.php
add_action('wp_head', function () {
    echo '<script defer src="https://clearanalytics.eu/js/ca-events.js"></script>';
});

React / Next.js

Usa el componente Script de Next.js para una carga óptima. El script funciona con cualquier framework de React.

// app/layout.tsx  (Next.js App Router)
import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html>
      <head>
        <Script
          src="https://clearanalytics.eu/js/ca-events.js"
          strategy="afterInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

Vue / Nuxt

Añade el script a través de tu configuración de Nuxt o directamente en tu plantilla HTML para aplicaciones Vue simples.

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://clearanalytics.eu/js/ca-events.js',
          defer: true,
        },
      ],
    },
  },
});

Google Tag Manager

También puedes desplegar el script a través de Google Tag Manager usando una etiqueta HTML personalizada.

Tag Type:   Custom HTML
Trigger:    All Pages

<script defer src="https://clearanalytics.eu/js/ca-events.js" data-ca-datalayer></script>

Al usar GTM con el atributo data-ca-datalayer, ClearAnalytics capturará automáticamente todos los eventos dataLayer enviados por tus etiquetas GTM existentes.

Eventos Personalizados

Rastrea cualquier interacción del usuario enviando eventos personalizados con metadatos opcionales. Los eventos personalizados aparecen en tu panel de control y pueden usarse como disparadores de objetivos.

Requiere el full script (ca-events.js).

API Signature

window.ca(eventName, properties?);

Parámetro	Tipo	Descripción
`eventName`	string	Un nombre descriptivo para el evento (ej. 'signup', 'file_download').
`properties`	object	Objeto opcional con metadatos adicionales. Serializado como JSON.

Ejemplos

// Rastrear un registro con info del plan

window.ca('signup', { plan: 'pro' });

// Rastrear una descarga de archivo

window.ca('file_download', {
  file_name: 'whitepaper.pdf',
  file_type: 'pdf',
});

// Rastrear la reproducción de un vídeo

window.ca('video_play', {
  video_title: 'Product Demo',
  duration: 120,
});

// Rastrear una búsqueda interna

window.ca('search', { query: 'privacy analytics' });

Seguimiento de Objetivos de Clic

Rastrea clics en botones y enlaces sin escribir JavaScript. Añade un atributo data-ca-goal a cualquier elemento HTML y el clic se registrará automáticamente.

Requiere el full script (ca-events.js).

Uso

Añade data-ca-goal="goal-name" a cualquier elemento clicable. El valor del atributo se convierte en el identificador del objetivo en tu panel de control.

<button data-ca-goal="cta-signup">Sign Up</button>

<a href="/pricing" data-ca-goal="pricing-click">View Pricing</a>

<form data-ca-goal="contact-form-submit">
  <!-- The goal fires when any element inside is clicked -->
  <button type="submit">Send</button>
</form>

Cómo funciona

El script usa delegación de eventos en el documento para detectar clics de forma eficiente:

Se dispara un evento de clic en cualquier parte de la página.
El script recorre el árbol DOM hacia arriba desde el elemento clicado buscando un atributo data-ca-goal.
Si se encuentra, envía un evento de clic con el nombre del objetivo como selector.

Ver Objetivos de Clic

Los eventos de objetivos de clic aparecen en la página de Objetivos de tu panel de control. Crea un objetivo de tipo "Clic" y asócialo al valor data-ca-goal que usaste en tu HTML.

Integración con DataLayer GA4

Si tu sitio ya envía eventos al dataLayer de Google Analytics, ClearAnalytics puede interceptar esos eventos automáticamente. Este es el camino de migración más fácil desde GA4.

Requiere el full script (ca-events.js).

Activar la intercepción del DataLayer

Añade el atributo data-ca-datalayer a la etiqueta de script. Este enfoque opt-in asegura que la función solo se active cuando la habilites explícitamente.

<script defer src="https://clearanalytics.eu/js/ca-events.js" data-ca-datalayer></script>

Cómo funciona

Cuando está activado, el script intercepta todas las llamadas a dataLayer.push():

Los eventos de e-commerce reconocidos (purchase, add_to_cart, etc.) se reenvían como eventos de e-commerce.
Todos los demás eventos personalizados se reenvían como eventos personalizados genéricos.
Los eventos internos de GTM (gtm.js, gtm.dom, gtm.load, etc.) se filtran automáticamente.
Las entradas existentes del dataLayer se procesan al cargar la página; los pushes futuros se interceptan en tiempo real.

Ejemplo

// These dataLayer pushes are automatically captured
dataLayer.push({
  event: 'form_submit',
  form_id: 'contact',
  form_name: 'Contact Form',
});

dataLayer.push({
  event: 'video_start',
  video_title: 'Product Demo',
  video_duration: 120,
});

Eventos ignorados

Los siguientes eventos internos de GTM se ignoran automáticamente y no aparecerán en tu panel de control:

// These GTM internal events are automatically filtered out:
gtm.js, gtm.dom, gtm.load, gtm.click, gtm.linkClick, gtm.scrollDepth

Seguimiento de E-Commerce

Rastrea el recorrido completo del cliente desde la navegación de productos hasta la compra y el reembolso. ClearAnalytics soporta los 14 eventos estándar de e-commerce usando el mismo formato dataLayer que GA4.

Requiere el full script (ca-events.js) con el atributo data-ca-datalayer.

Todos los eventos de e-commerce usan el formato dataLayer.push() compatible con GA4. Si ya tienes implementado el seguimiento de e-commerce de GA4, ClearAnalytics capturará esos eventos automáticamente sin cambios de código.

Evento	Descripción
`view_item_list`	El usuario ve una lista de productos o resultados de búsqueda.
`select_item`	El usuario hace clic en un producto de una lista.
`view_item`	El usuario ve una página de detalle de producto.
`add_to_cart`	El usuario añade un producto al carrito de compras.
`remove_from_cart`	El usuario elimina un producto del carrito.
`view_cart`	El usuario ve el carrito de compras.
`add_to_wishlist`	El usuario añade un producto a su lista de deseos.
`begin_checkout`	El usuario inicia el proceso de pago.
`add_shipping_info`	El usuario envía su información de envío.
`add_payment_info`	El usuario envía su información de pago.
`purchase`	El usuario completa una compra.
`refund`	Se procesa un reembolso total o parcial.
`view_promotion`	El usuario ve un banner promocional o una oferta.
`select_promotion`	El usuario hace clic en una promoción.

view_item_list

Dispara este evento cuando los usuarios ven una lista de productos, como una página de categoría o resultados de búsqueda.

dataLayer.push({ ecommerce: null }); // Clear previous data
dataLayer.push({
  event: 'view_item_list',
  ecommerce: {
    item_list_id: 'category_results',
    item_list_name: 'Category Results',
    items: [
      {
        item_id: 'SKU-001',
        item_name: 'Running Shoes',
        item_brand: 'SportCo',
        item_category: 'Footwear',
        price: 89.99,
        index: 0,
      },
      {
        item_id: 'SKU-002',
        item_name: 'Trail Shoes',
        item_brand: 'SportCo',
        item_category: 'Footwear',
        price: 119.99,
        index: 1,
      },
    ],
  },
});

select_item

Dispara este evento cuando un usuario hace clic en un producto específico de una lista para verlo.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'select_item',
  ecommerce: {
    item_list_id: 'category_results',
    item_list_name: 'Category Results',
    items: [{
      item_id: 'SKU-001',
      item_name: 'Running Shoes',
      item_brand: 'SportCo',
      price: 89.99,
      index: 0,
    }],
  },
});

view_item

Dispara este evento cuando un usuario llega a una página de detalle de producto.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'view_item',
  ecommerce: {
    currency: 'EUR',
    value: 89.99,
    items: [{
      item_id: 'SKU-001',
      item_name: 'Running Shoes',
      item_brand: 'SportCo',
      item_category: 'Footwear',
      item_variant: 'Blue / Size 42',
      price: 89.99,
      quantity: 1,
    }],
  },
});

add_to_cart

Dispara este evento cuando un usuario añade uno o más productos a su carrito de compras.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'add_to_cart',
  ecommerce: {
    currency: 'EUR',
    value: 89.99,
    items: [{
      item_id: 'SKU-001',
      item_name: 'Running Shoes',
      item_brand: 'SportCo',
      price: 89.99,
      quantity: 1,
    }],
  },
});

remove_from_cart

Dispara este evento cuando un usuario elimina un producto de su carrito.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'remove_from_cart',
  ecommerce: {
    currency: 'EUR',
    value: 89.99,
    items: [{
      item_id: 'SKU-001',
      item_name: 'Running Shoes',
      price: 89.99,
      quantity: 1,
    }],
  },
});

view_cart

Dispara este evento cuando un usuario ve su página del carrito de compras.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'view_cart',
  ecommerce: {
    currency: 'EUR',
    value: 209.98,
    items: [
      { item_id: 'SKU-001', item_name: 'Running Shoes', price: 89.99, quantity: 1 },
      { item_id: 'SKU-003', item_name: 'Sports Watch', price: 119.99, quantity: 1 },
    ],
  },
});

add_to_wishlist

Dispara este evento cuando un usuario guarda un producto en su lista de deseos para más tarde.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'add_to_wishlist',
  ecommerce: {
    currency: 'EUR',
    value: 89.99,
    items: [{
      item_id: 'SKU-001',
      item_name: 'Running Shoes',
      price: 89.99,
    }],
  },
});

begin_checkout

Dispara este evento cuando un usuario inicia el flujo de pago.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'begin_checkout',
  ecommerce: {
    currency: 'EUR',
    value: 209.98,
    coupon: 'SUMMER20',
    items: [
      { item_id: 'SKU-001', item_name: 'Running Shoes', price: 89.99, quantity: 1 },
      { item_id: 'SKU-003', item_name: 'Sports Watch', price: 119.99, quantity: 1 },
    ],
  },
});

add_shipping_info

Dispara este evento cuando un usuario selecciona o envía sus datos de envío durante el pago.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'add_shipping_info',
  ecommerce: {
    currency: 'EUR',
    value: 209.98,
    shipping_tier: 'Express',
    items: [
      { item_id: 'SKU-001', item_name: 'Running Shoes', price: 89.99, quantity: 1 },
      { item_id: 'SKU-003', item_name: 'Sports Watch', price: 119.99, quantity: 1 },
    ],
  },
});

add_payment_info

Dispara este evento cuando un usuario selecciona o envía su método de pago durante el pago.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'add_payment_info',
  ecommerce: {
    currency: 'EUR',
    value: 209.98,
    payment_type: 'Credit Card',
    items: [
      { item_id: 'SKU-001', item_name: 'Running Shoes', price: 89.99, quantity: 1 },
      { item_id: 'SKU-003', item_name: 'Sports Watch', price: 119.99, quantity: 1 },
    ],
  },
});

purchase

Dispara este evento cuando se confirma una compra. Incluye transaction_id, value, currency, tax, shipping y el array completo de items.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'purchase',
  ecommerce: {
    transaction_id: 'TXN-20260219-001',
    affiliation: 'Online Store',
    value: 209.98,
    tax: 36.49,
    shipping: 5.99,
    currency: 'EUR',
    coupon: 'SUMMER20',
    items: [
      {
        item_id: 'SKU-001',
        item_name: 'Running Shoes',
        item_brand: 'SportCo',
        item_category: 'Footwear',
        item_variant: 'Blue / Size 42',
        price: 89.99,
        quantity: 1,
        coupon: '',
      },
      {
        item_id: 'SKU-003',
        item_name: 'Sports Watch',
        item_brand: 'FitTech',
        item_category: 'Electronics',
        item_variant: 'Black',
        price: 119.99,
        quantity: 1,
        coupon: '',
      },
    ],
  },
});

refund

Dispara este evento cuando se procesa un reembolso. Para un reembolso total, solo se requiere el transaction_id. Para reembolsos parciales, incluye los artículos específicos.

// Full refund
dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'refund',
  ecommerce: {
    transaction_id: 'TXN-20260219-001',
  },
});

// Partial refund (specific items)
dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'refund',
  ecommerce: {
    transaction_id: 'TXN-20260219-001',
    items: [{
      item_id: 'SKU-001',
      quantity: 1,
    }],
  },
});

view_promotion

Dispara este evento cuando un banner promocional, carrusel u oferta se hace visible para el usuario.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'view_promotion',
  ecommerce: {
    creative_name: 'Spring Banner',
    creative_slot: 'homepage_hero',
    promotion_id: 'PROMO-SPRING-2026',
    promotion_name: 'Spring Sale 2026',
    items: [{
      item_id: 'SKU-001',
      item_name: 'Running Shoes',
      price: 89.99,
      discount: 15.00,
    }],
  },
});

select_promotion

Dispara este evento cuando un usuario hace clic en una promoción para obtener más información o aprovechar la oferta.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'select_promotion',
  ecommerce: {
    creative_name: 'Spring Banner',
    creative_slot: 'homepage_hero',
    promotion_id: 'PROMO-SPRING-2026',
    promotion_name: 'Spring Sale 2026',
    items: [{
      item_id: 'SKU-001',
      item_name: 'Running Shoes',
      price: 89.99,
    }],
  },
});

Migración desde Google Analytics

ClearAnalytics está diseñado para funcionar junto a o como reemplazo de Google Analytics. Puedes ejecutar ambas herramientas en paralelo durante la migración sin conflictos.

Ejecutar ambos scripts en paralelo

Añade el script de ClearAnalytics junto a tu etiqueta de Google Analytics existente. Ambos scripts rastrean de forma independiente sin interferir entre sí.

<!-- Google Analytics (existing) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXX');
</script>

<!-- ClearAnalytics (add this line) -->
<script defer src="https://clearanalytics.eu/js/ca-events.js" data-ca-datalayer></script>

Compatibilidad de funciones

Así es como las funciones de ClearAnalytics se corresponden con sus equivalentes de Google Analytics:

Función	Google Analytics	ClearAnalytics
Páginas vistas	`gtag('event', 'page_view')`	Automático
Eventos Personalizados	`gtag('event', ...)`	`window.ca('event')`
E-Commerce	`dataLayer.push()`	Compatible con dataLayer
Campañas UTM	Automático	Automático
Sesiones	Basado en cookies	Sin cookies

Pasos de migración

Añade el script de ClearAnalytics a tu sitio junto a Google Analytics.
Activa la intercepción del dataLayer con data-ca-datalayer para capturar los eventos de e-commerce existentes.
Compara los datos en ambos paneles de control durante 2-4 semanas para verificar la precisión.
Una vez satisfecho, elimina el script de Google Analytics y disfruta de una configuración más rápida y centrada en la privacidad.

Soporte SPA

ClearAnalytics detecta automáticamente la navegación del lado del cliente en aplicaciones de página única. No se requiere configuración adicional ni integración con el enrutador.

Cómo funciona

El script intercepta las llamadas a la API History del navegador para detectar la navegación de página:

history.pushState() las llamadas se interceptan y activan una nueva página vista.
history.replaceState() las llamadas se interceptan y activan una nueva página vista.
popstate los eventos (atrás/adelante del navegador) activan una nueva página vista.

Frameworks compatibles

Funciona de forma inmediata con cualquier framework que use la API History para el enrutamiento:

React Next.js Vue.js Nuxt Svelte SvelteKit Angular Remix Astro Inertia.js

No se necesitan plugins de enrutador, hooks de ciclo de vida ni llamadas de seguimiento manuales. Simplemente añade la etiqueta de script una vez y cada navegación de página se rastrea automáticamente.

Privacidad y Cumplimiento

ClearAnalytics está construido con la privacidad como pilar. El script de tracking solo recopila datos anónimos y agregados. Nunca se almacena ni transmite información personal.

Sin cookies

El script no establece, lee ni depende de cookies del navegador. No se necesita banner de consentimiento de cookies.

Sin fingerprinting

Nunca creamos huellas digitales del navegador. No se utilizan técnicas de fingerprinting de canvas, WebGL, fuentes o audio.

Sin almacenamiento de IP

Las direcciones IP de los visitantes se usan solo para el hash anonimizado durante la solicitud. Nunca se almacenan en la base de datos.

Conforme al RGPD

Como no se recopilan datos personales, ClearAnalytics queda fuera del alcance de los requisitos de consentimiento del RGPD. Todos los datos permanecen en la UE.

Cómo anonimizamos a los visitantes

Para contar visitantes únicos sin almacenar datos personales, usamos un hash anónimo de rotación diaria:

La dirección IP y el User-Agent del visitante se combinan con un salt de rotación diaria.
Esta combinación se hashea usando un algoritmo SHA-256 unidireccional.
El salt rota cada 24 horas, haciendo imposible rastrear visitantes entre días.
La dirección IP original nunca se almacena ni registra.

Datos recopilados por el script

Los siguientes campos de datos no personales se envían con cada evento de página vista:

Campo	Propósito
`pathname`	La ruta URL de la página visitada.
`referrer`	La URL de la página de referencia, si la hay.
`language`	La configuración de idioma del navegador.
`screen_width / screen_height`	Dimensiones de pantalla para la clasificación del tipo de dispositivo.
`utm_*`	Parámetros de seguimiento de campaña de la URL.
`duration`	Tiempo pasado en la página en segundos.

Como ClearAnalytics nunca recopila datos personales, no necesitas un banner de consentimiento de cookies, popup de privacidad o mecanismo de opt-in para usar nuestro script de tracking. Es conforme con RGPD, ePrivacy, PECR y CCPA de forma nativa.