メインコンテンツへスキップ
Zenovaydocs
3分で読めます

Astro に Zenovay Analytics を追加する

Zenovay Analytics は Astro 開発者に、訪問者がサイトとどのようにインタラクトするかを理解するための軽量でプライバシーファーストな方法を提供します。静的ブログ、ドキュメントサイト、Astro を使ったコンテンツ主体のマーケティングページのどれを構築していても、Zenovay はスクリプトタグ 1 つで組み込め、リアルタイムでページビュー・リファラー・デバイスデータ・地理的情報の収集を開始します。Lighthouse スコアを低下させる重量級のアナリティクスツールと異なり、Zenovay トラッカーは 1 KB 未満で非同期に読み込まれ、デフォルトでクッキーを設定しないため、サイトは高速かつ GDPR に適合した状態を保てます。このガイドでは、インストール、カスタムイベントトラッキング、View Transitions のサポート、クッキーレスモードまでを説明します。約 2 分で完全なアナリティクスカバレッジを実現できます。

クイックスタート（2 分）

Astro レイアウトに Zenovay のトラッキングスクリプトを追加するだけで完了です。npm パッケージも、ビルドプラグインも、設定ファイルも不要です。

ステップ 1：トラッキングコードを取得する

Zenovay ダッシュボードにサインインし、Settings → Tracking Code からトラッキングコードをコピーします。

ステップ 2：レイアウトに追加する

メインの Astro レイアウトファイルを開き、<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>

以上です！Zenovay はこのレイアウトを使用するすべてのページでページビューを自動的にトラッキングします。

ステップ 3：インストールを確認する

ブラウザでサイトにアクセスして Zenovay ダッシュボードを開きます。数秒以内にリアルタイムの訪問者が表示されるはずです。

Zenovay ダッシュボードから取得した実際のコードで YOUR_TRACKING_CODE を置き換えてください。

カスタムイベント

グローバルな zenovay 関数を使用して、ボタンのクリック、フォームの送信、その他のインタラクションをトラッキングします。

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>

フレームワークコンポーネントでのカスタムイベント

Astro 内で React、Vue、Svelte のアイランドを使用している場合、window.zenovay を直接呼び出します。

src/components/DownloadButton.tsx（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>;
}

View Transitions を使った SPA ナビゲーション

Astro View Transitions を使用している場合、Zenovay はクライアントサイドのルート変更を自動的に検出し、各ナビゲーションで新しいページビューを記録します。追加の設定は不要です。

src/layouts/Layout.astro（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 はブラウザの History API（pushState / popstate）を監視するため、View Transitions を含むあらゆるクライアントサイドナビゲーション方法に対応しています。

クッキーレスモード

クッキーや localStorage を使用せずプライバシーに配慮したトラッキングを行うには、data-cookieless 属性を追加します。

クッキーレストラッキングHTML
<script
defer
data-tracking-code="YOUR_TRACKING_CODE"
data-cookieless="true"
src="https://api.zenovay.com/z.js"
></script>

クッキーレスモードでは、Zenovay は訪問者の IP サブネット、ユーザーエージェント、日次ローテーションするソルトのサーバーサイドハッシュを使用し、クライアントデバイスに何も保存せずにユニーク訪問者数をカウントします。

ユーザーの識別

Astro サイトに認証エリアがある場合、ログイン済みユーザーを識別します。

ユーザーを識別するJavaScript
// After login or on authenticated pages
if (window.zenovay) {
window.zenovay('identify', 'user_123', {
  email: '[email protected]',
  plan: 'pro',
});
}

ゴールと収益のトラッキング

ゴールと収益のトラッキングJavaScript
// 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 サポート

TypeScript が window.zenovay を認識できるよう型宣言を追加します。

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

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

コンテンツコレクション（ブログアナリティクス）

ブログに Astro コンテンツコレクションを使用している場合、すべての投稿はレイアウトを通じてレンダリングされる限り自動的にトラッキングされます。イベントに投稿固有のメタデータを追加することもできます。

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 はページの URL とタイトルを自動的に取得するため、各ブログ投稿はアナリティクスダッシュボードに別々のページとして表示されます。

次のステップ

Astro サイトが Zenovay でトラッキングを開始しました！ダッシュボードでアナリティクスを確認してください。

続けて学習するには：

このページは役に立ちましたか？