De tracking snippet is een klein async script — een paar kilobytes geserveerd vanaf een edge-cached first-party pad — dat de organisatie achter elke sessie identificeert. Correct geïnstalleerd merk je er niets van. Onjuist geïnstalleerd ben je een week bezig met debuggen waarom geïdentificeerde bedrijven ontbreken, voordat je ontdekt dat de loader in een lazy-loaded gedeelte stond. Deze gids helpt je die week te besparen.
Drie principes voordat je iets pakt
- De loader hoort in de site-brede HTML head. Niet in de footer, niet in een specifiek pagina-template, niet in een component dat alleen op marketingpagina's verschijnt. In de head, op elke pagina.
- De loader is standaard async. Voeg geen defer/async override toe die de uitvoeringstijd verandert; de meegeleverde attributen zijn de attributen die we hebben getest.
- Installeer precies één keer. Twee kopieën van de loader op dezelfde pagina verdubbelen je data niet — ze verdubbelen de verzoeken en maken het debuggen verwarrend.
WordPress
De schoonste installatie op WordPress vermijdt het bewerken van thema's. Gebruik een header-scripts plugin (elke bekende volstaat), plak de loader in het veld "scripts in head", sla op en wis eventuele page-cache. Als je geen plugin wilt, voeg dan een klein mu-plugin bestand toe dat inhaakt op wp_head met prioriteit 5, zodat de loader vóór de analytics-tags landt. Plak het niet in de body van een pagina of bericht — WordPress zal de script-tag eruit filteren.
Eén WordPress-specifieke check: als je een full-page cache gebruikt (LiteSpeed, WP Rocket, W3 Total Cache), leeg dan de cache na installatie. Gecachte HTML van vóór de installatie bevat de loader niet.
Shopify
Shopify plaatst de thema-HTML in theme.liquid. Ga in je Shopify-beheeromgeving naar Online Store → Themes → Actions → Edit code → theme.liquid, en plak de loader direct voor de sluitende </head> tag. Opslaan. Dat is alles — geen app nodig, geen checkout-script (checkout valt sowieso buiten het bereik van identificatie op bedrijfsniveau).
Dupliceer eerst een thema
Voordat je theme.liquid bewerkt, gebruik Actions → Duplicate. Als er iets misgaat, kun je met één klik terug. Dit is een gewoonte van vijf seconden die elk Shopify-team dat we het hebben aangeraden, heeft gered.
Webflow
Webflow → Site Settings → Custom Code → Head Code. Plak de loader. Opslaan. Publiceer de site. De head-code wordt wereldwijd op alle pagina's toegepast, wat precies is wat je wilt. Plak de loader niet in een embed op paginaniveau — dan track je alleen die ene pagina.
Google Tag Manager
GTM werkt, met twee kanttekeningen. Ten eerste: gebruik een maatwerk HTML-tag waarbij de trigger is ingesteld op "All Pages", zodat de loader bij elke pageview draait. Ten tweede: zet de tag-prioriteit hoog genoeg zodat deze wordt uitgevoerd vóór andere analytics-tags die de initiële payload kunnen vertragen. GTM-gebruikers stapelen vaak vier of vijf tags in de head; de loader is klein, maar de volgorde waarin tags worden afgevuurd is belangrijk als je identificatie bij het eerste verzoek wilt.
Let op de toestemmingsmodus: als je GTM gebruikt achter een toestemmingsbanner die analytics-tags pas na opt-in afvuurt, zet identificatie op bedrijfsniveau dan niet achter diezelfde barrière — het gebruikt geen cookies en slaat geen gegevens op het apparaat van de bezoeker op, dus het heeft niet hetzelfde toestemmingsvlak nodig. Configureer de tag om onmiddellijk af te vuren, samen met je strikt noodzakelijke tags.
Plain HTML / eigen stacks
Voor een zelfgebouwde site of een framework dat we niet hebben genoemd, plak je de loader binnen het <head> element van je basis-template — het bestand dat op elke pagina wordt gerenderd. Rebuild en redeploy. Voor static site generators hoort de loader in het site-brede lay-outbestand (in Next.js is dat een <Script> in de app-level lay-out met strategy="afterInteractive"; in Astro de <BaseHead> component; in 11ty de base template partial). Als je het hebt toegevoegd als een script op componentniveau, zullen alleen pagina's die dat component bevatten rapporteren.
Single-page applications — het addertje onder het gras
In een SPA wordt de initiële pageview vastgelegd door de loader wanneer de pagina voor het eerst laadt. Opeenvolgende navigaties aan de clientzijde zijn vanuit het oogpunt van de browser geen automatische pageviews. Onze loader luistert standaard naar de History API, dus navigaties op basis van back/forward en pushState worden als nieuwe pageviews geregistreerd zonder dat je code hoeft toe te voegen. Als je SPA een afwijkende router gebruikt die de History API omzeilt (zeldzaam, maar mogelijk), roep dan de kleine gedocumenteerde pageview-functie aan bij een route-wijziging — drie regels, te vinden in de documentatie.
Verifieer de installatie in twee minuten
Verificatie is niet optioneel. Doe het voordat je het tabblad sluit waarin je de loader hebt geïnstalleerd; een kapotte installatie vijf minuten na het plakken ontdekken is eenvoudig, vijf dagen later niet.
- Open je site in een incognito-venster (zodat gecachte bestanden je niet in de war brengen).
- Open DevTools → tabblad Network, filter op "l5e" of het pad van de loader.
- Vernieuw de pagina. Je zou één verzoek naar de loader moeten zien, gevolgd door één klein identify-beacon. Beide moeten status 200 hebben. De responskoppen van de loader moeten een cache-control bevatten met s-maxage en stale-while-revalidate.
- Navigeer naar een tweede pagina. Je zou nog één identify-beacon moeten zien vuren, zonder dat de loader opnieuw wordt gedownload (deze geeft een 304).
- Keer terug naar het lead.box dashboard, open de live bezoeker-feed en bevestig dat je testbezoek verschijnt. Als dat zo is, is de installatie voltooid.
Veelvoorkomende fouten — de tabel om als eerste te controleren
| Symptoom | Vermoedelijke oorzaak | Oplossing |
|---|---|---|
| Helemaal geen live bezoeken | Loader ontbreekt in head, of staat in het verkeerde template | Verplaats de loader naar het site-brede head-template |
| Live bezoeken alleen vanuit één sectie | Loader in een embed op paginaniveau, niet globaal | Verplaats naar globale head / thema header |
| Loader laadt, maar geen identify-beacon | Toestemmingsbanner blokkeert third-party scripts te agressief | Configureer banner om strikt noodzakelijk toe te staan; loader heeft geen toestemming nodig |
| Dubbele beacons per pageview | Loader twee keer geïnstalleerd (thema + plugin/tag) | Verwijder er één |
| Trage first paint na installatie | Loader geplaatst vóór kritieke CSS | Bevestig dat async attribuut aanwezig is; plaats na preload van kritieke CSS |
| SPA rapporteert alleen de eerste pagina | Aangepaste router omzeilt History API | Roep gedocumenteerde pageview() aan bij route-wijziging |
| Verouderde HTML geserveerd zonder loader | Full-page cache niet geleegd na installatie | Leeg cache; verifieer in incognito |
Prestatienotitie — edge-cached loader
De loader wordt geserveerd vanuit een first-party pad dat geproxy'd is naar onze edge-cache met s-maxage=300 en stale-while-revalidate. In de praktijk betekent dit dat de loader één keer per vijf minuten per edge PoP wordt opgehaald en vervolgens vanuit de cache aan elke volgende bezoeker wordt getoond. De impact op bestandsgrootte en laadtijd is zo klein dat we afraden om extra laadlogica toe te voegen.
Wanneer je om hulp moet vragen
Als je de verificatiestappen hebt doorlopen en er nog steeds iets niet klopt, horen we dat liever na tien minuten dan na tien dagen. Geef drie dingen door: de URL van de site, een screenshot van het tabblad Network in DevTools gefilterd op het pad van de loader, en de naam van het platform waarop je hebt geïnstalleerd. Dat is genoeg om bijna elk installatieprobleem bij het eerste antwoord te diagnosticeren.
Gepubliceerd door
lead.box Team
Meer artikelen
Zie lead.box in actie op je eigen verkeer
Start gratis — geen kaart, geen salesgesprek nodig. Of boek een rondleiding van 20 minuten als je liever hulp krijgt.