Tracking & Events Dokumentation

Allt du behöver för att installera ClearAnalytics på din webbplats och spåra sidvisningar, anpassade events, klickmål och e-handelstransaktioner.

Översikt

ClearAnalytics erbjuder två varianter av tracking-skript. Välj den som passar dina behov: ett minimalt skript för grundläggande sidvisningsanalys, eller ett fullständigt skript för anpassade events, klickmål och e-handelsspårning.

Light Script (ca.js)

Det lättaste möjliga tracking-skriptet. Perfekt för bloggar, landningssidor och webbplatser som bara behöver sidvisningsanalys.

ca.js < 1 KB

Automatisk sidvisningsspårning
Sessionslängd och avvisningsfrekvens
Fångst av UTM-kampanjparametrar
Stöd för single-page-applikationer

Full Script (ca-events.js)

Allt i light-skriptet, plus anpassade events, klickmålsspårning, GA4 dataLayer-avlyssning och fullt e-handelsstöd.

ca-events.js < 2 KB

Allt i light-skriptet
Anpassad event-spårning via window.ca()
Klickmålsspårning via data-ca-goal
GA4 dataLayer-integration
Fullständig e-handels event-spårning

Installation

Lägg till en enda script-tagg på din webbplats. Inga npm-paket, inga build-verktyg, inga konfigurationsfiler. Skriptet laddas asynkront och har noll påverkan på sidans prestanda.

HTML — Light Script

Lägg till detta i <head> eller i slutet av <body> på varje sida. Spårar automatiskt sidvisningar, sessionslängd och UTM-parametrar.

<script defer src="https://clearanalytics.eu/js/ca.js"></script>

HTML — Full Script

Använd denna variant om du behöver anpassade events, klickmål eller e-handelsspårning.

<script defer src="https://clearanalytics.eu/js/ca-events.js"></script>

HTML — Full Script med DataLayer

Lägg till attributet data-ca-datalayer för att automatiskt fånga GA4 dataLayer-events, inklusive alla e-handelsevents.

<script defer src="https://clearanalytics.eu/js/ca-events.js" data-ca-datalayer></script>

WordPress

Lägg till script-taggen via ditt temas functions.php-fil eller använd ett header/footer-injektionsplugin.

// functions.php
add_action('wp_head', function () {
    echo '<script defer src="https://clearanalytics.eu/js/ca-events.js"></script>';
});

React / Next.js

Använd Next.js Script-komponenten för optimal laddning. Skriptet fungerar med alla React-ramverk.

// app/layout.tsx  (Next.js App Router)
import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html>
      <head>
        <Script
          src="https://clearanalytics.eu/js/ca-events.js"
          strategy="afterInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

Vue / Nuxt

Lägg till skriptet via din Nuxt-konfiguration eller direkt i din HTML-mall för vanliga Vue-appar.

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://clearanalytics.eu/js/ca-events.js',
          defer: true,
        },
      ],
    },
  },
});

Google Tag Manager

Du kan även distribuera skriptet via Google Tag Manager med en Custom HTML-tagg.

Tag Type:   Custom HTML
Trigger:    All Pages

<script defer src="https://clearanalytics.eu/js/ca-events.js" data-ca-datalayer></script>

När du använder GTM med attributet data-ca-datalayer kommer ClearAnalytics automatiskt fånga alla dataLayer-events som skickas av dina befintliga GTM-taggar.

Anpassade Events

Spåra alla användarinteraktioner genom att skicka anpassade events med valfri metadata. Anpassade events visas i din instrumentpanel och kan användas som måltriggers.

Kräver det fullständiga skriptet (ca-events.js).

API Signature

window.ca(eventName, properties?);

Parameter	Typ	Beskrivning
`eventName`	string	Ett beskrivande namn för eventet (t.ex. 'signup', 'file_download').
`properties`	object	Valfritt objekt med ytterligare metadata. Serialiseras som JSON.

Exempel

// Spåra en registrering med planinfo

window.ca('signup', { plan: 'pro' });

// Spåra en filnedladdning

