Tracking & Events Dokumentation

Alt hvad du behøver for at installere ClearAnalytics på din hjemmeside og spore sidevisninger, brugerdefinerede events, klikmål og e-commerce transaktioner.

Oversigt

ClearAnalytics tilbyder to tracking-script varianter. Vælg den der passer til dine behov: et minimalt script til grundlæggende sidevisningsanalyse, eller et fuldt script til brugerdefinerede events, klikmål og e-commerce tracking.

Light Script (ca.js)

Det lettest mulige tracking-script. Perfekt til blogs, landingssider og websites der kun har brug for sidevisningsanalyse.

ca.js < 1 KB

Automatisk sidevisningssporing
Sessionsvarighed og afvisningsrate
Opsamling af UTM-kampagneparametre
Understøttelse af single-page applikationer

Full Script (ca-events.js)

Alt i light scriptet, plus brugerdefinerede events, klikmålsporing, GA4 dataLayer-opfangning og fuld e-commerce understøttelse.

ca-events.js < 2 KB

Alt i light scriptet
Brugerdefineret event-sporing via window.ca()
Klikmålsporing via data-ca-goal
GA4 dataLayer-integration
Fuld e-commerce event-sporing

Installation

Tilføj et enkelt script-tag til din hjemmeside. Ingen npm-pakker, ingen build-værktøjer, ingen konfigurationsfiler. Scriptet indlæses asynkront og har ingen påvirkning på sidens ydeevne.

HTML — Light Script

Tilføj dette i <head> eller i slutningen af <body> på hver side. Sporer automatisk sidevisninger, sessionsvarighed og UTM-parametre.

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

HTML — Full Script

Brug denne variant hvis du har brug for brugerdefinerede events, klikmål eller e-commerce tracking.

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

HTML — Full Script med DataLayer

Tilføj attributten data-ca-datalayer for automatisk at opfange GA4 dataLayer-events, inklusive alle e-commerce events.

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

WordPress

Tilføj script-tagget via dit temas functions.php fil eller brug et header/footer-injektions plugin.

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

React / Next.js

Brug Next.js Script-komponenten for optimal indlæsning. Scriptet virker med ethvert React-framework.

// 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

Tilføj scriptet via din Nuxt-konfiguration eller direkte i din HTML-skabelon for almindelige Vue-apps.

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

Google Tag Manager

Du kan også implementere scriptet via Google Tag Manager med et Custom HTML-tag.

Tag Type:   Custom HTML
Trigger:    All Pages

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

Når du bruger GTM med attributten data-ca-datalayer, vil ClearAnalytics automatisk opfange alle dataLayer-events sendt af dine eksisterende GTM-tags.

Brugerdefinerede Events

Spor enhver brugerinteraktion ved at sende brugerdefinerede events med valgfri metadata. Brugerdefinerede events vises i dit dashboard og kan bruges som måltriggere.

Kræver det fulde script (ca-events.js).

API Signature

window.ca(eventName, properties?);

Parameter	Type	Beskrivelse
`eventName`	string	Et beskrivende navn for eventet (f.eks. 'signup', 'file_download').
`properties`	object	Valgfrit objekt med yderligere metadata. Serialiseres som JSON.

Eksempler

// Spor en tilmelding med planinfo

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

// Spor en fildownload

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

// Spor en videoafspilning

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

// Spor en intern søgning

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

Klikmålsporing

Spor knap- og linkklik uden at skrive JavaScript. Tilføj en data-ca-goal attribut til ethvert HTML-element, og klikket registreres automatisk.

Kræver det fulde script (ca-events.js).

Brug

Tilføj data-ca-goal="goal-name" til ethvert klikbart element. Attributværdien bliver målidentifikatoren i dit dashboard.

<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>

Sådan virker det

Scriptet bruger event-delegering på dokumentet til at detektere klik effektivt:

Et klik-event udløses et sted på siden.
Scriptet går op i DOM-træet fra det klikkede element og leder efter en data-ca-goal attribut.
Hvis fundet, sender det et klik-event med målnavnet som selektor.

Visning af klikmål

