Spårlös
SVEN
Prova gratis

Dokumentation

Allt du behöver veta

Två minuter till första händelsen. Resten av sidan handlar om saker du gör efter att produkten redan funkar.

Installera

Funktioner

Data-export

Integritet

Felsökning

Migrationsguider

Installera på WordPress

För WordPress-sajter rekommenderar vi vårt plugin. Det ansluter sajten till ditt Spårlös-konto med ett klick, injicerar snutten automatiskt på alla publika sidor, och hanterar 404-detektion och proxy-läge (för att undvika annonsblockerare).

  1. Sök efter Spårlös under WordPress → Plugins → Lägg till nytt och klicka Installera (eller ladda ner ZIP-filen direkt).
  2. Aktivera pluginet.
  3. Gå till Inställningar → Spårlös och klicka Anslut till Spårlös.
  4. Bekräfta i den nya fliken. Klart.
Öppna på WordPress.orgGå till WordPress-sidan Ladda ner ZIP

Installera på en vanlig sajt (kodsnutt)

Grundsnutten är en rad. Den klistras in i webbplatsens <head> och alla sidvisningar börjar räknas direkt. Hittar du inte hur du redigerar <head> i ditt ramverk har vi konkreta exempel under detta avsnitt.

Klistra in i din webbplats <head>
<script defer
  data-site="DIN_SITE_ID"
  src="https://sparlos.se/script.js">
</script>

Använd alltid defer. Skriptet är under 1,5 KB gzippat och blockerar aldrig sidladdning. Ladda en sida en gång efter installation, så syns första händelsen i dashboarden inom 30 sekunder.

DIN_SITE_ID hittar du i dashboarden när du har skapat en sajt: Skapa sajt.

Per ramverk: vart koden ska

Exakt fil och var den koden ska klistras in i populära ramverk. Byt ut DIN_SITE_ID mot site-ID från dashboarden.

Next.jsNext.js (Pages)React / ViteVueNuxt 3SvelteKitAstroHTML / Hugo / JekyllGoogle Tag Manager

Next.js (App Router)

Lägg <script> direkt i rotens layout.tsx så täcker den varenda sida. För dev-miljö är trackern självfiltrerande (bailar på localhost).

Klistra in i din webbplats <head>
// src/app/layout.tsx (Next.js App Router)
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="sv">
      <head>
        <script
          defer
          data-site="DIN_SITE_ID"
          src="https://sparlos.se/script.js"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

Next.js (Pages Router)

Använd det centrala _document.tsx för att lägga skriptet i <Head>. Då laddas det på varje sida utan klient-overhead.

Klistra in i din webbplats <head>
// pages/_document.tsx (Next.js Pages Router)
import { Html, Head, Main, NextScript } from 'next/document';

export default function Document() {
  return (
    <Html lang="sv">
      <Head>
        <script
          defer
          data-site="DIN_SITE_ID"
          src="https://sparlos.se/script.js"
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

React (Vite / Create React App / valfri React-mall)

Redigera index.html i projektets rot. Skriptet får finnas i <head> innan Reacts main.tsx. Spårlös-skriptet hookar in ihistory.pushState så React Router-navigeringar fångas automatiskt.

Klistra in i din webbplats <head>
<!-- index.html (Vite / Create React App / valfri React-mall) -->
<!doctype html>
<html lang="sv">
  <head>
    <meta charset="UTF-8" />
    <title>Min sajt</title>
    <script
      defer
      data-site="DIN_SITE_ID"
      src="https://sparlos.se/script.js"
    ></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

Vue 3 (Vite)

Samma som React: redigera index.html i projektets rot. Vue Router använder history.pushState vilket trackern hookar automatiskt.

Klistra in i din webbplats <head>
<!-- index.html (Vue 3 + Vite eller annan Vue-mall) -->
<!doctype html>
<html lang="sv">
  <head>
    <meta charset="UTF-8" />
    <title>Min sajt</title>
    <script
      defer
      data-site="DIN_SITE_ID"
      src="https://sparlos.se/script.js"
    ></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

Nuxt 3

Lägg skriptet i nuxt.config.ts under app.head.script. Då injiceras det på alla sidor utan att du behöver röra layout-komponenter.

Klistra in i din webbplats <head>
// nuxt.config.ts (Nuxt 3)
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          defer: true,
          'data-site': 'DIN_SITE_ID',
          src: 'https://sparlos.se/script.js',
        },
      ],
    },
  },
});

SvelteKit

Lägg skriptet i src/app.html — SvelteKits rot-template som omsluter alla rutter.

Klistra in i din webbplats <head>
<!-- src/app.html (SvelteKit) -->
<!doctype html>
<html lang="sv">
  <head>
    %sveltekit.head%
    <script
      defer
      data-site="DIN_SITE_ID"
      src="https://sparlos.se/script.js"
    ></script>
  </head>
  <body>
    <div>%sveltekit.body%</div>
  </body>
</html>

Astro

Lägg i din delade BaseLayout.astro (eller src/layouts/Layout.astro beroende på mall).is:inline säkerställer att Astro inte processar skriptet med Vite.

Klistra in i din webbplats <head>
---
// src/layouts/BaseLayout.astro
---
<!doctype html>
<html lang="sv">
  <head>
    <meta charset="UTF-8" />
    <title>{Astro.props.title}</title>
    <script
      is:inline
      defer
      data-site="DIN_SITE_ID"
      src="https://sparlos.se/script.js"
    ></script>
  </head>
  <body><slot /></body>
</html>

Statisk HTML / Hugo / Eleventy / Jekyll / 11ty

