Integration Guide

Detailed setup instructions for different frameworks and platforms.

Static HTML

The simplest setup — just add the script tag before </body>:

<!DOCTYPE html>
<html>
<head>
  <title>My Site</title>
</head>
<body>
  <h1>Hello World</h1>
  
  <script 
    src="https://your-klar-instance.com/klar.js" 
    data-site-id="your-site-id"
    defer
  ></script>
</body>
</html>

React / Next.js

Next.js (App Router)

Add to your root layout.tsx:

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <script 
          src="https://your-klar-instance.com/klar.js" 
          data-site-id="your-site-id"
          defer
        />
      </body>
    </html>
  )
}

React (Vite / CRA)

Add to index.html or use a component:

import { useEffect } from 'react';

function Analytics() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://your-klar-instance.com/klar.js';
    script.setAttribute('data-site-id', 'your-site-id');
    script.defer = true;
    document.body.appendChild(script);
  }, []);
  
  return null;
}

export default Analytics;

Vue / Nuxt

Nuxt 3

Use the useHead composable:

// app.vue or layouts/default.vue
<script setup>
useHead({
  script: [
    {
      src: 'https://your-klar-instance.com/klar.js',
      'data-site-id': 'your-site-id',
      defer: true
    }
  ]
})
</script>

Vue 3

Add to index.html or create a plugin:

// plugins/klar.ts
export default {
  install: (app: any) => {
    const script = document.createElement('script');
    script.src = 'https://your-klar-instance.com/klar.js';
    script.setAttribute('data-site-id', 'your-site-id');
    script.defer = true;
    document.body.appendChild(script);
  }
};

Svelte / SvelteKit

SvelteKit

Add to src/app.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
    <meta name="viewport" content="width=device-width" />
    %sveltekit.head%
  </head>
  <body data-sveltekit-preload-data="hover">
    <div style="display: contents">%sveltekit.body%</div>
    <script 
      src="https://your-klar-instance.com/klar.js" 
      data-site-id="your-site-id"
      defer
    ></script>
  </body>
</html>

WordPress

Add to your theme's footer.php before <?php wp_footer(); ?>:

<script 
  src="https://your-klar-instance.com/klar.js" 
  data-site-id="your-site-id"
  defer
></script>
<?php wp_footer(); ?>

Or use a plugin like "Insert Headers and Footers" to add the script.

Ghost

Go to Settings → Code injection and paste in the Site Footer field:

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

Webflow

In your project settings, go to Custom Code → Footer Code and add:

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

Verifying Installation

After installing, verify Klar is working:

  1. Visit your website
  2. Open browser DevTools (F12)
  3. Check the Network tab for a request to klar.js
  4. Look for a POST request to /api/collect
  5. Check your Klar dashboard for the pageview

Troubleshooting

Script not loading

  • Check the script URL is correct
  • Verify your Klar instance is running
  • Check for Content Security Policy (CSP) blocking the script

Pageviews not appearing

  • Verify data-site-id matches your site ID in Klar
  • Check browser console for errors
  • Ensure ad-blockers aren't blocking requests
  • Check if Do Not Track is enabled (if data-honor-dnt="true")

SPA navigation not tracked

  • Klar automatically tracks pushState and replaceState
  • If using a custom router, manually call klar.trackPageview()

Need Help?

Check out these resources: