Aller au contenu principal
Zenovaydocs
6 min de lecture

Ajouter Zenovay Analytics à Astro

Zenovay Analytics offre aux développeurs Astro une façon légère et axée sur la confidentialité de comprendre comment les visiteurs interagissent avec leurs sites. Que vous construisiez un blog statique, un site de documentation ou une page marketing axée sur le contenu avec Astro, Zenovay s'intègre avec une seule balise script et commence à collecter des pages vues, des référents, des données d'appareils et des informations géographiques en temps réel. Contrairement aux suites analytiques lourdes qui ralentissent votre score Lighthouse, le tracker Zenovay se charge de façon asynchrone en moins de 1 Ko et ne définit jamais de cookies par défaut, ce qui rend votre site rapide et conforme au RGPD dès le départ. Ce guide vous accompagne dans l'installation, le suivi des événements personnalisés, la prise en charge des View Transitions et le mode sans cookie, afin que vous puissiez passer de zéro à une couverture analytique complète en environ deux minutes.

Démarrage rapide (2 minutes)

Ajoutez le script de suivi Zenovay à votre layout Astro et c'est terminé. Aucun paquet npm, aucun plugin de compilation, aucun fichier de configuration.

Étape 1 : Obtenez votre code de suivi

Connectez-vous à votre tableau de bord Zenovay et copiez votre code de suivi depuis Paramètres → Code de suivi.

Étape 2 : Ajouter au layout

Ouvrez votre fichier de layout Astro principal et ajoutez la balise script dans <head> :

src/layouts/Layout.astroASTRO
---
// src/layouts/Layout.astro
interface Props {
title: string;
}
const { title } = Astro.props;
---
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>{title}</title>
  <script
    defer
    data-tracking-code="YOUR_TRACKING_CODE"
    src="https://api.zenovay.com/z.js"
  ></script>
</head>
<body>
  <slot />
</body>
</html>

C'est tout ! Zenovay suivra automatiquement les pages vues sur chaque page qui utilise ce layout.

Étape 3 : Vérifier votre installation

Visitez votre site dans un navigateur et ouvrez le tableau de bord Zenovay. Vous devriez voir un visiteur en temps réel apparaître en quelques secondes.

Obtenez votre code de suivi depuis le Tableau de bord Zenovay. Remplacez YOUR_TRACKING_CODE par votre code réel.

Événements personnalisés

Suivez les clics sur les boutons, les soumissions de formulaires et d'autres interactions en utilisant la fonction globale zenovay.

Script intégré dans les composants Astro

src/components/SignupButton.astroASTRO
---
// src/components/SignupButton.astro
interface Props {
plan: string;
}
const { plan } = Astro.props;
---
<button id="signup-btn" data-plan={plan}>
Sign Up for {plan}
</button>

<script>
const btn = document.getElementById('signup-btn');
btn?.addEventListener('click', () => {
  if (window.zenovay) {
    window.zenovay('track', 'signup_click', {
      plan: btn.dataset.plan,
    });
  }
});
</script>

Événements personnalisés dans les composants de framework

Si vous utilisez des îlots React, Vue ou Svelte dans Astro, appelez window.zenovay directement :

src/components/DownloadButton.tsx (îlot React)TSX
export default function DownloadButton({ file }: { file: string }) {
const handleClick = () => {
  if (window.zenovay) {
    window.zenovay('track', 'file_download', { file });
  }
};

return <button onClick={handleClick}>Download {file}</button>;
}

Navigation SPA avec View Transitions

Si vous utilisez les View Transitions d'Astro, Zenovay détecte automatiquement les changements de route côté client et enregistre une nouvelle page vue pour chaque navigation. Aucune configuration supplémentaire n'est nécessaire.

src/layouts/Layout.astro (avec View Transitions)ASTRO
---
import { ViewTransitions } from 'astro:transitions';
---
<html lang="en">
<head>
  <ViewTransitions />
  <script
    defer
    data-tracking-code="YOUR_TRACKING_CODE"
    src="https://api.zenovay.com/z.js"
  ></script>
</head>
<body>
  <slot />
</body>
</html>

Zenovay écoute l'API History du navigateur (pushState / popstate) et fonctionne donc avec n'importe quelle méthode de navigation côté client, y compris les View Transitions.

Mode sans cookie

Pour un suivi respectueux de la vie privée sans cookies ni localStorage, ajoutez l'attribut data-cookieless :

Suivi sans cookieHTML
<script
defer
data-tracking-code="YOUR_TRACKING_CODE"
data-cookieless="true"
src="https://api.zenovay.com/z.js"
></script>

En mode sans cookie, Zenovay utilise un hachage côté serveur du sous-réseau IP du visiteur, de son agent utilisateur et d'un sel à rotation quotidienne pour compter les visiteurs uniques sans rien stocker sur l'appareil client.

Identifier les utilisateurs

Si votre site Astro comporte des zones authentifiées, identifiez les utilisateurs connectés :

Identifier un utilisateurJavaScript
// After login or on authenticated pages
if (window.zenovay) {
window.zenovay('identify', 'user_123', {
  email: '[email protected]',
  plan: 'pro',
});
}

Suivre les objectifs et les revenus

Suivi des objectifs et des revenusJavaScript
// Track a conversion goal
if (window.zenovay) {
window.zenovay('goal', 'newsletter_signup', { source: 'footer' });
}

// Track revenue
if (window.zenovay) {
window.zenovay('revenue', 49.99, 'USD');
}

Support TypeScript

Ajoutez des déclarations de types pour que TypeScript reconnaisse window.zenovay :

src/env.d.tsTypeScript
/// <reference types="astro/client" />

declare global {
interface Window {
  zenovay?: (...args: any[]) => void;
}
}

Collections de contenu (analytics de blog)

Si vous utilisez les Collections de contenu d'Astro pour un blog, chaque article est automatiquement suivi tant qu'il est rendu via votre layout. Vous pouvez ajouter des métadonnées spécifiques à l'article dans les événements :

src/pages/blog/[...slug].astroASTRO
---
import { getCollection } from 'astro:content';
import Layout from '../../layouts/Layout.astro';

export async function getStaticPaths() {
const posts = await getCollection('blog');
return posts.map((post) => ({
  params: { slug: post.slug },
  props: { post },
}));
}

const { post } = Astro.props;
const { Content } = await post.render();
---
<Layout title={post.data.title}>
<article>
  <h1>{post.data.title}</h1>
  <Content />
</article>
</Layout>

Zenovay capture automatiquement l'URL et le titre de la page, de sorte que chaque article de blog apparaît comme une page distincte dans votre tableau de bord analytique.

Prochaines étapes

Votre site Astro suit maintenant vos données avec Zenovay ! Consultez vos analyses dans le tableau de bord.

Continuez à apprendre :

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