Tracking & Events Documentatie

Alles wat je nodig hebt om ClearAnalytics op je website te installeren en paginaweergaven, aangepaste events, klikdoelen en e-commerce transacties bij te houden.

Overzicht

ClearAnalytics biedt twee trackingscript-varianten. Kies degene die bij je past: een minimaal script voor basale paginaweergave-analytics, of een uitgebreid script voor aangepaste events, klikdoelen en e-commerce tracking.

Light Script (ca.js)

Het lichtst mogelijke trackingscript. Perfect voor blogs, landingspagina's en sites die alleen paginaweergave-analytics nodig hebben.

ca.js < 1 KB

Automatische paginaweergave-tracking
Sessieduur en bouncepercentage
UTM-campagneparameters vastleggen
Ondersteuning voor single-page applicaties

Full Script (ca-events.js)

Alles uit het light script, plus aangepaste events, klikdoel-tracking, GA4 dataLayer-interceptie en volledige e-commerce ondersteuning.

ca-events.js < 2 KB

Alles uit het light script
Aangepaste event-tracking via window.ca()
Klikdoel-tracking via data-ca-goal
GA4 dataLayer-integratie
Volledige e-commerce event-tracking

Installatie

Voeg een enkele scripttag toe aan je website. Geen npm-pakketten, geen buildtools, geen configuratiebestanden. Het script laadt asynchroon en heeft geen enkele invloed op de paginaprestaties.

HTML — Light Script

Voeg dit toe aan de <head> of het einde van <body> op elke pagina. Volgt automatisch paginaweergaven, sessieduur en UTM-parameters.

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

HTML — Full Script

Gebruik deze variant als je aangepaste events, klikdoelen of e-commerce tracking nodig hebt.

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

HTML — Full Script met DataLayer

Voeg het data-ca-datalayer attribuut toe om automatisch GA4 dataLayer-events te onderscheppen, inclusief alle e-commerce events.

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

WordPress

Voeg de scripttag toe via het functions.php bestand van je thema of gebruik een header/footer-injectieplugin.

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

React / Next.js

Gebruik de Next.js Script-component voor optimaal laden. Het script werkt met elk 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

Voeg het script toe via je Nuxt-configuratie of rechtstreeks in je HTML-template voor gewone Vue-apps.

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

Google Tag Manager

Je kunt het script ook uitrollen via Google Tag Manager met een Custom HTML-tag.

Tag Type:   Custom HTML
Trigger:    All Pages

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

Bij gebruik van GTM met het data-ca-datalayer attribuut, onderschept ClearAnalytics automatisch alle dataLayer-events die door je bestaande GTM-tags worden verzonden.

Aangepaste Events

Volg elke gebruikersinteractie door aangepaste events met optionele metadata te versturen. Aangepaste events verschijnen in je dashboard en kunnen worden gebruikt als doeltriggers.

Vereist het full script (ca-events.js).

API Signature

window.ca(eventName, properties?);

Parameter	Type	Beschrijving
`eventName`	string	Een beschrijvende naam voor het event (bijv. 'signup', 'file_download').
`properties`	object	Optioneel object met aanvullende metadata. Geserialiseerd als JSON.

Voorbeelden

// Een aanmelding met plan-info bijhouden

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

// Een bestandsdownload bijhouden

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

// Een videoweergave bijhouden

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

// Een interne zoekopdracht bijhouden

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

Klikdoel-tracking

Volg knop- en linkklikken zonder JavaScript te schrijven. Voeg een data-ca-goal attribuut toe aan elk HTML-element en de klik wordt automatisch geregistreerd.

Vereist het full script (ca-events.js).

Gebruik

Voeg data-ca-goal="goal-name" toe aan elk klikbaar element. De attribuutwaarde wordt de doelidentificatie in je 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>

Hoe het werkt

Het script gebruikt event-delegatie op het document om klikken efficiënt te detecteren:

Er vindt een klik-event plaats ergens op de pagina.
Het script loopt de DOM-boom op vanaf het aangeklikte element op zoek naar een data-ca-goal attribuut.
Indien gevonden, stuurt het een klik-event met de doelnaam als selector.

Klikdoelen bekijken

Klikdoel-events verschijnen op de Doelen-pagina in je dashboard. Maak een doel aan met type "Klik" en koppel het aan de data-ca-goal waarde die je in je HTML hebt gebruikt.

GA4 DataLayer-integratie

