Installer le tracker

Pour commencer à collecter des données, il vous faut trois choses : un site dans Klickbee Tracking (appelé project dans le dashboard), sa clé publique, et le tracker ajouté à vos pages. Cela prend quelques minutes.

1. Créer votre site

1. Rendez-vous sur tracking.klickbee.com et cliquez sur Start free (ou sur Create one depuis la page de connexion). Renseignez votre Name, votre Email et votre Password (8 caractères minimum), puis cliquez sur Create account.
2. Ouvrez l'e-mail de vérification (« Verify your email · Klickbee ») et cliquez sur Verify email. Vous ne pouvez pas vous connecter tant que votre adresse e-mail n'est pas vérifiée. Si l'e-mail n'arrive pas, utilisez Resend email sur l'écran d'inscription, ou Resend verification email sur l'écran de connexion.
3. Sur l'écran Create your first site, saisissez un Project name (par exemple « Mon site web ») et cliquez sur Create project.

Klickbee génère une clé publique pour le site. Elle ressemble à pk_xxx…. Cette clé n'est pas secrète : elle figure dans le code source de votre page et est envoyée avec chaque événement. Ce qui protège vos données, c'est la liste des origines autorisées, décrite juste après.

Vous retrouverez à tout moment la clé, le snippet d'installation et tous les réglages du site dans Settings → Projects : cliquez sur votre site pour le déplier.

2. Définir les origines autorisées

Toujours dans Settings → Projects, dépliez votre site et repérez Allowed origins. Saisissez une origine par ligne, par exemple :

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

Puis cliquez sur Save origins.

• Si vous laissez la liste vide, les événements sont acceptés depuis n'importe quel site web.
• Si vous la remplissez, Klickbee n'accepte que les événements envoyés depuis ces origines exactes. Les événements provenant de n'importe où ailleurs sont refusés.

La correspondance est stricte : le schéma, l'hôte et le port doivent tous correspondre. Il n'y a ni joker ni correspondance de sous-domaines : example.com et www.example.com sont donc deux origines différentes, tout comme http et https. Listez toutes les variantes qui servent votre site. Klickbee passe ce que vous saisissez en minuscules et supprime tout chemin ou slash final : https://Example.com/ est donc enregistré sous la forme https://example.com.

3. Ajouter le tracker à votre site

Dans Settings → Projects, le panneau Install snippet de votre site propose deux onglets qui vous donnent le code exact, avec votre clé déjà renseignée.

Option A : balise script

L'onglet Script tag fonctionne sur tout site dont vous pouvez modifier le head HTML : WordPress, Webflow, Shopify, une page statique. Aucune étape de build n'est nécessaire.

Collez ceci dans le <head> de votre site, en remplaçant la clé par la vôtre :

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

Sur WordPress, ajoutez-la via l'en-tête de votre thème ou via une extension de type « insérer des en-têtes et pieds de page ».

Le script envoie un pageview au chargement de la page et suit seul la navigation dans les applications monopages (voir Suivre des événements). L'inclure deux fois par erreur est sans conséquence.

Vous pouvez le paramétrer avec ces attributs :

Par exemple, pour garder le replay désactivé :

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

La balise script ne peut pas demander le consentement avant de commencer à tracker. Si votre site exige une étape de consentement, lisez Confidentialité et consentement avant de choisir cette option.

Option B : package npm

L'onglet React / Next.js s'adresse aux sites construits avec un framework JavaScript. Le package s'appelle @klickbee-agency/tracking et il est publié publiquement sur npm :

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

Créez un petit composant client qui enveloppe votre application (App Router de Next.js en exemple) :

"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>
  );
}

Enveloppez ensuite votre application avec ce composant dans app/layout.tsx :

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

Le provider envoie un pageview au premier chargement, puis à chaque changement de pathname. Il ne dépend pas de Next.js : passez-lui le chemin courant fourni par le routeur que vous utilisez.

Si vous n'utilisez pas React, créez vous-même le client et envoyez un pageview à chaque changement de route :

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

Le client ne fait rien lors du rendu côté serveur : il peut donc être importé sans risque dans du code qui s'exécute aussi côté serveur.

Options

4. Vérifier que ça fonctionne

Toujours dans Settings → Projects, le panneau Install snippet affiche une carte d'état de l'installation. Visitez votre site dans une fenêtre de navigation normale, puis regardez cette carte :

• Waiting for data : rien n'est encore arrivé. Elle indique « Visit your site to verify the snippet is live. »
• Installed : au moins un événement a été reçu. « Last data 2m ago » vous indique l'ancienneté du dernier. Un point vert qui pulse signifie que le dernier événement date de moins de 5 minutes.

La carte se rafraîchit toutes les quelques secondes, et Check again force l'actualisation. « Installed » signifie que des données sont arrivées au moins une fois, un jour. Pour savoir si le site envoie des données en ce moment, lisez la ligne « Last data ».

Le bouton Test pixel ouvre une petite fenêtre qui charge le script avec votre clé et vous renvoie l'un de ces trois messages :

• Pixel loaded and initialized : le script s'exécute et a envoyé un pageview de test.
• Script loaded but the tracker did not initialize : vérifiez la valeur de data-key.
• Could not load the pixel : vérifiez que tracking.klickbee.com est accessible depuis votre réseau, et si un bloqueur de publicité ne s'interpose pas.

Si votre navigateur bloque la fenêtre, autorisez les pop-ups pour le dashboard et réessayez.

Vous pouvez aussi ouvrir la page Overview : tant que le premier événement n'est pas arrivé, elle affiche « No data yet » avec un bouton Install the SDK qui vous ramène ici.

Les visiteurs qui ressemblent à des bots (navigateurs automatisés, crawlers, outils en ligne de commande) sont volontairement ignorés : testez donc depuis un navigateur ordinaire, pas depuis un script. Si rien n'apparaît, parcourez le Dépannage.

Renouveler la clé, renommer ou supprimer un site

Ces trois actions se trouvent dans Settings → Projects, sur votre site déplié :

• Rename ne change que le nom affiché.
• Rotate key génère une nouvelle clé publique. L'ancienne cesse de fonctionner immédiatement : mettez donc à jour sans attendre toutes les pages qui l'utilisent.
• Delete supprime définitivement le site et toutes ses données de tracking. Seul le propriétaire du site peut le supprimer, et cette action est irréversible.

Garder le tracker à jour

• Balise script : rien à faire. Le script se met à jour tout seul, et une nouvelle version atteint vos visiteurs environ dix minutes après sa publication.
• Package npm : exécutez npm i @klickbee-agency/tracking@latest et redéployez votre site.

Lorsque la dernière session de votre site signale une version plus ancienne que la version actuelle, le dashboard affiche une bannière pour vous le dire. Si vous utilisez la balise script, vous pouvez l'ignorer.

Pour aller plus loin

• Confidentialité et consentement : ce qui est collecté et comment attendre le consentement.
• Suivre des événements : pageviews, événements personnalisés, identify.
• Dépannage : quand aucune donnée n'apparaît.