Platform guides

The MetriXs tracker is a single <script> tag that goes in the <head> of your website. On every platform the snippet is the same, but where you put it differs.

Here is your snippet. Replace yourdomain.com with the domain you registered in MetriXs.

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

Tip: always copy the exact snippet from your MetriXs dashboard instead of the generic one above — it includes your site’s verification key (&k=...), which MetriXs uses to verify your site.

---

Next.js

In the App Router (recommended), add the script to your root layout so it loads on every page. Open app/layout.tsx (or app/layout.jsx) and add the snippet inside the <head> using 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>
  )
}

Using strategy="afterInteractive" means the tracker loads right after the page becomes interactive, which keeps your initial load fast while catching pageviews on client side route changes automatically.

If you are on the older Pages Router, add the same <Script> tag to pages/_app.tsx instead.

---

React

For React apps built with Vite or Create React App, add the snippet to your index.html file in the public/ directory. This is the simplest approach and works for all single page React setups.

Open public/index.html (or index.html in the project root for Vite) and paste the snippet inside the <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>

The tracker hooks into the History API, so client side route changes in React Router are tracked automatically.

---

Vue

For Vue apps, add the snippet to your index.html file (located in the project root or the public/ directory depending on your setup).

Open index.html and paste the snippet inside the <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>

The tracker uses the History API, so Vue Router navigation is tracked automatically without any extra configuration.

---

Angular

For Angular, add the snippet to your index.html file in the src/ directory.

Open src/index.html and paste the snippet inside the <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>

The tracker hooks into the History API, so Angular router navigation is tracked automatically.

---

SvelteKit

For SvelteKit, add the snippet to src/app.html, which is the HTML template that wraps every page.

Open src/app.html and paste the snippet inside the <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

For Astro, add the snippet to your base layout component. Most Astro projects have a src/layouts/BaseLayout.astro or similar file.

Open your layout file and add the snippet inside the <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>

If you have multiple layouts, add it to each one, or create a shared <head> component that you import everywhere.

---

Gatsby

For Gatsby, use the built in Script component in your root layout. Gatsby recommends this over editing gatsby-ssr.js for performance.

Open src/pages/index.tsx (or any page file) and add the Gatsby Script component. For site wide tracking, add it to your 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"
/>

Alternatively, you can add the raw snippet to 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

The easiest way is the official MetriXs Analytics plugin (see the WordPress plugin guide for the full step-by-step): it injects the tracker on every page, verifies your site automatically, and can track WooCommerce revenue server-side.

1. In WordPress, install and activate the MetriXs Analytics plugin
2. Create a free account at app.metrixs.eu and add your site
3. Create a site API key in the dashboard (Settings → Sites → API keys) and copy it
4. In WordPress, go to Settings → MetriXs Analytics, paste the key and save
5. Click Connect & verify site. You’re done

Prefer no plugin? There are two ways to add the tracker manually. Both require a child theme so the tracker survives theme updates.

Option A: Using functions.php (recommended)

Open your child theme’s functions.php and add:

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
});

This hooks into wp_head, which runs inside the <head> tag of every page.

Option B: Using a plugin

Install the “WPCode” or “Insert Headers and Footers” plugin, then paste the snippet into the “Header” section. This is easier if you do not want to edit theme files.

---

PrestaShop

The easiest way is the official MX Cookieless Analytics module (see the PrestaShop module guide for the full step-by-step): it injects the tracker on every page, verifies your shop automatically, and sends order_completed events server-side — so redirect-based payment methods like iDEAL or Carte Bancaire are captured.

1. Download the module ZIP from the GitHub releases
2. In the back office, go to Modules → Module Manager → Upload a module
3. Create a free account at app.metrixs.eu, add your shop and create a site API key (Settings → Sites → API keys)
4. In the module settings, paste the key and save — verification is automatic
5. Turn on Enable tracking. You’re done

Prefer no module? Add the tracker in your theme: open themes/your-theme/templates/_partials/head.tpl (or use a child theme) and add the standard snippet from the Plain HTML section above.

---

Grav

The easiest way is the official MX Cookieless Analytics plugin (see the Grav plugin guide for the full step-by-step): it injects the tracker on every page, verifies your site automatically, and stays strictly opt-in.

