Docs

Quickstart

This path takes about two minutes and needs nothing but access to your site's <head>. The first-party proxy, consent wiring and custom events are optional next steps.

1. Sign up and create a project

  1. Open the dashboard and sign up (or accept an invitation).
  2. The onboarding asks for your organization (prefilled from your e-mail domain) and your site URL. X3 creates a project for it: name, slug, own domains and time zone come from the URL and your browser – you can change them later under Settings → General.
  3. The project gets a publishable key (pk_3x_…). It is public by design: it only allows sending events from the origins listed in the project's tracking config.
  4. The guided onboarding continues with Tracking einbauen: the code below is shown there with your key, plus tabs per stack, a "Mit Claude Code einrichten" prompt and a live panel that turns green with the first pageview. Goals, ad platforms, conversions, Claude and your team follow as optional steps; re-open it any time under Settings → Setup-Status.

Prefer the terminal? The same steps work through the API (Authentication and keys) or through Claude (Claude Code).

2. Paste the snippet

Put this into the <head> of every page (replace the key and the API origin with the values the onboarding shows you):

<script>window.x3=window.x3||function(){(window.x3q=window.x3q||[]).push(arguments)}</script>
<script async src="https://api.x3.example/v1/s/x3.full.js?k=pk_3x_YOUR_PUBLISHABLE_KEY" data-key="pk_3x_YOUR_PUBLISHABLE_KEY"></script>
  • The first line is a tiny queue: calls such as x3("track", "signup") made before the script has loaded are kept and replayed.
  • ?k= inlines the project's client configuration into the script, so the tracker starts without a second request.
  • x3.full.js contains every plugin (video, sections, forms, identify, consent adapters, booking adapters). Use x3.js for the smaller core; plugins then load on demand.

Using a framework? The framework recipes show the idiomatic place for the snippet – for Next.js it is one component in app/layout.tsx.

3. Verify

Open your site in a normal browser window (not a headless browser – automated browsers are ignored on purpose), scroll a bit and click something. The onboarding page waits for the first pageview and shows it live; afterwards Open dashboard takes you to the overview.

Nothing arrives? Check, in this order:

  1. The browser's network tab shows POST …/v1/e with status 204. A 403 means the page's origin is not in the project's allowed origins (Settings → Tracking → Domains and origins); http://localhost needs Allow localhost switched on.
  2. The page is not opened with the opt-out parameter (?x3_notrack=1 stores an opt-out in this browser; ?x3_notrack=0 removes it).
  3. An ad blocker may block the API host. That is what the first-party proxy is for.

More in Troubleshooting.

What is measured now

Without any further code: pageviews (including single-page-app navigation), sessions, channels and campaigns, referrers, scroll depth and the fold, engaged time, clicks (links, buttons, CTAs, WhatsApp, phone, e-mail, downloads, outbound), sections, <video> retention and form starts, submits and abandons. Test traffic is marked with ?x3_test=1 and excluded from reports by default.

Next steps

GoalGuide
Survive ad blockers, keep visitor separation behind CDNsFirst-party proxy
Respect a cookie banner or CMPConsent
Track sign-ups, quiz steps, calculatorsCustom events and presets
Measure conversionsGoals and funnels
See what your ads cost per relevant visitAd costs
Send leads to Meta, LinkedIn, Google, TikTokServer-side conversions
Let Claude analyse your dataMCP server