Aller au contenu
Se connecterEssai gratuit
Se connecterEssai

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.

Astuce : copiez toujours le snippet exact depuis votre tableau de bord MetriXs plutôt que le snippet générique ci-dessous — il contient la clé de vérification de votre site (&k=...), que MetriXs utilise pour vérifier votre site.

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

Next.js

Section intitulée « 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?v=1.1.0&k=<your-verification-key>"
          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

Section intitulée « 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?v=1.1.0&k=<your-verification-key>"></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

Section intitulée « 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?v=1.1.0&k=<your-verification-key>"></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

Section intitulée « 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?v=1.1.0&k=<your-verification-key>"></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

Section intitulée « 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?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

Section intitulée « 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?v=1.1.0&k=<your-verification-key>"></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

Section intitulée « 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?v=1.1.0&k=<your-verification-key>"
  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?v=1.1.0&k=<your-verification-key>"
    />,
  ])
}

WordPress

Section intitulée « WordPress »

Le plus simple est d’utiliser l’extension officielle MetriXs Analytics (voir le guide du plugin WordPress pour le pas-a-pas complet) : elle injecte le tracker sur chaque page, vérifie votre site automatiquement et peut suivre le chiffre d’affaires WooCommerce côté serveur.

  1. Installez et activez l’extension MetriXs Analytics dans WordPress
  2. Créez un compte gratuit sur app.metrixs.eu et ajoutez votre site
  3. Créez une clé API de site dans le tableau de bord (Settings → Sites → API keys) et copiez-la
  4. Dans WordPress, allez dans Settings → MetriXs Analytics, collez la clé et enregistrez
  5. Cliquez sur Connect & verify site. C’est terminé

Pas d’extension ? Il y a deux façons d’ajouter le tracker manuellement. 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é)

Section intitulée « 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?v=1.1.0&k=<your-verification-key>"></script>
    <?php
});

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

Option B : Utiliser un plugin

Section intitulée « 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.

PrestaShop

Section intitulée « PrestaShop »

La manière la plus simple est le module officiel MX Cookieless Analytics (le pas-à-pas complet se trouve dans le guide du module PrestaShop) : il injecte le tracker sur chaque page, vérifie votre boutique automatiquement et envoie les événements order_completed côté serveur — les méthodes de paiement par redirection comme iDEAL ou Carte Bancaire sont donc bien capturées.

  1. Téléchargez le ZIP du module depuis les releases GitHub
  2. Dans le back-office, allez dans Modules → Gestionnaire de modules → Téléverser un module
  3. Créez un compte gratuit sur app.metrixs.eu, ajoutez votre boutique et créez une clé API (Réglages → Sites → Clés API)
  4. Collez la clé dans les réglages du module et enregistrez — la vérification est automatique
  5. Activez Enable tracking. C’est fait

Sans module ? Ajoutez le tracker dans votre thème : ouvrez themes/your-theme/templates/_partials/head.tpl (ou utilisez un thème enfant) et ajoutez l’extrait standard de la section HTML simple ci-dessus.

Grav

Section intitulée « Grav »

La manière la plus simple est le plugin officiel MX Cookieless Analytics (le pas-à-pas complet se trouve dans le guide du plugin Grav) : il injecte le tracker sur chaque page, vérifie votre site automatiquement ( nécessaire) et reste strictement optionnel.

  1. Exécutez bin/gpm install mx-cookieless-analytics depuis la racine Grav (ou installez-le depuis la liste des plugins de l’admin)
  2. Créez un compte gratuit sur app.metrixs.eu, ajoutez votre site et créez une clé API (Réglages → Sites → Clés API)
  3. Collez la clé dans les réglages du plugin et enregistrez — la vérification est automatique
  4. Activez Enable tracking. C’est fait

Sans plugin ? Les templates Grav affichent le gestionnaire d’assets par défaut, donc vous pouvez aussi appeler {% do assets.addJs('https://app.metrixs.eu/tracker.js', { loading: 'defer' }) %} dans votre thème ou ajouter l’extrait standard de la section HTML simple ci-dessus.

