Guides par plateforme

Le tracker MetriXs est une seule balise <script> qui va dans le <head> de votre site web. Sur chaque plateforme l’extrait est le même, mais où vous le placez diffère.

Voici votre extrait. Remplacez yourdomain.com par le domaine que vous avez enregistré dans MetriXs.

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

Next.js

Dans l’App Router (recommandé), ajoutez le script à votre layout racine pour qu’il se charge sur chaque page. Ouvrez app/layout.tsx (ou app/layout.jsx) et ajoutez l’extrait dans le <head> en utilisant 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>
  )
}

Utiliser strategy="afterInteractive" signifie que le tracker se charge juste après que la page devienne interactive, ce qui garde votre chargement initial rapide tout en capturant les pages vues sur les changements de route côté client automatiquement.

Si vous êtes sur l’ancien Pages Router, ajoutez la même balise <Script> à pages/_app.tsx à la place.

React

Pour les apps React construites avec Vite ou Create React App, ajoutez l’extrait à votre fichier index.html dans le répertoire public/. C’est l’approche la plus simple et fonctionne pour toutes les configurations React en single page.

Ouvrez public/index.html (ou index.html à la racine du projet pour Vite) et collez l’extrait dans la balise <head> :

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

Le tracker s’accroche à l’History API, donc les changements de route côté client dans React Router sont suivis automatiquement.

Vue

Pour les apps Vue, ajoutez l’extrait à votre fichier index.html (situé à la racine du projet ou dans le répertoire public/ selon votre configuration).

Ouvrez index.html et collez l’extrait dans la balise <head> :

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

Le tracker utilise l’History API, donc la navigation Vue Router est suivie automatiquement sans configuration supplémentaire.

Angular

Pour Angular, ajoutez l’extrait à votre fichier index.html dans le répertoire src/.

Ouvrez src/index.html et collez l’extrait dans la balise <head> :

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

Le tracker s’accroche à l’History API, donc la navigation Angular Router est suivie automatiquement.

SvelteKit

Pour SvelteKit, ajoutez l’extrait à src/app.html, qui est le template HTML qui enveloppe chaque page.

Ouvrez src/app.html et collez l’extrait dans la balise <head> :

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

Pour Astro, ajoutez l’extrait à votre composant de layout de base. La plupart des projets Astro ont un fichier src/layouts/BaseLayout.astro ou similaire.

Ouvrez votre fichier de layout et ajoutez l’extrait dans le <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>

Si vous avez plusieurs layouts, ajoutez-le à chacun, ou créez un composant <head> partagé que vous importez partout.

Gatsby

Pour Gatsby, utilisez le composant Script intégré dans votre layout racine. Gatsby recommande ceci plutôt que d’éditer gatsby-ssr.js pour la performance.

Ouvrez src/pages/index.tsx (ou n’importe quel fichier de page) et ajoutez le composant Script de Gatsby. Pour le suivi à l’échelle du site, ajoutez-le à votre composant de layout :

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

Alternativement, vous pouvez ajouter l’extrait brut à gatsby-ssr.js :

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

WordPress

Il y a deux façons d’ajouter le tracker à WordPress. Les deux nécessitent un thème enfant pour que le tracker survive aux mises à jour du thème.

Option A : Utiliser functions.php (recommandé)

Ouvrez le functions.php de votre thème enfant et ajoutez :

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

Cela s’accroche à wp_head, qui s’exécute dans la balise <head> de chaque page.

Option B : Utiliser un plugin

Installez le plugin “WPCode” ou “Insert Headers and Footers”, puis collez l’extrait dans la section “Header”. C’est plus simple si vous ne voulez pas éditer de fichiers de thème.

Shopify

MetriXs a une application Shopify dédiée, installation en un clic, pas d’édition de code nécessaire. L’application vérifie automatiquement votre domaine, injecte le tracker via un bloc App Embed, et active un pixel web pour le suivi de paiement.

N’éditez pas theme.liquid manuellement. Installez l’application à la place :

Allez à l’application MetriXs sur Shopify
Cliquez sur Installer
Activez le bloc “MetriXs Analytics” App Embed dans votre éditeur de thème (en un clic, l’application vous donne un lien direct)
Choisissez un plan (Free, Basic, Team ou Pro)
C’est fait, les pages vues de boutique + les événements de paiement + le chiffre d’affaires apparaissent automatiquement dans votre tableau de bord

Voir le guide d’intégration Shopify pour la décomposition complète du suivi de boutique, du pixel de paiement, du chiffre d’affaires et de l’entonnoir de conversion.

Si vous préférez suivre uniquement la boutique (pas de paiement/chiffre d’affaires) sans installer l’application, vous pouvez toujours coller l’extrait dans theme.liquid comme décrit pour les autres plateformes ci-dessus, mais vous manquerez le pixel de paiement et les métriques de commerce.

Webflow

Pour Webflow, utilisez la fonctionnalité Custom Code (nécessite un plan de site payant).

Allez dans Project Settings > Custom Code
Collez l’extrait dans la section Head code :

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

Cliquez sur Save Changes
Publiez votre site

Le tracker se charge sur chaque page publiée.

Squarespace

Pour Squarespace, utilisez Code Injection (nécessite un plan Business ou Commerce).

Allez dans Settings > Advanced > Code Injection
Collez l’extrait dans la section Header :

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

Cliquez sur Save

Le tracker se charge sur chaque page de votre site.

Wix

Pour Wix, utilisez la fonctionnalité Custom Code (nécessite un plan payant).

Allez dans votre Wix Dashboard > Settings > Custom Code
Cliquez sur + Add Custom Code
Nommez-le “MetriXs”
Collez l’extrait :

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

Définissez Place code in sur Head
Définissez Apply code to sur All pages
Cliquez sur Apply

Plain HTML

Pour un site en HTML simple, collez l’extrait dans la balise <head> de chaque page que vous souhaitez suivre :

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

Si votre site utilise un fichier d’en-tête ou un template partagé (comme des includes PHP), ajoutez-le là une seule fois plutôt que sur chaque page.