Aller au contenu principal
Zenovaydocs
6 min de lecture

Installation du script de suivi

Ajoutez l'analytique Zenovay à votre site avec une seule ligne de code. Aucune configuration requise.

Installation rapide (30 secondes)

Copiez ce script et collez-le dans la section <head> de votre site :

Basic InstallationHTML
<!-- Zenovay Analytics v2.0.6 -->
<script defer
data-tracking-code="YOUR_TRACKING_CODE"
src="https://api.zenovay.com/z.js">
</script>

Remplacez YOUR_TRACKING_CODE par votre code de suivi du Tableau de bord Zenovay. Il ressemble à ZV_ABC123XYZ.

La carte du script de suivi dans les paramètres du domaine affichant le snippet du script avec les onglets HTML, React, Next.js et First-Party et un bouton Vérifier l'installation
Trouvez votre code de suivi sous Domaines → votre site → Paramètres généraux.

C'est tout ! Le script suit automatiquement :

  • Les pages vues
  • Les sessions des visiteurs
  • La localisation géographique
  • Les informations sur l'appareil et le navigateur
  • Les sources de trafic
  • Les paramètres UTM

Installation spécifique au framework

HTML / Sites statiques

Ajoutez directement avant la balise fermante </head> :

index.htmlHTML
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<!-- Zenovay Analytics v2.0.6 -->
<script defer
  data-tracking-code="YOUR_TRACKING_CODE"
  src="https://api.zenovay.com/z.js">
</script>
</head>
<body>
<!-- Your content -->
</body>
</html>

React

Ajoutez le script dans useEffect du composant racine :

App.jsx or index.jsJSX
import { useEffect } from 'react';

function App() {
useEffect(() => {
  const script = document.createElement('script');
  script.src = 'https://api.zenovay.com/z.js';
  script.defer = true;
  script.setAttribute('data-tracking-code', 'YOUR_TRACKING_CODE');
  document.head.appendChild(script);
}, []);

return <div>Your App</div>;
}

export default App;

Next.js (App Router)

Ajoutez à votre fichier de layout racine :

app/layout.tsxTSX
import Script from 'next/script';

export default function RootLayout({ children }) {
return (
  <html lang="en">
    <head>
      <Script
        src="https://api.zenovay.com/z.js"
        data-tracking-code="YOUR_TRACKING_CODE"
        strategy="afterInteractive"
      />
    </head>
    <body>{children}</body>
  </html>
);
}

Next.js (Pages Router)

Ajoutez à votre _document.tsx :

pages/_document.tsxTSX
import { Html, Head, Main, NextScript } from 'next/document';
import Script from 'next/script';

export default function Document() {
return (
  <Html>
    <Head>
      <Script
        src="https://api.zenovay.com/z.js"
        data-tracking-code="YOUR_TRACKING_CODE"
        strategy="afterInteractive"
      />
    </Head>
    <body>
      <Main />
      <NextScript />
    </body>
  </Html>
);
}

Vue.js

Ajoutez à votre index.html ou utilisez dans App.vue :

index.htmlHTML
<!DOCTYPE html>
<html>
<head>
<!-- Zenovay Analytics -->
<script defer
  data-tracking-code="YOUR_TRACKING_CODE"
  src="https://api.zenovay.com/z.js">
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>

WordPress

Option 1 : Utiliser un plugin (Recommandé)

  1. Installez le plugin Insert Headers and Footers
  2. Allez à Settings → Insert Headers and Footers
  3. Collez ceci dans « Scripts in Header » :
WordPress Header ScriptHTML
<!-- Zenovay Analytics -->
<script defer
data-tracking-code="YOUR_TRACKING_CODE"
src="https://api.zenovay.com/z.js">
</script>

Option 2 : Éditer le thème

Ajoutez à header.php avant </head> :

wp-content/themes/your-theme/header.phpPHP
<!-- Zenovay Analytics -->
<script defer
data-tracking-code="YOUR_TRACKING_CODE"
src="https://api.zenovay.com/z.js">
</script>
</head>

Shopify

  1. Allez à Online Store → Themes
  2. Cliquez sur Actions → Edit code
  3. Ouvrez theme.liquid
  4. Ajoutez avant </head> :