Craft CMS

Section intitulée « Craft CMS »

La manière la plus simple est le plugin officiel MX Cookieless Analytics (le pas-à-pas complet se trouve dans le guide du plugin Craft CMS) : il injecte le tracker sur chaque page, vérifie votre site automatiquement et reste strictement optionnel.

  1. Exécutez composer require metrixs/mx-cookieless-analytics depuis la racine de votre projet Craft (ou installez-le depuis le Plugin Store)
  2. Créez un compte gratuit sur app.metrixs.eu, ajoutez votre site et créez une clé API (Réglages → Sites → Clés API)
  3. Collez la clé dans les réglages du plugin et enregistrez — la vérification est automatique
  4. Activez Enable tracking. C’est fait

Sans plugin ? Les templates Craft affichent le gestionnaire d’assets par défaut, donc vous pouvez aussi enregistrer le tracker dans votre thème avec {% do view.registerJsFile('https://app.metrixs.eu/tracker.js', { defer: true, 'data-domain': 'yourdomain.com' }) %}, ou ajouter l’extrait standard de la section HTML simple ci-dessus.

Shopware

Section intitulée « Shopware »

Le plus simple est le plugin officiel MX Cookieless Analytics (voir le guide du plugin Shopware pour la procédure complète) : il injecte le tracker sur chaque page, vérifie votre boutique automatiquement et reste strictement opt-in. Prend en charge Shopware 6.5 et 6.6 auto-hébergé (Shopware Cloud pas encore pris en charge).

  1. Téléchargez le ZIP du plugin depuis les releases GitHub
  2. Dans l’administration, allez dans Extensions → Mes extensions → Téléverser une extension
  3. Créez un compte gratuit sur app.metrixs.eu, ajoutez votre boutique et créez une clé API de site (Paramètres → Sites → Clés API)
  4. Collez la clé dans les paramètres du plugin et enregistrez — la vérification est automatique
  5. Activez Enable tracking. C’est terminé

Sans plugin ? Ajoutez le snippet à votre thème : ouvrez custom/plugins/votre-theme/src/Resources/views/storefront/layout/meta.html.twig (étendez le bloc layout_head_javascript_hmr_mode, en appelant d’abord {{ parent() }}) et ajoutez le snippet standard de la section Plain HTML ci-dessus.

Shopify

Section intitulée « 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 :

  1. Allez à l’application MetriXs sur Shopify
  2. Cliquez sur Installer
  3. Activez le bloc “MetriXs Analytics” App Embed dans votre éditeur de thème (en un clic, l’application vous donne un lien direct)
  4. Choisissez un plan (Free, Basic, Team ou Pro)
  5. 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

Section intitulée « Webflow »

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

  1. Allez dans Project Settings > Custom Code
  2. Collez l’extrait dans la section Head code :
<script defer data-domain="yourdomain.com" src="https://app.metrixs.eu/tracker.js?v=1.1.0&k=<your-verification-key>"></script>
  1. Cliquez sur Save Changes
  2. Publiez votre site

Le tracker se charge sur chaque page publiée.

Squarespace

Section intitulée « Squarespace »

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

  1. Allez dans Settings > Advanced > Code Injection
  2. Collez l’extrait dans la section Header :
<script defer data-domain="yourdomain.com" src="https://app.metrixs.eu/tracker.js?v=1.1.0&k=<your-verification-key>"></script>
  1. Cliquez sur Save

Le tracker se charge sur chaque page de votre site.

Wix

Section intitulée « Wix »

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

  1. Allez dans votre Wix Dashboard > Settings > Custom Code
  2. Cliquez sur + Add Custom Code
  3. Nommez-le “MetriXs”
  4. Collez l’extrait :
<script defer data-domain="yourdomain.com" src="https://app.metrixs.eu/tracker.js?v=1.1.0&k=<your-verification-key>"></script>
  1. Définissez Place code in sur Head
  2. Définissez Apply code to sur All pages
  3. Cliquez sur Apply

Plain HTML

Section intitulée « 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?v=1.1.0&k=<your-verification-key>"></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.