window.ca('file_download', {
  file_name: 'whitepaper.pdf',
  file_type: 'pdf',
});

// Spåra en videouppspelning

window.ca('video_play', {
  video_title: 'Product Demo',
  duration: 120,
});

// Spåra en intern sökning

window.ca('search', { query: 'privacy analytics' });

Klickmålsspårning

Spåra knapp- och länkklick utan att skriva JavaScript. Lägg till ett data-ca-goal attribut till valfritt HTML-element och klicket registreras automatiskt.

Kräver det fullständiga skriptet (ca-events.js).

Användning

Lägg till data-ca-goal="goal-name" till valfritt klickbart element. Attributvärdet blir målidentifieraren i din instrumentpanel.

<button data-ca-goal="cta-signup">Sign Up</button>

<a href="/pricing" data-ca-goal="pricing-click">View Pricing</a>

<form data-ca-goal="contact-form-submit">
  <!-- The goal fires when any element inside is clicked -->
  <button type="submit">Send</button>
</form>

Hur det fungerar

Skriptet använder event-delegering på dokumentet för att detektera klick effektivt:

Ett klick-event utlöses någonstans på sidan.
Skriptet går upp i DOM-trädet från det klickade elementet och letar efter ett data-ca-goal attribut.
Om det hittas, skickar det ett klick-event med målnamnet som selektor.

Visa klickmål

Klickmåls-events visas på Mål-sidan i din instrumentpanel. Skapa ett mål med typen "Klick" och matcha det till det data-ca-goal värde du använde i din HTML.

GA4 DataLayer-integration

Om din webbplats redan skickar events till Google Analytics dataLayer kan ClearAnalytics automatiskt fånga dessa events. Detta är den enklaste migrationsvägen från GA4.

Kräver det fullständiga skriptet (ca-events.js).

Aktivera DataLayer-avlyssning

Lägg till attributet data-ca-datalayer till script-taggen. Denna opt-in-metod säkerställer att funktionen bara aktiveras när du uttryckligen slår på den.

<script defer src="https://clearanalytics.eu/js/ca-events.js" data-ca-datalayer></script>

Hur det fungerar

När aktiverat fångar skriptet alla dataLayer.push()-anrop:

Igenkända e-handelsevents (purchase, add_to_cart osv.) vidarebefordras som e-handelsevents.
Alla andra anpassade events vidarebefordras som generiska anpassade events.
Interna GTM-events (gtm.js, gtm.dom, gtm.load osv.) filtreras automatiskt bort.
Befintliga dataLayer-poster bearbetas vid sidladdning; framtida pushes fångas i realtid.

Exempel

// These dataLayer pushes are automatically captured
dataLayer.push({
  event: 'form_submit',
  form_id: 'contact',
  form_name: 'Contact Form',
});

dataLayer.push({
  event: 'video_start',
  video_title: 'Product Demo',
  video_duration: 120,
});

Ignorerade events

Följande interna GTM-events ignoreras automatiskt och visas inte i din instrumentpanel:

// These GTM internal events are automatically filtered out:
gtm.js, gtm.dom, gtm.load, gtm.click, gtm.linkClick, gtm.scrollDepth

E-handelsspårning

Spåra hela kundresan från produktbläddring till köp och återbetalning. ClearAnalytics stöder alla 14 standard e-handelsevents med samma dataLayer-format som GA4.

Kräver det fullständiga skriptet (ca-events.js) med attributet data-ca-datalayer.

Alla e-handelsevents använder det GA4-kompatibla dataLayer.push()-formatet. Om du redan har GA4 e-handelsspårning implementerad kommer ClearAnalytics automatiskt fånga dessa events utan kodändringar.