1. Run bin/gpm install mx-cookieless-analytics from your Grav root (or install it from the Admin plugin list)
2. Create a free account at app.metrixs.eu, add your site and create a site API key (Settings → Sites → API keys)
3. In the plugin settings, paste the key and save — verification is automatic
4. Turn on Enable tracking. You’re done

Prefer no plugin? Grav templates output the assets manager by default, so you can also call {{ assets.addJs('https://app.metrixs.eu/tracker.js', { loading: 'defer' }) }} in your theme, or add the standard snippet from the Plain HTML section above.

---

Craft CMS

The easiest way is the official MX Cookieless Analytics plugin (see the Craft CMS plugin guide for the full step-by-step): it injects the tracker on every page, verifies your site automatically, and stays strictly opt-in.

1. Run composer require metrixs/mx-cookieless-analytics from your Craft project root (or install it from the Plugin Store)
2. Create a free account at app.metrixs.eu, add your site and create a site API key (Settings → Sites → API keys)
3. In the plugin settings, paste the key and save — verification is automatic
4. Turn on Enable tracking. You’re done

Prefer no plugin? Craft templates render the assets manager by default, so you can also register the tracker in your theme with {% do view.registerJsFile('https://app.metrixs.eu/tracker.js', { defer: true, 'data-domain': 'yourdomain.com' }) %}, or add the standard snippet from the Plain HTML section above.

---

Shopware

The easiest way is the official MX Cookieless Analytics plugin (see the Shopware plugin guide for the full step-by-step): it injects the tracker on every page, verifies your shop automatically, and stays strictly opt-in. Supports self-hosted Shopware 6.5 and 6.6 (Shopware Cloud is not supported yet).

1. Download the plugin ZIP from the GitHub releases
2. In the administration, go to Extensions → My extensions → Upload extension
3. Create a free account at app.metrixs.eu, add your shop and create a site API key (Settings → Sites → API keys)
4. In the plugin settings, paste the key and save — verification is automatic
5. Turn on Enable tracking. You’re done

Prefer no plugin? Add the snippet to your theme: open custom/plugins/your-theme/src/Resources/views/storefront/layout/meta.html.twig (extend the layout_head_javascript_hmr_mode block, calling {{ parent() }} first) and add the standard snippet from the Plain HTML section above.

---

Shopify

MetriXs has a dedicated Shopify app — one-click install, no code editing needed. The app auto-verifies your domain, injects the tracker via an App Embed block, and activates a web pixel for checkout tracking.

Don’t manually edit theme.liquid. Install the app instead:

1. Go to the MetriXs app on Shopify
2. Click Install
3. Enable the “MetriXs Analytics” App Embed block in your theme editor (one click — the app gives you a direct link)
4. Choose a plan (Free, Basic, Team, or Pro)
5. You’re done — storefront pageviews + checkout events + revenue appear in your dashboard automatically

See the Shopify integration guide for the full breakdown of storefront tracking, checkout pixel, revenue, and the conversion funnel.

If you prefer to track only the storefront (no checkout/revenue) without installing the app, you can still paste the snippet into theme.liquid as described for other platforms above — but you’ll miss the checkout pixel and commerce metrics.

---

Webflow

For Webflow, use the Custom Code feature (requires a paid site plan).

1. Go to Project Settings > Custom Code
2. Paste the snippet into the Head code section:

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

3. Click Save Changes
4. Publish your site

The tracker loads on every published page.

---

Squarespace

For Squarespace, use Code Injection (requires a Business or Commerce plan).

1. Go to Settings > Advanced > Code Injection
2. Paste the snippet into the Header section:

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

3. Click Save

The tracker loads on every page of your site.

---

Wix

For Wix, use the Custom Code feature (requires a paid plan).

1. Go to your Wix Dashboard > Settings > Custom Code
2. Click + Add Custom Code
3. Name it “MetriXs”
4. Paste the snippet:

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

5. Set Place code in to Head
6. Set Apply code to to All pages
7. Click Apply

---

Plain HTML

For a plain HTML website, paste the snippet inside the <head> tag of every page you want to track:

<!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>

If your site uses a shared header file or template (like PHP includes), add it there once instead of on every page.