Klistra in skriptet i din mall (vanligtvis layouts/_default/baseof.html i Hugo, _includes/head.html i Jekyll/Eleventy). Eller bara i din index.html om sajten är handrullad.

Klistra in i din webbplats <head>
<!-- index.html (statisk HTML, Hugo, Eleventy, Jekyll) -->
<!doctype html>
<html lang="sv">
  <head>
    <meta charset="UTF-8" />
    <title>Min sajt</title>
    <script
      defer
      data-site="DIN_SITE_ID"
      src="https://sparlos.se/script.js"
    ></script>
  </head>
  <body>...</body>
</html>

Google Tag Manager

Skapa en ny Custom HTML-tagg. Klistra in grundsnutten ovan. Trigger: All Pages. Publicera. Spårlös-skriptet laddas på sidan via GTM och hookar in pushState lika bra som vid direkt-inkludering, men du tappar 30-40 ms jämfört med att inkludera direkt i <head>.

Andra plattformar

Snutten ovan funkar på alla plattformar som låter dig redigera <head>. Här är de exakta menyvägarna för de vanligaste:

Shopify
Admin → Sales channels → Online Store → Themes → Edit code → theme.liquid (under )
Webflow
Site settings → Custom code → Head code
Squarespace
Settings → Advanced → Code Injection → Header
Wix
Settings → Custom code → Add custom code → Head
Ghost
Settings → Code injection → Site Header
Framer
Site settings → General → Custom code → Start of

Så installerar de stora aktörerna

Alla privacy-analytics-tjänster använder samma mönster: en liten JS-snutt i <head> som postar till en ingest-endpoint. Skillnaden ligger i vad snutten gör och hur mycket data den skickar.

VerktygSnutt-storlek (gzip)CookiesWP-plugin
Spårlös< 1,5 KBIngaJa, ett-kliks-anslutning
Plausible~1,3 KBIngaJa
Fathom~2 KBIngaJa
Umami~2,5 KBIngaCommunity
Google Analytics 4~50 KBFlera (kräver consent)Ja (Site Kit)
Matomo~22 KBKonfigurerbartJa

Källor: respektive verktygs officiella docs och npm-paket. Mätt över förstaparts CDN, ej proxyad. GA4-talet är gtag.js + tag manager-overhead vid normal konfiguration.

Spåra 404-fel

Tracker-snutten auto-detekterar 404-sidor via sidtitel och URL-mönster (engelska + svenska). Det räcker för ~80 % av alla teman. För resten: lägg till en meta-tagg på din 404-sida för att markera sidvisningen som ett 404-event explicit.

Klistra in i din webbplats <head>
<meta name="sparlos-event" content="404" />

WordPress-pluginet emit'ar den här taggen automatiskt på alla 404-sidor. Du behöver inte göra något.

Resultat: i dashboarden får du en separat Top 404 URLs-rapport som visar vilka brutna länkar som driver mest trafik. Perfekt för att hitta 301-redirects att lägga till.

SPA-navigering

Spårlös upptäcker automatiskt navigeringar via history.pushState, history.replaceState och hashchange. Detta täcker React Router, Next.js App Router, SvelteKit, Vue Router och alla andra moderna SPA-ramverk — inklusive äldre HashRouter-baserade appar (/#/cart). Du behöver inte göra något extra.

Manuell pageview-hook

Vissa SPA-mönster ändrar inte URL:en mellan vyer — typexempel: kundvagn som slide-out-drawer, login som modal, fliknavigering med React state. Eftersom URL:en inte ändras vet trackern inte att det skett ett "sidbyte".

För dessa fall exponerar trackern window.sparlos.pageview(). Anropa den manuellt när din virtuella vy öppnas:

Klistra in i din webbplats <head>
// Exempel: kundvagn slide-out
function openCart() {
  setCartOpen(true);
  window.sparlos?.pageview();
}

// Exempel: login-modal
function openLoginModal() {
  setLoginOpen(true);
  // ändra URL också så efterföljande dedupliceringar funkar
  window.history.pushState({}, '', '/login');
  // pushState-hooken fångar det automatiskt; ingen extra anrop behövs.
}

Spårlös-skriptet deduplicerar identiska URL:er i följd, så det är säkert att anropa sparlos.pageview() även om du är osäker på om URL:en redan ändrats.

DNT och GPC respekteras

Vår tracker respekterar Do Not Track-headern (DNT) och Global Privacy Control (GPC) som standard. Besökare med dessa flaggor aktiverade räknas aldrig in i din statistik. Du behöver inte ändra någonting.

Uteslut sidor från spårning

Per webbplats-inställning kan du blocka URL-mönster från att spåras. Vanliga exempel: /admin/*, /preview/*, /api/*. Sidvisningar som matchar blocklistan skickas till vårt ingest-API men släpps innan de lagras.

Konfigurera under Dashboard → Site → Inställningar → Blocklist.

Hämta dina data (GDPR Art. 15)

Du äger dina data och har rätt att få en kopia när som helst (GDPR artikel 15, rätt till tillgång, och artikel 20, dataportabilitet). En självservice-export via API är under utveckling och låses upp så snart per-användar-scoping är klar.

Under tiden: gå till Profil och klicka Begär mina data. Vi sammanställer dina sidvisningar, webbplatsinställningar och kontodata, och mejlar tillbaka på din registrerade adress inom 30 dagar (statutorisk svarstid). Helt gratis, alla planer.

Gå till Profil

Sluta skicka data till USA. Börja idag.

Få samma insikter som från Google Analytics. Utan banner, utan cookies, utan juridisk huvudvärk.

Kom igång gratis Se priser
Installera Spårlös: WordPress, Next.js, Shopify och mer | Spårlös