Instalar el tracker

Para empezar a recopilar datos necesitas tres cosas: un sitio en Klickbee Tracking (llamado project en el panel), su clave pública y el tracker añadido a tus páginas. Lleva unos minutos.

1. Crea tu sitio

1. Ve a tracking.klickbee.com y haz clic en Start free (o en Create one en la página de inicio de sesión). Introduce tu Name, tu Email y tu Password (mínimo 8 caracteres) y haz clic en Create account.
2. Abre el correo de verificación («Verify your email · Klickbee») y haz clic en Verify email. No puedes iniciar sesión antes de verificar tu correo. Si el correo no llega, usa Resend email en la pantalla de registro, o Resend verification email en la pantalla de inicio de sesión.
3. En la pantalla Create your first site, escribe un Project name (por ejemplo «Mi web») y haz clic en Create project.

Klickbee genera una clave pública para el sitio. Tiene este aspecto: pk_xxx…. La clave no es un secreto: está en el código fuente de tu página y se envía con cada evento. Lo que protege tus datos es la lista de allowed origins, que se explica justo a continuación.

Más adelante puedes encontrar la clave, el snippet de instalación y todos los ajustes del sitio en Settings → Projects: haz clic en tu sitio para desplegarlo.

2. Define los allowed origins

Sigue en Settings → Projects, despliega tu sitio y busca Allowed origins. Introduce un origen por línea, por ejemplo:

https://example.com
https://www.example.com

Después haz clic en Save origins.

• Si dejas la lista vacía, se aceptan eventos desde cualquier sitio web.
• Si la rellenas, Klickbee solo acepta eventos enviados desde esos orígenes exactos. Los eventos de cualquier otro lugar se rechazan.

La coincidencia es estricta: el esquema, el host y el puerto deben coincidir los tres. No hay comodines ni coincidencia de subdominios, así que example.com y www.example.com son dos orígenes distintos, y también lo son http y https. Incluye todas las variantes que sirven tu sitio. Klickbee convierte a minúsculas lo que introduces y elimina cualquier ruta o barra final, de modo que https://Example.com/ se guarda como https://example.com.

3. Añade el tracker a tu sitio

En Settings → Projects, en el panel Install snippet de tu sitio, dos pestañas te dan el código exacto con tu clave ya rellenada.

Opción A: etiqueta script

La pestaña Script tag sirve para cualquier sitio que te permita editar el head del HTML: WordPress, Webflow, Shopify, una página estática. No hace falta ningún paso de compilación.

Pega esto en el <head> de tu sitio, sustituyendo la clave por la tuya:

<script src="https://tracking.klickbee.com/t.js" data-key="pk_xxx" defer></script>

En WordPress, añádelo mediante el encabezado de tu tema o un plugin de tipo «insert headers and footers».

El script envía una página vista cuando se carga la página y sigue por sí solo la navegación en las aplicaciones de página única (consulta Rastrear eventos). Incluirlo dos veces por error es inofensivo.

Puedes ajustarlo con estos atributos:

Por ejemplo, para mantener la grabación desactivada:

<script
  src="https://tracking.klickbee.com/t.js"
  data-key="pk_xxx"
  data-replay="false"
  defer
></script>

La etiqueta script no puede pedir consentimiento antes de empezar a hacer seguimiento. Si tu sitio necesita un paso de consentimiento, lee Privacidad y consentimiento antes de elegir esta opción.

Opción B: paquete npm

La pestaña React / Next.js es para sitios creados con un framework de JavaScript. El paquete es @klickbee-agency/tracking, publicado en abierto en npm:

pnpm add @klickbee-agency/tracking
# or: npm install @klickbee-agency/tracking

Crea un pequeño componente de cliente que envuelva tu aplicación (se muestra Next.js App Router):

"use client";
import { TrackingProvider } from "@klickbee-agency/tracking/react";
import { usePathname } from "next/navigation";