Als je site al events naar de Google Analytics dataLayer pusht, kan ClearAnalytics deze events automatisch onderscheppen. Dit is het eenvoudigste migratiepad vanaf GA4.

Vereist het full script (ca-events.js).

DataLayer-interceptie inschakelen

Voeg het data-ca-datalayer attribuut toe aan de scripttag. Deze opt-in aanpak zorgt ervoor dat de functie alleen wordt geactiveerd wanneer je deze expliciet inschakelt.

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

Hoe het werkt

Wanneer ingeschakeld, onderschept het script alle dataLayer.push() aanroepen:

Herkende e-commerce events (purchase, add_to_cart, enz.) worden doorgestuurd als e-commerce events.
Alle overige aangepaste events worden doorgestuurd als generieke aangepaste events.
Interne GTM-events (gtm.js, gtm.dom, gtm.load, enz.) worden automatisch uitgefilterd.
Bestaande dataLayer-vermeldingen worden bij het laden van de pagina verwerkt; toekomstige pushes worden in realtime onderschept.

Voorbeeld

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

Genegeerde events

De volgende interne GTM-events worden automatisch genegeerd en verschijnen niet in je dashboard:

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

E-Commerce Tracking

Volg de volledige klantreis van productbrowsing tot aankoop en restitutie. ClearAnalytics ondersteunt alle 14 standaard e-commerce events met hetzelfde dataLayer-formaat als GA4.

Vereist het full script (ca-events.js) met het data-ca-datalayer attribuut.

Alle e-commerce events gebruiken het GA4-compatibele dataLayer.push() formaat. Als je al GA4 e-commerce tracking hebt geïmplementeerd, vangt ClearAnalytics deze events automatisch op zonder codewijzigingen.

Event	Beschrijving
`view_item_list`	Gebruiker bekijkt een lijst met producten of zoekresultaten.
`select_item`	Gebruiker klikt op een product in een lijst.
`view_item`	Gebruiker bekijkt een productdetailpagina.
`add_to_cart`	Gebruiker voegt een product toe aan het winkelwagentje.
`remove_from_cart`	Gebruiker verwijdert een product uit het winkelwagentje.
`view_cart`	Gebruiker bekijkt het winkelwagentje.
`add_to_wishlist`	Gebruiker voegt een product toe aan de verlanglijst.
`begin_checkout`	Gebruiker start het afrekenproces.
`add_shipping_info`	Gebruiker dient verzendgegevens in.
`add_payment_info`	Gebruiker dient betaalgegevens in.
`purchase`	Gebruiker voltooit een aankoop.
`refund`	Een volledige of gedeeltelijke restitutie wordt verwerkt.
`view_promotion`	Gebruiker bekijkt een promotiebanner of aanbieding.
`select_promotion`	Gebruiker klikt op een promotie.

view_item_list

Activeer dit event wanneer gebruikers een lijst met producten zien, zoals een categoriepagina of zoekresultaten.

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

Activeer dit event wanneer een gebruiker op een specifiek product in een lijst klikt om het te bekijken.

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

Activeer dit event wanneer een gebruiker op een productdetailpagina belandt.

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

Activeer dit event wanneer een gebruiker een of meer producten aan het winkelwagentje toevoegt.

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

Activeer dit event wanneer een gebruiker een product uit het winkelwagentje verwijdert.

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

Activeer dit event wanneer een gebruiker de winkelwagentje-pagina bekijkt.

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

Activeer dit event wanneer een gebruiker een product opslaat op de verlanglijst voor later.

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

Activeer dit event wanneer een gebruiker het afrekenproces start.

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

Activeer dit event wanneer een gebruiker verzendgegevens selecteert of indient tijdens het afrekenen.

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

Activeer dit event wanneer een gebruiker een betaalmethode selecteert of indient tijdens het afrekenen.

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

Activeer dit event wanneer een aankoop is bevestigd. Voeg transaction_id, value, currency, tax, shipping en de volledige items-array toe.

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

Activeer dit event wanneer een restitutie wordt verwerkt. Voor een volledige restitutie is alleen de transaction_id vereist. Voor gedeeltelijke restituties, voeg de specifieke items toe.

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

Activeer dit event wanneer een promotiebanner, carrousel of aanbieding zichtbaar wordt voor de gebruiker.

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

Activeer dit event wanneer een gebruiker op een promotie klikt om meer te weten te komen of gebruik te maken van de aanbieding.

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

Migreren vanuit Google Analytics

