Het script op je site plaatsen · Hulpcentrum

Per platform stap voor stap: HTML, WordPress, Webflow, Shopify, Wix, Squarespace, Framer, Laravel en SPA's, plus CSP, eigen trackingdomein en controleren.

Leadspotr werkt met één regel code in de <head> van je site. Dit artikel laat per platform zien waar je die plakt. Ook lees je wat je moet regelen bij een Content-Security-Policy, hoe je een eigen trackingdomein gebruikt en hoe je controleert of alles werkt.

Het snippet

<script defer data-navigate-once src="https://t.leadspotr.nl/s.js" data-site="JOUW-SITESLEUTEL"></script>

src is het adres van de tracker. Gebruik je een eigen trackingdomein, dan staat daar jouw domein.
data-site is de sleutel van je site. Ben je ingelogd, dan staat hier al de sleutel van je eerste site. Het snippet per site vind je bij /admin/sites en /admin/install. Kies daar bovenaan de juiste site als je er meer hebt.
defer zorgt dat het script je pagina niet ophoudt.
data-navigate-once voorkomt dat het script dubbel laadt bij Livewire (wire:navigate).

Plaats het snippet één keer per pagina, het liefst in de <head>. Laadt het script per ongeluk twee keer, bijvoorbeeld in de HTML én via Tag Manager, dan draait het toch maar één keer.

Wat doet het script?

Zonder toestemming van de bezoeker:

stuurt het per pagina het pad, de titel, de verwijzer en bij het eerste bezoek de UTM-tags;
telt het de actieve tijd op een pagina;
zet het geen cookies en schrijft het niets in de opslag van de browser.

De herkenning van het bedrijf gebeurt daarna op onze server. Pas als de bezoeker toestemming geeft via je cookiebanner, krijgt hij een eigen id in localStorage. Dat is alleen nodig als je ook personen wilt herkennen. Zie Cookiebanner koppelen.

Belangrijk: het script meet alleen op de domeinen die je bij /admin/sites hebt opgegeven, inclusief subdomeinen. Test je op een tijdelijk adres, zoals jouwsite.webflow.io of een staging-omgeving? Voeg dat domein dan ook toe aan je site.

Gewone HTML

Plak het snippet in de <head> van elke pagina, bijvoorbeeld net vóór </head>:

<!doctype html>
<html lang="nl">
<head>
  <meta charset="utf-8">
  <title>Jouw bedrijf</title>
  <script defer data-navigate-once src="https://t.leadspotr.nl/s.js" data-site="JOUW-SITESLEUTEL"></script>
</head>

Werk je met een gedeelde header of template, dan hoef je het maar op één plek toe te voegen.

WordPress

Er zijn twee manieren. De plugin is het makkelijkst en blijft staan als je van thema wisselt.

Met de plugin WPCode (aanbevolen)

Ga in WordPress naar Plugins → Nieuwe plugin en installeer WPCode (Insert Headers and Footers).
Ga naar Code Snippets → Header & Footer.
Plak het snippet in het vak Header.
Klik op Opslaan.

Andere plugins voor header-code werken ook, zolang de code in de <head> komt.

In je thema

Gebruik een child-thema. Anders verdwijnt je wijziging bij de volgende thema-update.
Open header.php van je child-thema.
Plak het snippet net vóór </head>.

Bij een blokthema (Full Site Editing) is er meestal geen header.php. Gebruik dan de plugin.

Cache- en optimalisatieplugins

Plugins als WP Rocket, Autoptimize, LiteSpeed Cache of SiteGround Optimizer kunnen scripts samenvoegen of uitstellen tot de eerste klik. Werkt de meting niet goed, of mis je bezoekers die snel weer weggaan?

Sluit s.js uit van JavaScript samenvoegen en JavaScript-uitvoering uitstellen.
Leeg daarna de cache van de plugin en van je hosting.

Webflow

Open je project en ga naar Site settings → Custom code.
Plak het snippet in Head code.
Klik op Save changes.
Publiceer je site. Custom code werkt pas op de gepubliceerde site.

