Aller au contenu principal
Zenovaydocs
5 min de lecture

Ajouter Zenovay Analytics à Astro

Ce guide couvre l'ajout de Zenovay Analytics à un site Astro : installation, suivi des événements personnalisés, support des View Transitions et mode sans cookie. Le tracker se charge de façon asynchrone en moins de 1 Ko et ne définit pas de cookies par défaut.

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, ouvrez Domaines, cliquez sur votre site et copiez l'extrait de script depuis la carte Script de suivi sur la page Général.

É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.

Remplacez YOUR_TRACKING_CODE par le code affiché sur la page Général de votre site sous Domaines.

Carte de script de suivi affichant l'extrait de script avec les onglets HTML, React, Next.js et First-Party
Copiez votre code de suivi depuis la carte Script de suivi sur la page des paramètres généraux de votre site.

É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',
});
}

Suivi des objectifs et des 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 est maintenant suivi par Zenovay ! Consultez vos analyses dans le tableau de bord.

Continuez à apprendre :

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