Install the tracker

To start collecting data you need three things: a site in Klickbee Tracking (called a project in the dashboard), its public key, and the tracker added to your pages. This takes a few minutes.

1. Create your site

1. Go to tracking.klickbee.com and click Start free (or Create one on the sign-in page). Enter your Name, Email and Password (8 characters minimum), then click Create account.
2. Open the verification email ("Verify your email · Klickbee") and click Verify email. You can't sign in before your email is verified. If the email doesn't arrive, use Resend email on the sign-up screen, or Resend verification email on the sign-in screen.
3. On the Create your first site screen, type a Project name (for example "My website") and click Create project.

Klickbee generates a public key for the site. It looks like pk_xxx…. The key is not a secret: it sits in your page source and is sent with every event. What protects your data is the allowed-origins list, covered just below.

You can find the key, the install snippet and every site setting later under Settings → Projects: click your site to expand it.

2. Set the allowed origins

Still under Settings → Projects, expand your site and find Allowed origins. Enter one origin per line, for example:

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

Then click Save origins.

• Leave the list empty and events are accepted from any website.
• Fill it in and Klickbee only accepts events sent from those exact origins. Events from anywhere else are refused.

Matching is strict: scheme, host and port must all match. There is no wildcard and no subdomain matching, so example.com and www.example.com are two different origins, and so are http and https. List every variant that serves your site. Klickbee lower-cases what you enter and drops any path or trailing slash, so https://Example.com/ is saved as https://example.com.

3. Add the tracker to your site

Under Settings → Projects, in your site's Install snippet panel, two tabs give you the exact code with your key already filled in.

Option A: script tag

The Script tag tab works on any site that lets you edit the HTML head: WordPress, Webflow, Shopify, a static page. No build step is needed.

Paste this into your site's <head>, replacing the key with yours:

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

On WordPress, add it through your theme's header or an "insert headers and footers" plugin.

The script sends a pageview when the page loads and follows navigation in single-page apps on its own (see Track events). Including it twice by mistake is harmless.

You can tune it with these attributes:

For example, to keep replay off:

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

The script tag can't ask for consent before it starts tracking. If your site needs a consent step, read Privacy & consent before choosing this option.

Option B: npm package

The React / Next.js tab is for sites built with a JavaScript framework. The package is @klickbee-agency/tracking, published publicly on npm:

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

Create a small client component that wraps your app (Next.js App Router shown):

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

Then wrap your app with it in app/layout.tsx:

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

The provider sends a pageview on first load and again every time pathname changes. It doesn't depend on Next.js: pass it the current path from whatever router you use.

If you don't use React, create the client yourself and send a pageview on each route change:

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

The client does nothing during server-side rendering, so it is safe to import in code that also runs on the server.

Options

4. Check that it works

Back under Settings → Projects, the Install snippet panel shows an install status card. Visit your site in a normal browser window, then look at it:

• Waiting for data: nothing has arrived yet. It reads "Visit your site to verify the snippet is live."
• Installed: at least one event has been received. "Last data 2m ago" tells you how recent the latest one is. A green pulsing dot means the last event is less than 5 minutes old.

The card refreshes every few seconds, and Check again forces a refresh. "Installed" means data has arrived at least once, ever. To know whether the site is sending now, read the "Last data" line.

The Test pixel button opens a small window that loads the script with your key and tells you one of three things:

• Pixel loaded and initialized: the script runs and sent a test pageview.
• Script loaded but the tracker did not initialize: check the data-key value.
• Could not load the pixel: check that tracking.klickbee.com is reachable from your network, and whether an ad blocker is in the way.

If your browser blocks the window, allow pop-ups for the dashboard and try again.

You can also open the Overview page: until the first event arrives it shows "No data yet" with an Install the SDK button that brings you back here.

Visitors that look like bots (automated browsers, crawlers, command-line tools) are ignored on purpose, so test in a regular browser, not a script. If nothing shows up, go through Troubleshooting.

Rotate the key, rename or delete a site

All three are under Settings → Projects, on your expanded site:

• Rename changes the display name only.
• Rotate key generates a new public key. The old one stops working immediately, so update every page that uses it right away.
• Delete permanently removes the site and all of its tracking data. Only the site's owner can delete it, and it can't be undone.

Keep the tracker up to date

• Script tag: nothing to do. The script updates itself, and a new version reaches your visitors within about ten minutes of its release.
• npm package: run npm i @klickbee-agency/tracking@latest and redeploy your site.

When the latest session on your site reports an older version than the current release, the dashboard shows a banner saying so. If you use the script tag, you can ignore it.

Related

• Privacy & consent: what is collected and how to wait for consent.
• Track events: pageviews, custom events, identify.
• Troubleshooting: when no data shows up.