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

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

WordPress

There are two ways to add the tracker to WordPress. 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"></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.

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:

Go to the MetriXs app on Shopify
Click Install
Enable the “MetriXs Analytics” App Embed block in your theme editor (one click — the app gives you a direct link)
Choose a plan (Free, Basic, Team, or Pro)
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).

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

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

Click Save Changes
Publish your site

The tracker loads on every published page.

Squarespace

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

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

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

Click Save

The tracker loads on every page of your site.

Wix

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

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

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

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