Platformhandleidingen

De MetriXs-tracker is een enkele <script>-tag die in de <head> van uw website gaat. Op elk platform is het snippet hetzelfde, maar waar u het plaatst verschilt.

Hier is uw snippet. Vervang yourdomain.com door het domein dat u in MetriXs registreerde.

<script defer data-domain="yourdomain.com" src="https://app.metrixs.eu/tracker.js?v=1.1.0&k=<your-verification-key>"></script>

Tip: kopieer altijd de exacte snippet uit je MetriXs-dashboard in plaats van het generieke snippet hierboven — het bevat de verificatiesleutel van je site (&k=...), waarmee MetriXs je site verifieert.

---

Next.js

In de App Router (aanbevolen), voeg het script toe aan uw root-layout zodat het op elke pagina laadt. Open app/layout.tsx (of app/layout.jsx) en voeg het snippet toe in de <head> met next/script:

import Script from 'next/script'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <Script
          defer
          data-domain="yourdomain.com"
          src="https://app.metrixs.eu/tracker.js?v=1.1.0&k=<your-verification-key>"
          strategy="afterInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  )
}

strategy="afterInteractive" gebruiken betekent dat de tracker direct laadt nadat de pagina interactief wordt, wat uw initiele load snel houdt en pageviews bij client-side route-wijzigingen automatisch vastlegt.

Als u op de oudere Pages Router zit, voeg dezelfde <Script>-tag toe aan pages/_app.tsx.

---

React

Voor React-apps gebouwd met Vite of Create React App, voeg het snippet toe aan uw index.html-bestand in de public/-directory. Dit is de eenvoudigste aanpak en werkt voor alle single-page React-setup’s.

Open public/index.html (of index.html in de project-root voor Vite) en plak het snippet in de <head>-tag:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My App</title>
    <!-- MetriXs tracker -->
    <script defer data-domain="yourdomain.com" src="https://app.metrixs.eu/tracker.js?v=1.1.0&k=<your-verification-key>"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

De tracker haakt in op de History API, zodat client-side route-wijzigingen in React Router automatisch worden gevolgd.

---

Vue

Voor Vue-apps, voeg het snippet toe aan uw index.html-bestand (in de project-root of de public/-directory afhankelijk van uw setup).

Open index.html en plak het snippet in de <head>-tag:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My App</title>
    <!-- MetriXs tracker -->
    <script defer data-domain="yourdomain.com" src="https://app.metrixs.eu/tracker.js?v=1.1.0&k=<your-verification-key>"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

De tracker gebruikt de History API, zodat Vue Router-navigatie automatisch wordt gevolgd zonder extra configuratie.

---

Angular

Voor Angular, voeg het snippet toe aan uw index.html-bestand in de src/-directory.

Open src/index.html en plak het snippet in de <head>-tag:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My App</title>
    <base href="/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- MetriXs tracker -->
    <script defer data-domain="yourdomain.com" src="https://app.metrixs.eu/tracker.js?v=1.1.0&k=<your-verification-key>"></script>
  </head>
  <body>
    <app-root></app-root>
  </body>
</html>

De tracker haakt in op de History API, zodat Angular Router-navigatie automatisch wordt gevolgd.

---

SvelteKit

Voor SvelteKit, voeg het snippet toe aan src/app.html, de HTML-sjabloon die elke pagina omhult.

Open src/app.html en plak het snippet in de <head>-tag:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
    <meta name="viewport" content="width=device-width" />
    <!-- MetriXs tracker -->
    <script defer data-domain="yourdomain.com" src="https://app.metrixs.eu/tracker.js?v=1.1.0&k=<your-verification-key>"></script>
    %sveltekit.head%
  </head>
  <body data-sveltekit-preload-data="hover">
    <div style="display: contents">%sveltekit.body%</div>
  </body>
</html>

---

Astro

Voor Astro, voeg het snippet toe aan uw basis-layout-component. De meeste Astro-projecten hebben een src/layouts/BaseLayout.astro of soortgelijk bestand.

Open uw layout-bestand en voeg het snippet toe in de <head>:

---
const { title } = Astro.props
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>{title}</title>
    <!-- MetriXs tracker -->
    <script defer data-domain="yourdomain.com" src="https://app.metrixs.eu/tracker.js?v=1.1.0&k=<your-verification-key>"></script>
  </head>
  <body>
    <slot />
  </body>
</html>

Als u meerdere layouts heeft, voeg het toe aan elke layout, of maak een gedeelde <head>-component die u overal importeert.

---

Gatsby

Voor Gatsby, gebruik de ingebouwde Script-component in uw root-layout. Gatsby beveelt dit aan boven het bewerken van gatsby-ssr.js voor prestaties.

