Custom events tracken met JavaScript

De Skeo JavaScript API

Naast de automatische detectie van paginaweergaven, formulieren en uitgaande links kun je ook je eigen events versturen via de JavaScript API. Dit is handig voor acties die niet automatisch worden opgepikt, zoals PDF downloads, video interacties of klikken op specifieke knoppen.

Basis syntax

De API is beschikbaar via het window.skeo object zodra het tracking script is geladen. De basis syntax is:

window.skeo.track('event_naam', { key: 'waarde' });

| Parameter | Type | Verplicht | Beschrijving | |-----------|------|-----------|-------------| | event_naam | string | Ja | Unieke naam voor het event | | properties | object | Nee | Extra metadata als key-value pairs |

De eventnaam mag alleen kleine letters, cijfers en underscores bevatten. Maximaal 50 tekens.

Wachten tot het script is geladen

Het tracking script wordt met defer geladen, wat betekent dat het mogelijk nog niet beschikbaar is als je code direct bij het laden van de pagina wordt uitgevoerd. Gebruik daarom een check:

function trackEvent(name, properties) {
  if (window.skeo) {
    window.skeo.track(name, properties);
  }
}

Of wacht op het skeo:ready event:

document.addEventListener('skeo:ready', function() {
  // Script is geladen, je kunt nu events sturen
  window.skeo.track('pagina_geladen', {
    sectie: 'blog'
  });
});

Voorbeelden

PDF download tracken

document.querySelectorAll('a[href$=".pdf"]').forEach(function(link) {
  link.addEventListener('click', function() {
    window.skeo.track('pdf_download', {
      bestand: this.href.split('/').pop(),
      pagina: window.location.pathname
    });
  });
});

Dit script luistert naar klikken op alle links die eindigen op .pdf en verstuurt een event met de bestandsnaam en de huidige pagina.

Video bekeken

var video = document.querySelector('#product-video');

video.addEventListener('play', function() {
  window.skeo.track('video_gestart', {
    video_id: 'product-demo',
    pagina: window.location.pathname
  });
});

video.addEventListener('ended', function() {
  window.skeo.track('video_voltooid', {
    video_id: 'product-demo',
    pagina: window.location.pathname
  });
});

CTA knop geklikt

document.querySelector('#cta-aanmelden').addEventListener('click', function() {
  window.skeo.track('cta_geklikt', {
    knop: 'aanmelden',
    locatie: 'hero-sectie'
  });
});

Scroll diepte

var scrollMilestones = [25, 50, 75, 100];
var triggeredMilestones = [];

window.addEventListener('scroll', function() {
  var scrollPercentage = Math.round(
    (window.scrollY / (document.body.scrollHeight - window.innerHeight)) * 100
  );

  scrollMilestones.forEach(function(milestone) {
    if (scrollPercentage >= milestone && triggeredMilestones.indexOf(milestone) === -1) {
      triggeredMilestones.push(milestone);
      window.skeo.track('scroll_diepte', {
        percentage: milestone,
        pagina: window.location.pathname
      });
    }
  });
});

Google Tag Manager compatibiliteit

Als je al Google Tag Manager (GTM) gebruikt, kun je Skeo events ook via de dataLayer sturen. Het tracking script luistert automatisch naar de dataLayer:

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  event: 'skeo_event',
  event_name: 'pdf_download',
  event_properties: {
    bestand: 'whitepaper.pdf'
  }
});

Het event moet als event de waarde skeo_event hebben. De daadwerkelijke eventnaam zet je in event_name en eventuele properties in event_properties.

E-commerce events

Skeo detecteert automatisch standaard e-commerce events die via de dataLayer worden gepusht. De volgende events worden herkend:

| Event | Beschrijving | |-------|-------------| | purchase | Een aankoop is voltooid | | add_to_cart | Een product is aan de winkelwagen toegevoegd | | begin_checkout | De checkout is gestart | | view_item | Een product is bekeken |

Als je webshop (Shopify, WooCommerce, Magento) al een enhanced e-commerce dataLayer heeft, worden deze events automatisch opgepikt. Je hoeft geen extra code toe te voegen.

Koppelen aan conversiedoelen

Custom events worden pas als conversie geteld als je er een conversiedoel aan koppelt. Dit doe je via Projectinstellingen > Conversiedoelen. Kies het type Custom event en vul de eventnaam in die je in je JavaScript code gebruikt.

Meer hierover lees je in Conversiedoelen instellen.

Beperkingen

• Maximaal 50 tekens per eventnaam
• Maximaal 10 properties per event
• Maximaal 200 tekens per property waarde
• Events worden gebufferd en in batches verstuurd (maximaal elke 5 seconden)

Volgende stappen

• Conversiedoelen instellen: koppel je events aan conversiedoelen
• Het analytics dashboard begrijpen: bekijk je event data in het dashboard
• Hoe tracking werkt: technische achtergrond van het tracking script