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"></script>

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"
          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"></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"></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"></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"></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"></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"
  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"
    />,
  ])
}

WordPress

Er zijn twee manieren om de tracker aan WordPress 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"></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.

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:

Ga naar de MetriXs-app op Shopify
Klik op Installeren
Activeer het “MetriXs Analytics”-App-Embed-blok in uw themabewerker (een klik, de app geeft u een directe link)
Kies een plan (Free, Basic, Team of Pro)
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).

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

<script defer data-domain="yourdomain.com" src="https://app.metrixs.eu/tracker.js"></script>

Klik op Save Changes
Publiceer uw site

De tracker laadt op elke gepubliceerde pagina.

Squarespace

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

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

<script defer data-domain="yourdomain.com" src="https://app.metrixs.eu/tracker.js"></script>

Klik op Save

De tracker laadt op elke pagina van uw site.

Wix

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

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

<script defer data-domain="yourdomain.com" src="https://app.metrixs.eu/tracker.js"></script>

Stel Place code in in op Head
Stel Apply code to in op All pages
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"></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.