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

SvelteKit に Zenovay Analytics を追加する

Zenovay Analytics は SvelteKit とシームレスに連携し、プロジェクトに依存関係を一切追加せずにリアルタイムの訪問者インサイトを提供します。SvelteKit アプリケーションは完全静的サイトから複雑なルーティングを持つサーバーレンダリングアプリまで多岐にわたりますが、Zenovay はこれらすべてのモードをすぐに対応します。トラッキングスクリプトは 1 KB 未満で非同期に読み込まれ、History API を通じてクライアントサイドのナビゲーションを自動的に検出し、window オブジェクトが存在しないサーバー上では実行されないよう SvelteKit の SSR ライフサイクルを尊重します。マーケティングサイト、SaaS ダッシュボード、SvelteKit を使った eコマースストアフロントのどれを構築する場合でも、このガイドでは基本的なインストールからカスタムイベントトラッキング、ユーザー識別、クッキーレス GDPR 準拠モードまでを網羅しています。約 2 分で完全なアナリティクスカバレッジを実現できます。

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

SvelteKit のルート HTML ファイルにスクリプトタグを 1 つ追加するだけです。npm パッケージも、Vite プラグインも、アダプターの変更も不要です。

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

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

ステップ 2：app.html に追加する

すべての SvelteKit ページのルート HTML テンプレートである src/app.html を開き、<head> 内に Zenovay スクリプトを追加します。

src/app.htmlHTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="icon" href="%sveltekit.assets%/favicon.png" />
  <script
    defer
    data-tracking-code="YOUR_TRACKING_CODE"
    src="https://api.zenovay.com/z.js"
  ></script>
  %sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
  <div style="display: contents">%sveltekit.body%</div>
</body>
</html>

以上です！Zenovay はクライアントサイドのナビゲーションを含む、すべての SvelteKit ルートでページビューを自動的にトラッキングします。

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

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

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

SPA ナビゲーショントラッキング

SvelteKit はデフォルトでクライアントサイドルーティングを使用しています。Zenovay は History API（pushState / popstate）を通じてルートの変更を自動的に検出するため、すべてのナビゲーションで追加設定なしに新しいページビューが記録されます。

すべての SvelteKit ナビゲーション方法に対応しています。

  • <a> タグのリンク（SvelteKit がインターセプトします）
  • goto() によるプログラム的ナビゲーション
  • ブラウザの戻る/進むボタン
  • $app/navigation の関数

カスタムイベント

グローバルな window.zenovay 関数を使用してユーザーインタラクションをトラッキングします。SSR エラーを避けるため、常に typeof window または browser チェックでガードしてください。

browser ガードを使う

SvelteKit はクライアント上でのみ true になる browser 定数を提供しています。

src/lib/components/SignupButton.svelteSVELTE
<script lang="ts">
import { browser } from '$app/environment';

export let plan: string;

function handleClick() {
  if (browser && window.zenovay) {
    window.zenovay('track', 'signup_click', { plan });
  }
}
</script>

<button on:click={handleClick}>
Sign Up for {plan}
</button>

再利用可能なトラッキングヘルパー

クリーンで再利用可能なトラッキング呼び出しのためのユーティリティモジュールを作成します。

src/lib/analytics.tsTypeScript
import { browser } from '$app/environment';

export function track(event: string, data?: Record<string, any>) {
if (browser && window.zenovay) {
  window.zenovay('track', event, data);
}
}

export function identify(userId: string, traits?: Record<string, any>) {
if (browser && window.zenovay) {
  window.zenovay('identify', userId, traits);
}
}

export function trackGoal(goalName: string, data?: Record<string, any>) {
if (browser && window.zenovay) {
  window.zenovay('goal', goalName, data);
}
}

export function trackRevenue(amount: number, currency = 'USD') {
if (browser && window.zenovay) {
  window.zenovay('revenue', amount, currency);
}
}

任意のコンポーネントで使用できます。

src/routes/pricing/+page.svelteSVELTE
<script lang="ts">
import { track } from '$lib/analytics';

function handleUpgrade(plan: string) {
  track('upgrade_clicked', { plan, location: 'pricing_page' });
}
</script>

<button on:click={() => handleUpgrade('pro')}>
Upgrade to Pro
</button>

レイアウトでのページビュートラッキング

各ページビューに追加のメタデータを送信したい場合は、ルートレイアウトにリアクティブステートメントを使用します。

src/routes/+layout.svelteSVELTE
<script lang="ts">
import { page } from '$app/stores';
import { browser } from '$app/environment';

$: if (browser && $page.url) {
  // Zenovay はページビューを自動トラッキングしますが、カスタムデータを追加できます
  if (window.zenovay) {
    window.zenovay('track', 'page_metadata', {
      path: $page.url.pathname,
      route_id: $page.route.id,
    });
  }
}
</script>

<slot />

上記はオプションです。Zenovay はすでに自動的にページビューをトラッキングしています。このパターンは各ナビゲーションに追加のメタデータを添付する必要がある場合にのみ使用してください。

サーバーサイドレンダリングに関する考慮事項

Zenovay スクリプトは完全にクライアント上で実行されます。SSR 中は window が使用できないため：

  • +page.server.ts、+layout.server.ts、サーバーフックでは window.zenovay を絶対に呼び出さないでください
  • クライアントサイドの呼び出しは常に $app/environment の browser でガードしてください
  • app.html のスクリプトタグはブラウザのみが実行するため、そこに記述するのは安全です
サーバーファイルではこのようにしないでくださいTypeScript
// +page.server.ts — これはエラーになります！
// window.zenovay('track', 'page_load'); // ❌

// 代わりに、+page.svelte のクライアントサイドでトラッキングします
// import { browser } from '$app/environment';
// if (browser && window.zenovay) { ... } // ✅

クッキーレスモード

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

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

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

ユーザーの識別

認証済みユーザーとアナリティクスデータを関連付けます。通常、ログイン後またはユーザーデータを読み込むレイアウトで呼び出します。

src/routes/+layout.svelte（認証済み）SVELTE
<script lang="ts">
import { browser } from '$app/environment';
import type { LayoutData } from './$types';

export let data: LayoutData;

$: if (browser && data.user && window.zenovay) {
  window.zenovay('identify', data.user.id, {
    email: data.user.email,
    plan: data.user.plan,
  });
}
</script>

<slot />

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

src/lib/analytics.ts（ゴールと収益）TypeScript
import { trackGoal, trackRevenue } from '$lib/analytics';

// コンバージョンゴールをトラッキングする
trackGoal('newsletter_signup', { source: 'footer' });

// 購入をトラッキングする
trackRevenue(49.99, 'USD');

TypeScript サポート

グローバルな zenovay 関数の型宣言を追加します。

src/app.d.tsTypeScript
// See https://kit.svelte.dev/docs/types#app
declare global {
namespace App {
  // interface Error {}
  // interface Locals {}
  // interface PageData {}
  // interface Platform {}
}

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

export {};

フォームアクションのトラッキング

SvelteKit のフォームアクション（プログレッシブエンハンスメント）をトラッキングします。

src/routes/contact/+page.svelteSVELTE
<script lang="ts">
import { enhance } from '$app/forms';
import { track } from '$lib/analytics';
</script>

<form
method="POST"
use:enhance={() => {
  track('form_submitted', { form: 'contact' });
  return async ({ result }) => {
    if (result.type === 'success') {
      track('form_success', { form: 'contact' });
    }
  };
}}
>
<input name="email" type="email" placeholder="Email" required />
<textarea name="message" placeholder="Message" required></textarea>
<button type="submit">Send</button>
</form>

次のステップ

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

続けて学習するには：

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