Event	Beskrivning
`view_item_list`	Användaren ser en lista med produkter eller sökresultat.
`select_item`	Användaren klickar på en produkt i en lista.
`view_item`	Användaren ser en produktdetaljsida.
`add_to_cart`	Användaren lägger till en produkt i varukorgen.
`remove_from_cart`	Användaren tar bort en produkt från varukorgen.
`view_cart`	Användaren ser varukorgen.
`add_to_wishlist`	Användaren lägger till en produkt i sin önskelista.
`begin_checkout`	Användaren påbörjar kassaprocessen.
`add_shipping_info`	Användaren skickar in sin leveransinformation.
`add_payment_info`	Användaren skickar in sin betalningsinformation.
`purchase`	Användaren slutför ett köp.
`refund`	En hel eller delvis återbetalning behandlas.
`view_promotion`	Användaren ser en kampanjbanner eller ett erbjudande.
`select_promotion`	Användaren klickar på en kampanj.

view_item_list

Utlös detta event när användare ser en lista med produkter, som en kategorisida eller sökresultat.

dataLayer.push({ ecommerce: null }); // Clear previous data
dataLayer.push({
  event: 'view_item_list',
  ecommerce: {
    item_list_id: 'category_results',
    item_list_name: 'Category Results',
    items: [
      {
        item_id: 'SKU-001',
        item_name: 'Running Shoes',
        item_brand: 'SportCo',
        item_category: 'Footwear',
        price: 89.99,
        index: 0,
      },
      {
        item_id: 'SKU-002',
        item_name: 'Trail Shoes',
        item_brand: 'SportCo',
        item_category: 'Footwear',
        price: 119.99,
        index: 1,
      },
    ],
  },
});

select_item

Utlös detta event när en användare klickar på en specifik produkt i en lista för att se den.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'select_item',
  ecommerce: {
    item_list_id: 'category_results',
    item_list_name: 'Category Results',
    items: [{
      item_id: 'SKU-001',
      item_name: 'Running Shoes',
      item_brand: 'SportCo',
      price: 89.99,
      index: 0,
    }],
  },
});

view_item

Utlös detta event när en användare landar på en produktdetaljsida.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'view_item',
  ecommerce: {
    currency: 'EUR',
    value: 89.99,
    items: [{
      item_id: 'SKU-001',
      item_name: 'Running Shoes',
      item_brand: 'SportCo',
      item_category: 'Footwear',
      item_variant: 'Blue / Size 42',
      price: 89.99,
      quantity: 1,
    }],
  },
});

add_to_cart

Utlös detta event när en användare lägger till en eller flera produkter i varukorgen.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'add_to_cart',
  ecommerce: {
    currency: 'EUR',
    value: 89.99,
    items: [{
      item_id: 'SKU-001',
      item_name: 'Running Shoes',
      item_brand: 'SportCo',
      price: 89.99,
      quantity: 1,
    }],
  },
});

remove_from_cart

Utlös detta event när en användare tar bort en produkt från varukorgen.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'remove_from_cart',
  ecommerce: {
    currency: 'EUR',
    value: 89.99,
    items: [{
      item_id: 'SKU-001',
      item_name: 'Running Shoes',
      price: 89.99,
      quantity: 1,
    }],
  },
});

view_cart

Utlös detta event när en användare ser sin varukorgssida.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'view_cart',
  ecommerce: {
    currency: 'EUR',
    value: 209.98,
    items: [
      { item_id: 'SKU-001', item_name: 'Running Shoes', price: 89.99, quantity: 1 },
      { item_id: 'SKU-003', item_name: 'Sports Watch', price: 119.99, quantity: 1 },
    ],
  },
});

add_to_wishlist

Utlös detta event när en användare sparar en produkt i sin önskelista för senare.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'add_to_wishlist',
  ecommerce: {
    currency: 'EUR',
    value: 89.99,
    items: [{
      item_id: 'SKU-001',
      item_name: 'Running Shoes',
      price: 89.99,
    }],
  },
});

begin_checkout

Utlös detta event när en användare påbörjar kassaflödet.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'begin_checkout',
  ecommerce: {
    currency: 'EUR',
    value: 209.98,
    coupon: 'SUMMER20',
    items: [
      { item_id: 'SKU-001', item_name: 'Running Shoes', price: 89.99, quantity: 1 },
      { item_id: 'SKU-003', item_name: 'Sports Watch', price: 119.99, quantity: 1 },
    ],
  },
});