ClearAnalytics is ontworpen om naast of als vervanging voor Google Analytics te werken. Je kunt beide tools parallel gebruiken tijdens de migratie zonder conflicten.

Beide scripts parallel uitvoeren

Voeg het ClearAnalytics-script toe naast je bestaande Google Analytics-tag. Beide scripts volgen onafhankelijk van elkaar zonder interferentie.

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

Functiecompatibiliteit

Zo verhouden ClearAnalytics-functies zich tot hun Google Analytics-equivalenten:

Functie	Google Analytics	ClearAnalytics
Paginaweergaven	`gtag('event', 'page_view')`	Automatisch
Aangepaste Events	`gtag('event', ...)`	`window.ca('event')`
E-Commerce	`dataLayer.push()`	dataLayer-compatibel
UTM-campagnes	Automatisch	Automatisch
Sessies	Op cookies gebaseerd	Zonder cookies

Migratiestappen

Voeg het ClearAnalytics-script toe aan je site naast Google Analytics.
Schakel dataLayer-interceptie in met data-ca-datalayer om bestaande e-commerce events vast te leggen.
Vergelijk gegevens in beide dashboards gedurende 2-4 weken om de nauwkeurigheid te verifiëren.
Wanneer je tevreden bent, verwijder het Google Analytics-script en geniet van een snellere, privacy-first setup.

SPA-ondersteuning

ClearAnalytics detecteert automatisch client-side navigatie in single-page applicaties. Geen extra configuratie of router-integratie vereist.

Hoe het werkt

Het script onderschept browser History API-aanroepen om paginanavigatie te detecteren:

history.pushState() aanroepen worden onderschept en activeren een nieuwe paginaweergave.
history.replaceState() aanroepen worden onderschept en activeren een nieuwe paginaweergave.
popstate events (browser terug/vooruit) activeren een nieuwe paginaweergave.

Compatibele frameworks

Werkt direct met elk framework dat de History API gebruikt voor routering:

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

Geen routerplugins, lifecycle hooks of handmatige tracking-aanroepen nodig. Voeg gewoon eenmalig de scripttag toe en elke paginanavigatie wordt automatisch bijgehouden.

Privacy & Compliance

ClearAnalytics is gebouwd met privacy als kern. Het trackingscript verzamelt alleen anonieme, geaggregeerde gegevens. Persoonlijke informatie wordt nooit opgeslagen of verzonden.

Geen cookies

Het script plaatst, leest of is niet afhankelijk van browsercookies. Geen cookietoestemmingsbanner nodig.

Geen fingerprinting

We maken nooit browserfingerprints. Geen canvas-, WebGL-, lettertype- of audio-fingerprintingtechnieken worden gebruikt.

Geen IP-opslag

IP-adressen van bezoekers worden alleen gebruikt voor geanonimiseerde hashing tijdens het verzoek. Ze worden nooit opgeslagen in de database.

AVG-conform

Omdat er geen persoonlijke gegevens worden verzameld, valt ClearAnalytics buiten het bereik van AVG-toestemmingsvereisten. Alle gegevens blijven in de EU.

Hoe we bezoekers anonimiseren

Om unieke bezoekers te tellen zonder persoonlijke gegevens op te slaan, gebruiken we een dagelijks roterende anonieme hash:

Het IP-adres en de User-Agent van de bezoeker worden gecombineerd met een dagelijks roterend salt.
Deze combinatie wordt gehasht met een eenrichtings SHA-256 algoritme.
Het salt roteert elke 24 uur, waardoor het onmogelijk is bezoekers over dagen heen te volgen.
Het originele IP-adres wordt nooit opgeslagen of gelogd.

Door het script verzamelde gegevens

De volgende niet-persoonlijke gegevensvelden worden bij elk paginaweergave-event verzonden:

Veld	Doel
`pathname`	Het URL-pad van de bezochte pagina.
`referrer`	De verwijzende pagina-URL, indien aanwezig.
`language`	De taalinstelling van de browser.
`screen_width / screen_height`	Schermafmetingen voor classificatie van apparaattype.
`utm_*`	Campagne-trackingparameters uit de URL.
`duration`	Tijd doorgebracht op de pagina in seconden.

Omdat ClearAnalytics nooit persoonlijke gegevens verzamelt, heb je geen cookietoestemmingsbanner, privacypop-up of opt-in mechanisme nodig om ons trackingscript te gebruiken. Het is direct conform AVG, ePrivacy, PECR en CCPA.