Conversietracking met Trackboxx

Met conversietracking van Trackboxx kun je meten welke acties bezoekers op je website ondernemen - bijvoorbeeld klikken op belangrijke links, verzonden formulieren of bekijken van bepaalde pagina's.
Deze gegevens helpen je om het succes van je marketing- en websitemaatregelen nauwkeurig te analyseren.

Belangrijk: met Trackboxx kun je conversies en doelen ook automatisch bijhouden. Dat is veel eenvoudiger en je hoeft geen extra code aan je website toe te voegen. Lees het artikel: Automatische doelen

Welke conversietypes kan Trackboxx registreren?

Trackboxx ondersteunt de volgende gebeurtenissen:

• Klikken op links, knoppen of menu-items
• Weergave van bepaalde pagina's (bijv. een bedankpagina)
• Verzending van formulieren
• Eigen JavaScript-gebeurtenissen

Elke conversie wordt in het dashboard weergegeven met de volgende gegevens:

• Naam van de conversie
• Aantal activeringen
• Waarde (optioneel)
• Conversiepercentage in de geselecteerde periode

1. Conversie aanmaken

Zo stel je een nieuw doel in:

1. Klik op het tandwiel rechtsboven
2. Kies Websites
3. Selecteer de website en klik op Doelen
4. Klik op Doel aanmaken
5. Naam en beschrijving toewijzen
6. Je ontvangt een code als deze:

Deze basis-ID wordt later geïntegreerd in de juiste codevoorbeelden.

2. Klikken bijhouden

Je kunt klikacties op verschillende manieren bijhouden.
Trackboxx beveelt de JavaScript-variant aan, omdat die stabieler, flexibeler en AVG-vriendelijker is.

2.1 Klikken volgen via JavaScript

a) Volgen via een CSS-ID

<a href="/kontakt/" id="kontakt-link">Kontakt</a>
Taal van de code: HTML, XML (xml)

Volgcode:

<script>
document.getElementById('kontakt-link').addEventListener('click', () => {
    trackboxx('trackGoal', 'DEINE-ID');
});
</script>
Taal van de code: HTML, XML (xml)

b) Volgen via een CSS-klasse

<script>
document.querySelector('.kontakt-link').addEventListener('click', () => {
    trackboxx('trackGoal', 'DEINE-ID');
});
</script>Taal van de code: HTML, XML (xml)

⚠️ Opmerking:
querySelector() tracks alleen het eerste element met deze klas.

Voor meerdere elementen tegelijk:

<script>
document.querySelectorAll('.kontakt-link').forEach(el => {
    el.addEventListener('click', () => {
        trackboxx('trackGoal', 'DEINE-ID');
    });
});
</script>
Taal van de code: HTML, XML (xml)

2.2 Klikken bijhouden met directe doorverwijzing (externe links, downloads, mailto, tel)

Als een bezoeker via een link de pagina direct verlaat, heeft de browser soms niet genoeg tijd om het trackingsignaal te verzenden.

Oplossing:
► Stel de doorverwijzing kort uit en voer deze pas uit nadat het trackingsignaal is verzonden.

Voorbeeld:

<script>
document.querySelectorAll('.externer-link').forEach(el => {
  el.addEventListener('click', (e) => {
    e.preventDefault();
    trackboxx('trackGoal', 'DEINE-ID');
    setTimeout(() => {
      window.location = el.href;
    }, 150);
  });
});
</script>
Taal van de code: HTML, XML (xml)

Aanbevolen voor:

• externe koppelingen
• PDF-downloads
• Mailto koppelingen
• Tel-Links
• Affiliate links

2.3 Klikken bijhouden via inline-HTML (onclick)

Deze methode werkt, maar is niet optimaal:

<a href="/kontakt/" onclick="trackboxx('trackGoal', 'DEINE-ID');">Kontakt</a>
Taal van de code: HTML, XML (xml)

⚠️ Nadelen:

• lastiger te onderhouden
• wordt vaak overschreven door paginabouwers
• technisch minder betrouwbaar

Aanbeveling: JavaScript in plaats van inline.

3. Paginaweergaven (conversies op basis van paginaweergaven)

Om te meten hoe vaak een bepaalde pagina wordt opgevraagd:

<script>
document.addEventListener('DOMContentLoaded', () => {
    trackboxx('trackGoal', 'DEINE-ID');
});
</script>
Taal van de code: HTML, XML (xml)

Ideaal voor:

• Bedankpagina’s
• Orderbevestigingen
• Bevestigingspagina’s na het verzenden van een formulier

4. Formuliertracking

Er zijn vier manieren:

4.1 Formulierverzending volgen via onsubmit (als toegang mogelijk is)

<form onsubmit="trackboxx('trackGoal', 'DEINE-ID');">
Taal van de code: HTML, XML (xml)

Eenvoudig - werkt overal waar HTML kan worden bewerkt.

4.2 Formulierverzending volgen via JavaScript

Als eventListener vereist is:

<script>
document.querySelector('#kontaktformular').addEventListener('submit', () => {
    trackboxx('trackGoal', 'DEINE-ID');
});
</script>
Taal van de code: HTML, XML (xml)

4.3 Formuliersystemen met een eigen succeslogica (bijv. slimme builders)

<script>
sk('form', 'init', {
  onSuccess: function() {
    trackboxx('trackGoal', 'DEINE-ID');
  }
});
</script>
Taal van de code: HTML, XML (xml)

→ Werkt met tools die een eigen ‘success’-hook hebben.

4.4 Traceren via de bedankpagina (alternatieve methode)

Als dit niet werkt:

1. Formulier succesvol verzenden
2. Doorsturen naar een nieuwe pagina (bijv. /bedankt/)
3. Gebruik op die pagina de trackingcode voor paginaweergaven

Dit is de meest universele oplossing.

5. WordPress-specifieke tracking

5.1 Menuklikken bijhouden via een CSS-klasse

Ken bijvoorbeeld deze CSS-klasse toe aan een WordPress-menu-item:

CSS-Klasse: neu-hier
Taal van de code: HTTP (http)

Volgen:

<script>
document.querySelector('.neu-hier').addEventListener('click', () => {
    trackboxx('trackGoal', 'DEINE-ID');
});
</script>
Taal van de code: HTML, XML (xml)

Automatische conversiecode generator

// Voer eerst uw conversie-ID in.

Gerelateerde artikelen:

Google Ads / Facebook Ads volgen via UTM - In dit artikel laten we je zien hoe je je betaalde campagnes op Google of Meta/Facebook kunt volgen en analyseren met Trackboxx.