Klikmål-events vises på Mål-siden i dit dashboard. Opret et mål med typen "Klik" og match det til den data-ca-goal værdi du brugte i din HTML.

GA4 DataLayer-integration

Hvis din side allerede sender events til Google Analytics dataLayer, kan ClearAnalytics automatisk opfange disse events. Dette er den nemmeste migrationsvej fra GA4.

Kræver det fulde script (ca-events.js).

Aktivering af DataLayer-opfangning

Tilføj attributten data-ca-datalayer til script-tagget. Denne opt-in tilgang sikrer, at funktionen kun aktiveres, når du eksplicit slår den til.

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

Sådan virker det

Når aktiveret opfanger scriptet alle dataLayer.push() kald:

Genkendte e-commerce events (purchase, add_to_cart osv.) videresendes som e-commerce events.
Alle andre brugerdefinerede events videresendes som generiske brugerdefinerede events.
Interne GTM-events (gtm.js, gtm.dom, gtm.load osv.) filtreres automatisk fra.
Eksisterende dataLayer-poster behandles ved sideindlæsning; fremtidige pushes opfanges i realtid.

Eksempel

// 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,
});

Ignorerede events

Følgende interne GTM-events ignoreres automatisk og vises ikke i dit dashboard:

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

E-Commerce Tracking

Spor hele kunderejsen fra produktbrowsing til køb og refundering. ClearAnalytics understøtter alle 14 standard e-commerce events med det samme dataLayer-format som GA4.

Kræver det fulde script (ca-events.js) med attributten data-ca-datalayer.

Alle e-commerce events bruger det GA4-kompatible dataLayer.push() format. Hvis du allerede har GA4 e-commerce tracking implementeret, vil ClearAnalytics automatisk opfange disse events uden kodeændringer.

Event	Beskrivelse
`view_item_list`	Brugeren ser en liste over produkter eller søgeresultater.
`select_item`	Brugeren klikker på et produkt i en liste.
`view_item`	Brugeren ser en produktdetaljeside.
`add_to_cart`	Brugeren tilføjer et produkt til indkøbskurven.
`remove_from_cart`	Brugeren fjerner et produkt fra kurven.
`view_cart`	Brugeren ser indkøbskurven.
`add_to_wishlist`	Brugeren tilføjer et produkt til sin ønskeliste.
`begin_checkout`	Brugeren starter checkout-processen.
`add_shipping_info`	Brugeren indsender sine forsendelsesoplysninger.
`add_payment_info`	Brugeren indsender sine betalingsoplysninger.
`purchase`	Brugeren gennemfører et køb.
`refund`	En hel eller delvis refundering behandles.
`view_promotion`	Brugeren ser et kampagnebanner eller tilbud.
`select_promotion`	Brugeren klikker på en kampagne.

view_item_list

Udløs dette event når brugere ser en liste over produkter, f.eks. en kategoriside eller søgeresultater.

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

Udløs dette event når en bruger klikker på et specifikt produkt fra en liste for at se det.

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

Udløs dette event når en bruger lander på en produktdetaljeside.

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

Udløs dette event når en bruger tilføjer et eller flere produkter til indkøbskurven.

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

Udløs dette event når en bruger fjerner et produkt fra kurven.

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

Udløs dette event når en bruger ser sin indkøbskurvside.

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

Udløs dette event når en bruger gemmer et produkt på sin ønskeliste til senere.

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

Udløs dette event når en bruger starter checkout-flowet.

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

Udløs dette event når en bruger vælger eller indsender forsendelsesdetaljer under checkout.

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

Udløs dette event når en bruger vælger eller indsender sin betalingsmetode under checkout.

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

Udløs dette event når et køb er bekræftet. Inkluder transaction_id, value, currency, tax, shipping og det fulde items-array.

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

Udløs dette event når en refundering behandles. For en fuld refundering kræves kun transaction_id. For delvise refunderinger, inkluder de specifikke varer.

// 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

Udløs dette event når et kampagnebanner, karrusel eller tilbud bliver synligt for brugeren.

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

Udløs dette event når en bruger klikker på en kampagne for at lære mere eller benytte tilbuddet.

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 fra Google Analytics

