Guía de integración

Instrucciones de configuración detalladas para distintos frameworks y plataformas.

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://klar.alphabros.eu/klar.v2.js" 
    data-site-id="your-site-id"
    data-key="your-api-key"
    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://klar.alphabros.eu/klar.v2.js" 
          data-site-id="your-site-id"
          data-key="your-api-key"
          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://klar.alphabros.eu/klar.v2.js';
    script.setAttribute('data-site-id', 'your-site-id');
    script.setAttribute('data-key', 'your-api-key');
    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://klar.alphabros.eu/klar.v2.js',
      'data-site-id': 'your-site-id',
      'data-key': 'your-api-key',
      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://klar.alphabros.eu/klar.v2.js';
    script.setAttribute('data-site-id', 'your-site-id');
    script.setAttribute('data-key', 'your-api-key');
    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://klar.alphabros.eu/klar.v2.js" 
      data-site-id="your-site-id"
      data-key="your-api-key"
      defer
    ></script>
  </body>
</html>

Angular

Add the script tag to src/index.html, before </body>. The Angular router uses the History API, so route changes are tracked automatically — no service or router subscription needed:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <base href="/" />
  </head>
  <body>
    <app-root></app-root>
    <script 
      src="https://klar.alphabros.eu/klar.v2.js" 
      data-site-id="your-site-id"
      data-key="your-api-key"
      defer
    ></script>
  </body>
</html>

Custom events work from any component or service: window.klar?.track('signup'). If you use hash-based routing (withHashLocation()), call window.klar?.page(path) yourself on NavigationEnd: Klar detects navigations by pathname, which hash routes never change.

WordPress

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

<script 
  src="https://klar.alphabros.eu/klar.v2.js" 
  data-site-id="your-site-id"
  data-key="your-api-key"
  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://klar.alphabros.eu/klar.v2.js" 
  data-site-id="your-site-id"
  data-key="your-api-key"
  defer
></script>

Webflow

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

<script 
  src="https://klar.alphabros.eu/klar.v2.js" 
  data-site-id="your-site-id"
  data-key="your-api-key"
  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.v2.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
  • Check that your Klar instance is reachable: https://klar.alphabros.eu/klar.v2.js should open in your browser. On the hosted service there is nothing to run on your side; if you run your own instance, make sure it is up and that the script URL points to it
  • Check for Content Security Policy (CSP) blocking the script

Pageviews not appearing

  • Verify data-site-id matches your site ID in Klar
  • Verify data-key is your site's API key — copy the full snippet from your site's dashboard; a missing or wrong key gets a 403 from /api/collect
  • In DevTools, the POST /api/collect request must go to https://klar.alphabros.eu, not to your own site
  • Testing from localhost? Klar only accepts events from the domain (or aliases) registered for the site, so local pages get 403 Invalid referer — test on the real domain
  • Check browser console for errors
  • Ensure ad-blockers aren't blocking requests
  • Check if DNT/GPC honoring is enabled (data-honor-dnt="true") and the visitor's browser sends a signal — honoring is opt-in, off by default

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: