Flowsery Analytics in einem Astro-Projekt einrichten

Diese Anleitung führt Sie durch das Hinzufügen von Flowsery Analytics Tracking zu Ihrer Astro-Website.

Tracking-Snippet in Ihr Layout einfügen

Der beste Ansatz zum Laden von Scripts auf jeder Seite einer Astro-App ist über eine gemeinsame Layout-Komponente.

Öffnen (oder erstellen) Sie Ihre Haupt-Layout-Datei -- normalerweise unter src/layouts/Layout.astro.
Platzieren Sie das Flowsery Analytics Script-Tag innerhalb von <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>

Ersetzen Sie flid_****** durch die Website-ID aus Ihren Flowsery Analytics Einstellungen.

Stellen Sie sicher, dass jede Seite in Ihrem Projekt dieses Layout verwendet:

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: Astros integrierte Head-Verwaltung

Sie können das Script auch direkt in jede .astro-Seite einbetten:

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>

Funktionsfähigkeit überprüfen

Nachdem Sie eine der oben genannten Methoden bereitgestellt haben:

Erstellen und veröffentlichen Sie Ihre Astro-Website
Navigieren Sie zu Ihrer Live-URL
Öffnen Sie Ihr Flowsery Analytics Dashboard und suchen Sie nach eingehenden Seitenaufrufen
Die ersten Datenpunkte können einige Minuten benötigen, um zu erscheinen

Für weitere Optionen wie Localhost-Tracking, benutzerdefinierte API-Endpunkte oder Cross-Domain-Konfiguration lesen Sie die Script-Konfigurationsreferenz.

Flowsery Analytics ignoriert standardmäßig Localhost-Traffic, damit Sie Ihre Zahlen während der Entwicklung nicht verfälschen.