add_shipping_info

Utlös detta event när en användare väljer eller skickar in leveransdetaljer under kassan.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'add_shipping_info',
  ecommerce: {
    currency: 'EUR',
    value: 209.98,
    shipping_tier: 'Express',
    items: [
      { item_id: 'SKU-001', item_name: 'Running Shoes', price: 89.99, quantity: 1 },
      { item_id: 'SKU-003', item_name: 'Sports Watch', price: 119.99, quantity: 1 },
    ],
  },
});

add_payment_info

Utlös detta event när en användare väljer eller skickar in sin betalningsmetod under kassan.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'add_payment_info',
  ecommerce: {
    currency: 'EUR',
    value: 209.98,
    payment_type: 'Credit Card',
    items: [
      { item_id: 'SKU-001', item_name: 'Running Shoes', price: 89.99, quantity: 1 },
      { item_id: 'SKU-003', item_name: 'Sports Watch', price: 119.99, quantity: 1 },
    ],
  },
});

purchase

Utlös detta event när ett köp bekräftas. Inkludera transaction_id, value, currency, tax, shipping och det fullständiga items-arrayet.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'purchase',
  ecommerce: {
    transaction_id: 'TXN-20260219-001',
    affiliation: 'Online Store',
    value: 209.98,
    tax: 36.49,
    shipping: 5.99,
    currency: 'EUR',
    coupon: 'SUMMER20',
    items: [
      {
        item_id: 'SKU-001',
        item_name: 'Running Shoes',
        item_brand: 'SportCo',
        item_category: 'Footwear',
        item_variant: 'Blue / Size 42',
        price: 89.99,
        quantity: 1,
        coupon: '',
      },
      {
        item_id: 'SKU-003',
        item_name: 'Sports Watch',
        item_brand: 'FitTech',
        item_category: 'Electronics',
        item_variant: 'Black',
        price: 119.99,
        quantity: 1,
        coupon: '',
      },
    ],
  },
});

refund

Utlös detta event när en återbetalning behandlas. För en fullständig återbetalning krävs bara transaction_id. För delvisa återbetalningar, inkludera de specifika artiklarna.

// Full refund
dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'refund',
  ecommerce: {
    transaction_id: 'TXN-20260219-001',
  },
});

// Partial refund (specific items)
dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'refund',
  ecommerce: {
    transaction_id: 'TXN-20260219-001',
    items: [{
      item_id: 'SKU-001',
      quantity: 1,
    }],
  },
});

view_promotion

Utlös detta event när en kampanjbanner, karusell eller erbjudande blir synligt för användaren.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'view_promotion',
  ecommerce: {
    creative_name: 'Spring Banner',
    creative_slot: 'homepage_hero',
    promotion_id: 'PROMO-SPRING-2026',
    promotion_name: 'Spring Sale 2026',
    items: [{
      item_id: 'SKU-001',
      item_name: 'Running Shoes',
      price: 89.99,
      discount: 15.00,
    }],
  },
});

select_promotion

Utlös detta event när en användare klickar på en kampanj för att lära sig mer eller utnyttja erbjudandet.

dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'select_promotion',
  ecommerce: {
    creative_name: 'Spring Banner',
    creative_slot: 'homepage_hero',
    promotion_id: 'PROMO-SPRING-2026',
    promotion_name: 'Spring Sale 2026',
    items: [{
      item_id: 'SKU-001',
      item_name: 'Running Shoes',
      price: 89.99,
    }],
  },
});

Migrering från Google Analytics

ClearAnalytics är utformat för att fungera tillsammans med eller som ersättning för Google Analytics. Du kan köra båda verktygen parallellt under migreringen utan konflikter.

Köra båda skripten parallellt

Lägg till ClearAnalytics-skriptet bredvid din befintliga Google Analytics-tagg. Båda skripten spårar oberoende utan att störa varandra.

<!-- Google Analytics (existing) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXX');
</script>