Open src/pages/index.tsx (of elk paginabestand) en voeg de Gatsby Script-component toe. Voor site-brede tracking, voeg het toe aan uw layout-component:

import { Script } from 'gatsby'

// Inside your layout component's return:
<Script
  defer
  data-domain="yourdomain.com"
  src="https://app.metrixs.eu/tracker.js?v=1.1.0&k=<your-verification-key>"
  strategy="idle"
/>

Alternatief, u kunt het ruwe snippet toevoegen aan gatsby-ssr.js:

export const onRenderBody = ({ setHeadComponents }) => {
  setHeadComponents([
    <script
      key="metrixs"
      defer
      data-domain="yourdomain.com"
      src="https://app.metrixs.eu/tracker.js?v=1.1.0&k=<your-verification-key>"
    />,
  ])
}

---

WordPress

De eenvoudigste manier is de officiële MetriXs Analytics-plugin (zie de WordPress-pluginhandleiding voor de volledige stapsgewijze uitleg): deze injecteert de tracker op elke pagina, verifieert uw site automatisch (geen ) en kan WooCommerce-omzet serverzijde volgen.

1. Installeer en activeer de MetriXs Analytics-plugin in WordPress
2. Maak een gratis account aan op app.metrixs.eu en voeg uw site toe
3. Maak een site-API-key in het dashboard (Settings → Sites → API keys) en kopieer deze
4. Ga in WordPress naar Settings → MetriXs Analytics, plak de key en sla op
5. Klik op Connect & verify site. Klaar

Liever geen plugin? Er zijn twee manieren om de tracker handmatig toe te voegen. Beide vereisen een child-theme zodat de tracker thema-updates overleeft.

Optie A: Via functions.php (aanbevolen)

Open de functions.php van uw child-theme en voeg toe:

add_action('wp_head', function () {
    ?>
    <script defer data-domain="yourdomain.com" src="https://app.metrixs.eu/tracker.js?v=1.1.0&k=<your-verification-key>"></script>
    <?php
});

Dit haakt in op wp_head, dat binnen de <head>-tag van elke pagina wordt uitgevoerd.

Optie B: Via een plugin

Installeer de “WPCode” of “Insert Headers and Footers”-plugin, en plak het snippet in de “Header”-sectie. Dit is eenvoudiger als u geen themabestanden wilt bewerken.

---

PrestaShop

De makkelijkste manier is de officiële MX Cookieless Analytics-module (het volledige stappenplan staat in de PrestaShop-moduleguide): hij zet de tracker op elke pagina, verifieert je winkel automatisch () en stuurt order_completed-events server-side — zo worden omleidingsbetalingsmethoden zoals iDEAL of Carte Bancaire betrouwbaar gemeten.

1. Download de module-ZIP van de GitHub-releases
2. Ga in de backoffice naar Modules → Modulebeheer → Module uploaden
3. Maak een gratis account aan op app.metrixs.eu, voeg je winkel toe en maak een sitesleutel aan (Instellingen → Sites → API-sleutels)
4. Plak de sleutel in de module-instellingen en sla op — de verificatie gaat automatisch
5. Zet Enable tracking aan. Klaar

Liever zonder module? Voeg de tracker toe in je thema: open themes/your-theme/templates/_partials/head.tpl (of gebruik een childthema) en voeg het standaardfragment uit de sectie Plain HTML hierboven toe.

---

Grav

De makkelijkste manier is de officiële MX Cookieless Analytics-plugin (het volledige stappenplan staat in de Grav-plugingids): hij zet de tracker op elke pagina, verifieert je site automatisch () en blijft strikte opt-in.

1. Voer bin/gpm install mx-cookieless-analytics uit vanuit de Grav-root (of installeer hem vanuit de pluginlijst van de beheeromgeving)
2. Maak een gratis account aan op app.metrixs.eu, voeg je site toe en maak een sitesleutel aan (Instellingen → Sites → API-sleutels)
3. Plak de sleutel in de plugin-instellingen en sla op — de verificatie gaat automatisch
4. Zet Enable tracking aan. Klaar

Liever zonder plugin? Grav-templates geven de assetsmanager standaard weer, dus je kunt ook {% do assets.addJs('https://app.metrixs.eu/tracker.js', { loading: 'defer' }) %} aanroepen in je thema of het standaardfragment uit de sectie Plain HTML hierboven toevoegen.

---

Craft CMS

De makkelijkste manier is de officiële MX Cookieless Analytics-plugin (het volledige stappenplan staat in de Craft CMS-plugingids): hij zet de tracker op elke pagina, verifieert je site automatisch () en blijft strikte opt-in.

1. Voer composer require metrixs/mx-cookieless-analytics uit vanuit je Craft-projectroot (of installeer hem vanuit de Plugin Store)
2. Maak een gratis account aan op app.metrixs.eu, voeg je site toe en maak een sitesleutel aan (Instellingen → Sites → API-sleutels)
3. Plak de sleutel in de plugin-instellingen en sla op — de verificatie gaat automatisch
4. Zet Enable tracking aan. Klaar

