Configurer Flowsery Analytics dans un projet Astro

Ce guide vous accompagne pour ajouter le suivi Flowsery Analytics a votre site Astro.

Inserer le snippet de suivi dans votre layout

La meilleure approche pour charger des scripts sur chaque page d'une application Astro est d'utiliser un composant de layout partage.

Ouvrez (ou creez) votre fichier de layout principal -- generalement situe dans src/layouts/Layout.astro.
Placez la balise script de Flowsery Analytics dans le <head> :

JavaScript

---
// src/layouts/Layout.astro
export interface Props {
  title: string;
}
 
const { title } = Astro.props;
---
 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="description" content="Astro description" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <title>{title}</title>
    <script
      defer
      data-fl-website-id="flid_******"
      src="https://cdn.flowsery.com/main.js"
    ></script>
  </head>
  <body>
    <slot />
  </body>
</html>

Remplacez flid_****** par l'identifiant de site affiche dans vos parametres Flowsery Analytics.

Confirmez que chaque page de votre projet utilise ce layout :

HTML

---
// src/pages/index.astro
import Layout from '../layouts/Layout.astro';
---
 
<Layout title="Welcome to Astro">
  <main>
    <h1>Welcome to Astro</h1>
  </main>
</Layout>

Alternative : gestion integree du head dans Astro

Vous pouvez egalement integrer le script directement dans n'importe quelle page .astro :

HTML

---
// Any .astro page
---
 
<html lang="en">
  <head>
    <script defer data-fl-website-id="flid_******" src="https://cdn.flowsery.com/main.js"></script>
  </head>
  <body>
    <!-- Your page content -->
  </body>
</html>

Verifier que tout fonctionne

Une fois l'une des methodes ci-dessus deployee :

Compilez et publiez votre site Astro
Accedez a votre URL en production
Ouvrez votre tableau de bord Flowsery Analytics et recherchez les pages vues entrantes
Les premieres donnees peuvent prendre quelques minutes a apparaitre

Pour des options supplementaires telles que le suivi en localhost, les endpoints API personnalises ou la configuration inter-domaines, consultez la reference de configuration du script.

Flowsery Analytics ignore le trafic localhost par defaut afin de ne pas gonfler vos statistiques pendant le developpement.