<!-- ClearAnalytics (add this line) -->
<script defer src="https://clearanalytics.eu/js/ca-events.js" data-ca-datalayer></script>

Funktionskompatibilitet

Så här motsvarar ClearAnalytics-funktioner sina Google Analytics-motsvarigheter:

Funktion	Google Analytics	ClearAnalytics
Sidvisningar	`gtag('event', 'page_view')`	Automatisk
Anpassade Events	`gtag('event', ...)`	`window.ca('event')`
E-handel	`dataLayer.push()`	dataLayer-kompatibel
UTM-kampanjer	Automatisk	Automatisk
Sessioner	Cookie-baserad	Utan cookies

Migreringssteg

Lägg till ClearAnalytics-skriptet på din webbplats bredvid Google Analytics.
Aktivera dataLayer-avlyssning med data-ca-datalayer för att fånga befintliga e-handelsevents.
Jämför data i båda instrumentpanelerna under 2-4 veckor för att verifiera noggrannheten.
När du är nöjd, ta bort Google Analytics-skriptet och njut av en snabbare, integritets-fokuserad installation.

SPA-stöd

ClearAnalytics detekterar automatiskt klientsidenavigering i single-page-applikationer. Ingen ytterligare konfiguration eller router-integration krävs.

Hur det fungerar

Skriptet fångar webbläsarens History API-anrop för att detektera sidnavigering:

history.pushState() anrop fångas och utlöser en ny sidvisning.
history.replaceState() anrop fångas och utlöser en ny sidvisning.
popstate events (webbläsarens bakåt/framåt) utlöser en ny sidvisning.

Kompatibla ramverk

Fungerar direkt med alla ramverk som använder History API för routing:

React Next.js Vue.js Nuxt Svelte SvelteKit Angular Remix Astro Inertia.js

Inga router-plugins, lifecycle-hooks eller manuella spårningsanrop behövs. Lägg bara till script-taggen en gång och varje sidnavigering spåras automatiskt.

Integritet & Efterlevnad

ClearAnalytics är byggt med integritet i kärnan. Tracking-skriptet samlar bara in anonym, aggregerad data. Personlig information lagras eller överförs aldrig.

Inga cookies

Skriptet sätter, läser eller är inte beroende av webbläsarcookies. Ingen cookie-samtyckesbanner behövs.

Ingen fingerprinting

Vi skapar aldrig webbläsarfingeravtryck. Inga canvas-, WebGL-, typsnitt- eller ljud-fingerprinting-tekniker används.

Ingen IP-lagring

Besökares IP-adresser används bara för anonymiserad hashning under förfrågan. De lagras aldrig i databasen.

GDPR-kompatibel

Eftersom inga personuppgifter samlas in faller ClearAnalytics utanför GDPR-samtyckeskraven. All data stannar inom EU.

Hur vi anonymiserar besökare

För att räkna unika besökare utan att lagra personuppgifter använder vi en dagligen roterande anonym hash:

Besökarens IP-adress och User-Agent kombineras med ett dagligen roterande salt.
Denna kombination hashas med en envägs SHA-256-algoritm.
Saltet roterar var 24:e timme, vilket gör det omöjligt att spåra besökare över dagar.
Den ursprungliga IP-adressen lagras eller loggas aldrig.

Data som samlas in av skriptet

Följande icke-personliga datafält skickas med varje sidvisnings-event:

Fält	Syfte
`pathname`	URL-sökvägen för den besökta sidan.
`referrer`	Den hänvisande sidans URL, om någon.
`language`	Webbläsarens språkinställning.
`screen_width / screen_height`	Skärmdimensioner för klassificering av enhetstyp.
`utm_*`	Kampanjspårningsparametrar från URL:en.
`duration`	Tid spenderad på sidan i sekunder.

Eftersom ClearAnalytics aldrig samlar in personuppgifter behöver du ingen cookie-samtyckesbanner, integritetspopup eller opt-in-mekanism för att använda vårt tracking-skript. Det är kompatibelt med GDPR, ePrivacy, PECR och CCPA direkt från start.