Zum Hauptinhalt springen
Zenovaydocs
5 Min. Lesedauer

Zenovay Analytics zu Astro hinzufügen

Zenovay Analytics bietet Astro-Entwicklern eine leichtgewichtige, datenschutzorientierte Möglichkeit zu verstehen, wie Besucher mit ihren Seiten interagieren. Ob Sie einen statischen Blog, eine Dokumentationsseite oder eine inhaltsgetriebene Marketing-Seite mit Astro erstellen — Zenovay lässt sich mit einem einzigen Script-Tag einbinden und beginnt sofort, Seitenaufrufe, Referrer, Gerätedaten und geografische Erkenntnisse in Echtzeit zu erfassen. Anders als umfangreiche Analytics-Suiten, die Ihren Lighthouse-Score verschlechtern, lädt das Zenovay-Tracking-Skript asynchron unter 1 KB und setzt standardmäßig keine Cookies, wodurch Ihre Seite schnell und GDPR-freundlich bleibt. Diese Anleitung führt Sie durch Installation, benutzerdefinierte Ereignisverfolgung, View-Transitions-Unterstützung und den Cookieless-Modus, damit Sie in etwa zwei Minuten vollständige Analytics-Abdeckung erreichen.

Schnellstart (2 Minuten)

Fügen Sie das Zenovay-Tracking-Skript zu Ihrem Astro-Layout hinzu – das war's. Keine npm-Pakete, keine Build-Plugins, keine Konfigurationsdateien.

Schritt 1: Ihren Tracking-Code abrufen

Melden Sie sich bei Ihrem Zenovay-Dashboard an und kopieren Sie Ihren Tracking-Code aus Settings → Tracking Code.

Schritt 2: Zum Layout hinzufügen

Öffnen Sie Ihre Haupt-Astro-Layout-Datei und fügen Sie den Script-Tag innerhalb von <head> hinzu:

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>

Das war's! Zenovay verfolgt automatisch Seitenaufrufe auf jeder Seite, die dieses Layout verwendet.

Schritt 3: Installation überprüfen

Besuchen Sie Ihre Seite in einem Browser und öffnen Sie das Zenovay-Dashboard. Innerhalb weniger Sekunden sollte ein Echtzeit-Besucher erscheinen.

Holen Sie Ihren Tracking-Code aus dem Zenovay-Dashboard. Ersetzen Sie YOUR_TRACKING_CODE durch Ihren tatsächlichen Code.

Benutzerdefinierte Ereignisse

Verfolgen Sie Button-Klicks, Formularübermittlungen und andere Interaktionen mit der globalen zenovay-Funktion.

Inline-Skript in Astro-Komponenten

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>

Benutzerdefinierte Ereignisse in Framework-Komponenten

Wenn Sie React-, Vue- oder Svelte-Islands innerhalb von Astro verwenden, rufen Sie window.zenovay direkt auf:

src/components/DownloadButton.tsx (React island)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>;
}

SPA-Navigation mit View Transitions

Wenn Sie Astro View Transitions verwenden, erkennt Zenovay clientseitige Routenänderungen automatisch und erfasst für jede Navigation einen neuen Seitenaufruf. Keine zusätzliche Konfiguration erforderlich.

src/layouts/Layout.astro (mit 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 hört auf die Browser History API (pushState / popstate), sodass es mit jeder clientseitigen Navigationsmethode funktioniert, einschließlich View Transitions.

Cookieless-Modus

Für datenschutzfreundliches Tracking ohne Cookies oder localStorage fügen Sie das Attribut data-cookieless hinzu:

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

Im Cookieless-Modus verwendet Zenovay einen serverseitigen Hash des IP-Subnetzes, des User-Agents und eines täglich rotierenden Salts des Besuchers, um eindeutige Besucher zu zählen, ohne etwas auf dem Clientgerät zu speichern.

Benutzer identifizieren

Wenn Ihre Astro-Seite authentifizierte Bereiche hat, identifizieren Sie eingeloggte Benutzer:

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

Ziele und Umsatz verfolgen

Ziel- und UmsatzverfolgungJavaScript
// 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');
}

TypeScript-Unterstützung

Fügen Sie Typdeklarationen hinzu, damit TypeScript window.zenovay erkennt:

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

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

Content Collections (Blog-Analytics)

Wenn Sie Astro Content Collections für einen Blog verwenden, wird jeder Beitrag automatisch verfolgt, solange er über Ihr Layout gerendert wird. Sie können beitragsspezifische Metadaten zu Ereignissen hinzufügen:

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 erfasst die Seiten-URL und den Titel automatisch, sodass jeder Blog-Beitrag als separate Seite in Ihrem Analytics-Dashboard erscheint.

Nächste Schritte

Ihre Astro-Seite verfolgt nun mit Zenovay! Sehen Sie Ihre Analytics im Dashboard ein.

Vertiefen Sie Ihr Wissen:

War diese Seite hilfreich?