export function Tracking({ children }: { children: React.ReactNode }) {
  return (
    <TrackingProvider
      pathname={usePathname()}
      config={{
        projectKey: "pk_xxx",
        apiHost: "https://tracking.klickbee.com",
        autocapture: true, // clicks → heatmaps & funnels
        replay: true, // session recordings
      }}
    >
      {children}
    </TrackingProvider>
  );
}

Después envuelve tu aplicación con él en app/layout.tsx:

<body>
  <Tracking>{children}</Tracking>
</body>

El provider envía una página vista en la primera carga y de nuevo cada vez que cambia pathname. No depende de Next.js: pásale la ruta actual desde el router que uses.

Si no usas React, crea el cliente tú mismo y envía una página vista en cada cambio de ruta:

import { createClient } from "@klickbee-agency/tracking";

const tracking = createClient({
  projectKey: "pk_xxx",
  apiHost: "https://tracking.klickbee.com",
});

tracking.pageview(); // call this on every route change

El cliente no hace nada durante el renderizado en el servidor, por lo que es seguro importarlo en código que también se ejecuta en el servidor.

Opciones

4. Comprueba que funciona

De vuelta en Settings → Projects, el panel Install snippet muestra una tarjeta con el estado de la instalación. Visita tu sitio en una ventana normal del navegador y mira después la tarjeta:

• Waiting for data: todavía no ha llegado nada. Dice «Visit your site to verify the snippet is live.»
• Installed: se ha recibido al menos un evento. «Last data 2m ago» te indica cuánto hace del último. Un punto verde parpadeante significa que el último evento tiene menos de 5 minutos.

La tarjeta se actualiza cada pocos segundos, y Check again fuerza la actualización. «Installed» significa que ha llegado algún dato al menos una vez, en cualquier momento. Para saber si el sitio está enviando datos ahora, mira la línea «Last data».

El botón Test pixel abre una pequeña ventana que carga el script con tu clave y te dice una de estas tres cosas:

• Pixel loaded and initialized: el script se ejecuta y ha enviado una página vista de prueba.
• Script loaded but the tracker did not initialize: revisa el valor de data-key.
• Could not load the pixel: comprueba que tracking.klickbee.com es accesible desde tu red y si hay un bloqueador de anuncios de por medio.

Si tu navegador bloquea la ventana, permite las ventanas emergentes para el panel y vuelve a intentarlo.

También puedes abrir la página Overview: hasta que llegue el primer evento muestra «No data yet» con un botón Install the SDK que te trae de vuelta aquí.

Los visitantes que parecen bots (navegadores automatizados, rastreadores, herramientas de línea de comandos) se ignoran a propósito, así que haz la prueba en un navegador normal, no con un script. Si no aparece nada, repasa Solución de problemas.

Rotar la clave, renombrar o eliminar un sitio

Las tres acciones están en Settings → Projects, en tu sitio desplegado:

• Rename cambia solo el nombre que se muestra.
• Rotate key genera una nueva clave pública. La anterior deja de funcionar inmediatamente, así que actualiza de inmediato todas las páginas que la usen.
• Delete elimina de forma permanente el sitio y todos sus datos de seguimiento. Solo el propietario del sitio puede eliminarlo, y no se puede deshacer.

Mantén el tracker actualizado

• Etiqueta script: no tienes que hacer nada. El script se actualiza solo, y una nueva versión llega a tus visitantes en unos diez minutos desde su lanzamiento.
• Paquete npm: ejecuta npm i @klickbee-agency/tracking@latest y vuelve a desplegar tu sitio.

Cuando la última sesión de tu sitio informa de una versión anterior a la publicada actualmente, el panel muestra un banner que lo indica. Si usas la etiqueta script, puedes ignorarlo.

Relacionado

• Privacidad y consentimiento: qué se recopila y cómo esperar al consentimiento.
• Rastrear eventos: páginas vistas, eventos personalizados, identify.
• Solución de problemas: cuando no aparecen datos.