4分で読めます

SvelteKit に Zenovay Analytics を追加する

このガイドでは、SvelteKit アプリに Zenovay Analytics を追加する方法を説明します。トラッキングスクリプトは 1 KB 未満で非同期に読み込まれ、History API を通じてクライアントサイドのナビゲーションを自動的に検出し、window オブジェクトが存在しないサーバー上では実行されないよう SvelteKit の SSR ライフサイクルを尊重します。カバーするトピック：基本的なインストール、カスタムイベントトラッキング、ユーザー識別、およびクッキーレスモード。

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

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

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

Zenovay ダッシュボードにサインインし、Domains を開いて、サイトをクリックし、General 設定ページの Tracking script カードからスニペットをコピーします。

ステップ 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 ルートでページビューを自動的にトラッキングします。

Tracking script カードを表示。HTML、React、Next.js、First-Party タブと Verify Installation ボタンが含まれています — Domains → サイト → General → Tracking script からトラッキングコードをコピーします。

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

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

YOUR_TRACKING_CODE を、実際のトラッキングコードで置き換えてください。Domains → サイト → General → Tracking script にあります。

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 auto-tracks page views, but you can add custom data
  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 — this will throw!
// window.zenovay('track', 'page_load'); // DO NOT do this

// Instead, track on the client side in +page.svelte
// import { browser } from '$app/environment';
// if (browser && window.zenovay) { ... } // correct

クッキーレスモード

クッキーや 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';

// Track a conversion goal
trackGoal('newsletter_signup', { source: 'footer' });

// Track a purchase
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 でトラッキングを開始しました！ダッシュボードでアナリティクスを確認してください。

続けて学習するには：

カスタムイベント — 高度なイベントトラッキングパターン
ゴール — コンバージョンゴールの設定
プライバシーコンプライアンス — GDPR および CCPA の設定
カスタムフレームワーク — 汎用インテグレーションガイド