Voor custom code heb je in Webflow een betaald site-plan nodig. Wil je ook meten op jouwsite.webflow.io? Voeg dat domein dan toe bij /admin/sites.

Shopify

Ga in je Shopify-beheer naar Online winkel → Thema's.
Klik bij je actieve thema op ⋯ → Code bewerken.
Open layout/theme.liquid.
Plak het snippet net vóór </head>.
Klik op Opslaan.

Wissel je later van thema, dan moet je het snippet in het nieuwe thema opnieuw plaatsen.

Let op: gebruik niet Klantgebeurtenissen (Customer Events / Custom pixels) van Shopify. Die draaien in een afgeschermde omgeving op een ander domein, waardoor de meting niet aan jouw winkel gekoppeld wordt. De checkout-pagina's van Shopify kun je met dit snippet niet meten. Voor B2B-herkenning zijn je productpagina's en contactpagina's ook het interessantst.

Wix

Ga in je Wix-dashboard naar Instellingen.
Kies onder Geavanceerd voor Aangepaste code (Custom Code).
Klik op + Aangepaste code toevoegen.
Plak het snippet en geef het een naam, bijvoorbeeld Leadspotr.
Kies Alle pagina's en Laad code één keer, met als plaats Head.
Klik op Toepassen.

Voor aangepaste code moet je Wix-site een eigen domein en een betaald pakket hebben.

Squarespace

Ga naar Instellingen → Geavanceerd → Code-injectie (in nieuwere versies: Website → Website-tools → Code-injectie).
Plak het snippet in het vak Header.
Klik op Opslaan.

Code-injectie is beschikbaar vanaf de betaalde pakketten die dat ondersteunen. Zie je het menu niet, kijk dan in welk pakket je zit.

Framer

Open je project en ga naar Site Settings → General.
Scroll naar Custom Code.
Plak het snippet bij Start of <head> tag.
Publiceer je site.

Wil je ook meten op het gratis Framer-adres (*.framer.website of *.framer.app)? Voeg dat domein dan toe bij /admin/sites.

Laravel, Livewire en andere server-side frameworks

Zet het snippet één keer in je hoofdlayout, bijvoorbeeld resources/views/layouts/app.blade.php:

<head>
    <meta charset="utf-8">
    <title>{{ config('app.name') }}</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    <script defer data-navigate-once src="https://t.leadspotr.nl/s.js" data-site="JOUW-SITESLEUTEL"></script>
</head>

Navigatie zonder herladen met wire:navigate wordt vanzelf gemeten.
data-navigate-once zorgt dat Livewire het script niet bij elke navigatie opnieuw laadt.

Single-page apps (React, Vue, Next.js, Nuxt)

Zet het snippet één keer in de HTML-shell of de rootlayout. Het script volgt zelf navigatie via history.pushState en de terug-knop. Elke route telt als een nieuwe paginaweergave.

Vite, Create React App of Vue: in index.html:

<head>
  <script defer data-navigate-once src="https://t.leadspotr.nl/s.js" data-site="JOUW-SITESLEUTEL"></script>
</head>

Next.js (App Router): in app/layout.tsx:

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="nl">
      <head>
        <script defer data-navigate-once src="https://t.leadspotr.nl/s.js" data-site="JOUW-SITESLEUTEL" />
      </head>
      <body>{children}</body>
    </html>
  );
}

Goed om te weten:

Alleen het pad telt. De querystring (?…) wordt weggelaten, de UTM-tags worden apart gelezen bij het eerste bezoek.
Een router die alleen met een hekje werkt (/#/pagina) verandert het pad niet. Alle schermen tellen dan als één pagina. Gebruik bij voorkeur de history-modus van je router.

Google Tag Manager

Gebruik je Tag Manager, plaats het script dan via een tag Aangepaste HTML. Dat staat stap voor stap in Google Tag Manager. Zet het dan niet óók nog in de HTML. Dat kan geen kwaad, maar het is overbodig.

Content-Security-Policy (CSP)

Stuurt je site een Content-Security-Policy-header mee? Sta dan het adres van de tracker toe in script-src en connect-src:

Content-Security-Policy:
  script-src 'self' https://t.leadspotr.nl;
  connect-src 'self' https://t.leadspotr.nl;

script-src is nodig voor s.js en, als de widget aan staat, voor w.js.
connect-src is nodig voor de metingen en de widget.
Gebruik je de widget en een strikte style-src? De widget gebruikt eigen stijlen in de pagina. Staat de widget niet goed op je site, kijk dan in de console van je browser of de CSP stijlen blokkeert.

Gebruik je een eigen trackingdomein, zet dan dat domein in de CSP in plaats van het standaardadres.

Eigen trackingdomein (first-party)

Sommige adblockers blokkeren scripts van bekende trackingdiensten. Met een eigen subdomein, bijvoorbeeld t.jouwbedrijf.nl, laad je het script van je eigen domein. Alles is dan first-party en wordt minder vaak geblokkeerd.

Ga naar /admin/sites en open bij je site Eigen trackingdomein (first-party).
Maak bij je domeinbeheerder een CNAME-record aan voor het subdomein, bijvoorbeeld t, dat wijst naar het doel dat op die pagina staat.
Vul het subdomein in, bijvoorbeeld t.jouwbedrijf.nl, en klik op Opslaan en controleren.
Leadspotr controleert de DNS, het certificaat en of het script over HTTPS bereikbaar is. Lukt dat nog niet, dan zie je wat er ontbreekt. Een DNS-wijziging kan even duren: klik later op Opnieuw controleren.
Zodra er werkt staat, verandert het snippet bij /admin/sites. Vervang het snippet op je site door het nieuwe.

Het oude snippet blijft ook gewoon werken. Alleen de eigenaar van de workspace kan een trackingdomein instellen.

Controleren of het werkt

Open je site, het liefst in een privévenster zonder adblocker.
Kijk bij /admin/sites: onder je site staat het aantal paginaweergaven en wanneer de laatste binnenkwam.
Open de ontwikkelaarstools van je browser (F12) en kijk in het tabblad Netwerk. Daar moeten s.js en een verzoek naar /e staan.
Kom je van een bedrijfsnetwerk, dan verschijnt het bedrijf op /admin zodra het herkend is.

Meer controles en oplossingen staan in Installatie controleren en problemen oplossen.

Veelgemaakte fouten

Het domein staat niet bij de site. Bezoeken van een domein dat niet bij /admin/sites staat, worden genegeerd. Denk aan jouwsite.webflow.io, een staging-omgeving of een tweede extensie zoals .be.
Het script staat alleen op de homepage. Zet het in de gedeelde header of layout, zodat het op elke pagina staat.
Een verkeerde of oude sitesleutel. Kopieer het snippet opnieuw bij /admin/sites. Heb je meer sites, let dan op dat je de juiste kiest.
De site is nog niet gepubliceerd. In Webflow, Framer en Wix werkt custom code pas na publiceren.
De cookiebanner blokkeert het script. Cookiebot met automatische blokkering houdt ook de anonieme meting tegen. Zet data-cookieconsent="ignore" op het script. Zie Cookiebanner koppelen.
Een cacheplugin stelt het script uit of voegt het samen. Sluit s.js uit en leeg de cache.
Je test zelf met Brave of Global Privacy Control. Browsers die Global Privacy Control meesturen worden helemaal niet gemeten. Brave doet dat standaard. Test met een andere browser.
Je eigen IP is uitgesloten. Heb je je kantoor-IP toegevoegd bij /admin/exclusions, dan worden bezoeken vanaf kantoor niet opgeslagen. Dat is meestal de bedoeling, maar test dan vanaf een andere verbinding.
De proefperiode is voorbij. Zonder actief abonnement verwerkt Leadspotr geen nieuwe bezoeken. Kijk bij /admin/billing.