Documentation

Quick Start

Get up and running in less than 2 minutes.

1. Add the Script

Add this snippet to your HTML before the closing </body> tag:

<script 
  src="https://your-klar-instance.com/klar.js" 
  data-site-id="your-site-id"
  defer
></script>

2. That's It!

Klar will automatically start tracking pageviews. No configuration needed.

What Gets Tracked?

By default, Klar tracks:

• Pageviews — Every page visit
• Referrers — Where your visitors come from
• UTM Parameters — Campaign tracking (utm_source, utm_medium, utm_campaign)
• Device Type — Mobile, tablet, or desktop (based on screen width)
• Browser & OS — Basic user agent info

What Doesn't Get Tracked?

Klar is privacy-first. We never track:

• Personal identifiable information (PII)
• Cookies or local storage
• Fingerprinting data
• IP addresses (can be optionally anonymized)
• Cross-site tracking

SPA Support

Klar automatically detects client-side navigation in single-page applications:

// Works automatically with:
- React Router
- Vue Router
- Svelte Kit
- Next.js
- Any framework using pushState/replaceState

No manual tracking needed! Learn more in the SPA guide.

Custom Events

Track specific user interactions:

// Track a button click
klar.track('button_click', { button: 'signup' });

// Track a form submission
klar.track('form_submit', { form: 'contact' });

// Track any custom event
klar.track('video_play', { video_id: '123', duration: 45 });

Learn more in the Custom Events guide.

Configuration Options

Customize Klar's behavior with data attributes:

<script 
  src="https://your-klar-instance.com/klar.js" 
  data-site-id="your-site-id"
  data-auto-track="true"
  data-honor-dnt="true"
  defer
></script>

• data-site-id — Your site ID (required)
• data-auto-track — Auto-track pageviews (default: true)
• data-honor-dnt — Respect Do Not Track (default: false)

Next Steps