ClearAnalytics er designet til at fungere side om side med eller som erstatning for Google Analytics. Du kan køre begge værktøjer parallelt under migreringen uden konflikter.

Kørsel af begge scripts parallelt

Tilføj ClearAnalytics-scriptet ved siden af dit eksisterende Google Analytics-tag. Begge scripts sporer uafhængigt uden at forstyrre hinanden.

<!-- 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ådan matcher ClearAnalytics-funktioner deres Google Analytics-ækvivalenter:

Funktion	Google Analytics	ClearAnalytics
Sidevisninger	`gtag('event', 'page_view')`	Automatisk
Brugerdefinerede Events	`gtag('event', ...)`	`window.ca('event')`
E-Commerce	`dataLayer.push()`	dataLayer-kompatibel
UTM-kampagner	Automatisk	Automatisk
Sessioner	Cookie-baseret	Uden cookies

Migreringstrin

Tilføj ClearAnalytics-scriptet til din side ved siden af Google Analytics.
Aktiver dataLayer-opfangning med data-ca-datalayer for at opfange eksisterende e-commerce events.
Sammenlign data i begge dashboards i 2-4 uger for at verificere nøjagtigheden.
Når du er tilfreds, fjern Google Analytics-scriptet og nyd et hurtigere, privatlivsfokuseret setup.

SPA-understøttelse

ClearAnalytics detekterer automatisk klientside-navigation i single-page applikationer. Ingen yderligere konfiguration eller router-integration er påkrævet.

Sådan virker det

Scriptet opfanger browser History API-kald for at detektere sidenavigation:

history.pushState() kald opfanges og udløser en ny sidevisning.
history.replaceState() kald opfanges og udløser en ny sidevisning.
popstate events (browser tilbage/frem) udløser en ny sidevisning.

Kompatible frameworks

Virker ud af boksen med ethvert framework der bruger History API til routing:

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

Ingen router-plugins, lifecycle hooks eller manuelle sporingskald er nødvendige. Tilføj bare script-tagget én gang, og hver sidenavigation spores automatisk.

Privatliv & Overholdelse

ClearAnalytics er bygget med privatliv i kernen. Tracking-scriptet indsamler kun anonyme, aggregerede data. Personlige oplysninger gemmes eller transmitteres aldrig.

Ingen cookies

Scriptet sætter, læser eller afhænger ikke af browser-cookies. Intet cookie-samtykkebanner er nødvendigt.

Ingen fingerprinting

Vi opretter aldrig browser-fingeraftryk. Ingen canvas-, WebGL-, skrifttype- eller audio-fingerprinting-teknikker bruges.

Ingen IP-lagring

Besøgendes IP-adresser bruges kun til anonymiseret hashing under forespørgslen. De gemmes aldrig i databasen.

GDPR-kompatibel

Fordi ingen persondata indsamles, falder ClearAnalytics uden for GDPR-samtykkekravene. Alle data forbliver i EU.

Sådan anonymiserer vi besøgende

For at tælle unikke besøgende uden at gemme persondata bruger vi en dagligt roterende anonym hash:

Besøgendes IP-adresse og User-Agent kombineres med et dagligt roterende salt.
Denne kombination hashes med en envejs SHA-256 algoritme.
Saltet roterer hver 24. time, hvilket gør det umuligt at spore besøgende på tværs af dage.
Den originale IP-adresse gemmes eller logges aldrig.

Data indsamlet af scriptet

Følgende ikke-personlige datafelter sendes med hvert sidevisnings-event:

Felt	Formål
`pathname`	URL-stien for den besøgte side.
`referrer`	Den henvisende side-URL, hvis nogen.
`language`	Browserens sprogindstilling.
`screen_width / screen_height`	Skærmdimensioner til klassificering af enhedstype.
`utm_*`	Kampagnesporingsparametre fra URL'en.
`duration`	Tid brugt på siden i sekunder.

Fordi ClearAnalytics aldrig indsamler persondata, behøver du ikke et cookie-samtykkebanner, privatlivs-popup eller opt-in mekanisme for at bruge vores tracking-script. Det er kompatibelt med GDPR, ePrivacy, PECR og CCPA fra starten.