theme.liquidHTML
<!-- Zenovay Analytics -->
<script defer
data-tracking-code="YOUR_TRACKING_CODE"
src="https://api.zenovay.com/z.js">
</script>
</head>

Webflow

  1. Allez à Project Settings → Custom Code
  2. Collez dans la section Head Code :
Webflow Head CodeHTML
<!-- Zenovay Analytics -->
<script defer
data-tracking-code="YOUR_TRACKING_CODE"
src="https://api.zenovay.com/z.js">
</script>

Squarespace

  1. Allez à Settings → Advanced → Code Injection
  2. Collez dans la section Header

Vérifier l'installation

1. Vérifier la console du navigateur

Ouvrez les outils de développement de votre navigateur (F12) et recherchez :

[Zenovay] Script executing... (v2.0.6)
Zenovay Analytics loaded { trackingCode: 'YOUR_TRACKING_CODE', enabled: true }

2. Activer le mode débogage

Pour voir les journaux détaillés, activez le mode débogage dans les paramètres généraux de votre domaine (Domaines → sélectionnez votre site → Général) ou ajoutez l'attribut de débogage :

Debug ModeHTML
<script defer
data-tracking-code="YOUR_TRACKING_CODE"
data-debug="true"
src="https://api.zenovay.com/z.js">
</script>

Pour une vue visuelle dans la page de chaque événement envoyé par votre traceur — type, propriétés, mode sans cookie, état GPC, état du consentement — activez le Debug Overlay dans les paramètres de votre domaine, puis chargez n'importe quelle page en ajoutant ?zenovay_debug=1 à l'URL. Les données personnelles sont masquées.

3. Vérifier le tableau de bord en temps réel

Visitez votre Tableau de bord Zenovay et vérifiez la vue en temps réel pour voir votre visite s'afficher en direct.

Attributs du script

Personnalisez le comportement avec les attributs de données :

AttributTypePar défautDescription
data-tracking-codestringrequisVotre code de suivi (par ex., ZV_ABC123)
data-debugbooleanfalseAfficher les journaux de la console
data-allow-localhostbooleanfalseSuivre les visites localhost

Protection contre les bloqueurs de publicités

Certains bloqueurs de publicités peuvent bloquer api.zenovay.com. Utilisez notre Proxy de première partie pour une précision de suivi à 100 % :

Si vous voyez des demandes bloquées dans Firefox ou Edge, configurez un Proxy de première partie pour acheminer le suivi via votre propre domaine.

First-Party Proxy ScriptHTML
<!-- First-Party Proxy (bypasses ad blockers) -->
<!-- Requires proxy setup - see: docs.zenovay.com/guides/first-party-tracking -->
<script defer
data-tracking-code="YOUR_TRACKING_CODE"
src="/api/_z/script.js">
</script>

Politique de sécurité du contenu (CSP)

Si votre site utilise les en-têtes CSP, ajoutez Zenovay :

CSP HeadersTEXT
Content-Security-Policy:
script-src 'self' https://api.zenovay.com;
connect-src 'self' https://api.zenovay.com;

Dépannage

Le script ne se charge pas

  1. Vérifiez les fautes de frappe dans votre code de suivi
  2. Vérifiez que le script est dans <head> et non <body>
  3. Vérifiez les en-têtes CSP - ajoutez api.zenovay.com aux sources autorisées
  4. Désactivez temporairement le bloqueur de publicités pour tester

Aucun événement dans le tableau de bord

  1. Attendez 30 secondes - les événements sont regroupés par lots
  2. Vérifiez la console du navigateur pour les erreurs
  3. Activez le mode débogage pour voir les journaux d'événements
  4. Essayez une fenêtre de navigation privée pour exclure les extensions

Le bloqueur de publicités bloque le script

Configurez un Proxy de première partie pour acheminer le suivi via votre domaine.

Utilisation de l'IA pour installer

Si vous utilisez des assistants de codage IA (Cursor, Lovable, Replit), consultez nos Invites d'intégration IA pour des invites prêtes à copier-coller.

Étapes suivantes

Cette page vous a-t-elle été utile ?