Liever zonder plugin? Craft-templates renderen de assetsmanager standaard, dus je kunt de tracker ook in je thema registreren met {% do view.registerJsFile('https://app.metrixs.eu/tracker.js', { defer: true, 'data-domain': 'yourdomain.com' }) %}, of het standaardfragment uit de sectie Plain HTML hierboven toevoegen.

---

Shopware

De makkelijkste manier is de officiële MX Cookieless Analytics-plugin (zie de Shopware-plugingids voor de volledige stap-voor-stap): hij injecteert de tracker op elke pagina, verifieert je shop automatisch en blijft strikt opt-in. Ondersteunt zelf gehost Shopware 6.5 en 6.6 (Shopware Cloud nog niet).

1. Download de plugin-ZIP van de GitHub-releases
2. Ga in de administratie naar Extensies → Mijn extensies → Extensie uploaden
3. Maak een gratis account op app.metrixs.eu, voeg je shop toe en maak een site-API-key (Instellingen → Sites → API-keys)
4. Plak de key bij de plugin-instellingen en sla op — verificatie gaat automatisch
5. Zet Enable tracking aan. Klaar

Liever zonder plugin? Voeg het snippet toe aan je thema: open custom/plugins/jouw-thema/src/Resources/views/storefront/layout/meta.html.twig (extend het blok layout_head_javascript_hmr_mode, roep eerst {{ parent() }} aan) en voeg het standaardsnippet uit de Plain HTML-sectie hierboven toe.

---

Shopify

MetriXs heeft een speciale Shopify-app, een-klik installatie, geen code-bewerking nodig. De app verifieert automatisch uw domein, injecteert de tracker via een App-Embed-blok, en activeert een webpixel voor checkout-tracking.

Bewerk theme.liquid niet handmatig. Installeer in plaats daarvan de app:

1. Ga naar de MetriXs-app op Shopify
2. Klik op Installeren
3. Activeer het “MetriXs Analytics”-App-Embed-blok in uw themabewerker (een klik, de app geeft u een directe link)
4. Kies een plan (Free, Basic, Team of Pro)
5. Klaar, storefront-pageviews + checkout-events + omzet verschijnen automatisch in uw dashboard

Zie de Shopify-integratiehandleiding voor de volledige uitsplitsing van storefront-tracking, checkout-pixel, omzet en de conversietrechter.

Als u liever alleen de storefront volgt (geen checkout/omzet) zonder de app te installeren, kunt u nog steeds het snippet in theme.liquid plakken zoals voor andere platforms hierboven beschreven, maar u mist de checkout-pixel en commerce-metrics.

---

Webflow

Voor Webflow, gebruik de Custom Code-functie (vereist een betaald site-plan).

1. Ga naar Project Settings > Custom Code
2. Plak het snippet in de Head code-sectie:

<script defer data-domain="yourdomain.com" src="https://app.metrixs.eu/tracker.js?v=1.1.0&k=<your-verification-key>"></script>

3. Klik op Save Changes
4. Publiceer uw site

De tracker laadt op elke gepubliceerde pagina.

---

Squarespace

Voor Squarespace, gebruik Code Injection (vereist een Business of Commerce-plan).

1. Ga naar Settings > Advanced > Code Injection
2. Plak het snippet in de Header-sectie:

<script defer data-domain="yourdomain.com" src="https://app.metrixs.eu/tracker.js?v=1.1.0&k=<your-verification-key>"></script>

3. Klik op Save

De tracker laadt op elke pagina van uw site.

---

Wix

Voor Wix, gebruik de Custom Code-functie (vereist een betaald plan).

1. Ga naar uw Wix Dashboard > Settings > Custom Code
2. Klik op + Add Custom Code
3. Noem het “MetriXs”
4. Plak het snippet:

<script defer data-domain="yourdomain.com" src="https://app.metrixs.eu/tracker.js?v=1.1.0&k=<your-verification-key>"></script>

5. Stel Place code in in op Head
6. Stel Apply code to in op All pages
7. Klik op Apply

---

Plain HTML

Voor een plain-HTML-website, plak het snippet in de <head>-tag van elke pagina die u wilt volgen:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Website</title>
    <!-- MetriXs tracker -->
    <script defer data-domain="yourdomain.com" src="https://app.metrixs.eu/tracker.js?v=1.1.0&k=<your-verification-key>"></script>
  </head>
  <body>
    <h1>Hello world</h1>
  </body>
</html>

Als uw site een gedeeld headerbestand of sjabloon gebruikt (zoals PHP-includes), voeg het daar een keer toe in plaats van op elke pagina.