SvelteKitアプリにプライバシーファーストのアナリティクスを追加する

SvelteKit 2は、計測をページライフサイクルに紐づけているアナリティクス統合を壊します。素の<script>タグは最初のドキュメント読み込み時に一度だけ発火し、それ以降は二度と動きません。つまり、その後のクライアントサイドナビゲーションはすべて見えなくなります。Monoidトラッカーは、ページライフサイクルではなくHistory APIを監視することでこれを回避します。

素のscriptタグでは不十分な理由

<svelte:head>内の<script>タグは、ドキュメントの読み込みごとに一度だけ実行されます。SvelteKit 2のルーターはドキュメントをアンロードせずにコンテンツをその場で差し替えるため、タグが再実行されることはありません。トリガーがDOMContentLoadedかloadしかないトラッカーは、入口のルートだけを報告してその後は沈黙します。

これはSvelteKit 2アプリケーションでGoogle Analytics GA4が初回ロードでのみ最初のページビューを記録するという広く報告された問題の根本原因です。

答えはナビゲーションそのものを検知することであり、SvelteKit専用の統合は必要ありません。SvelteKitのクライアントルーターはhistory.pushStateを呼び出してURLを更新するため、history.pushStateにパッチを当てるトラッカーは、$app/navigationやフレームワークのフックを購読することなく、すべてのクライアントサイドのルート変更を捉えられます。

正しいアプローチ

<svelte:head>を使用してルートの+layout.svelteにMonoidトラッカースクリプトを一度追加します。

<svelte:head>
  <script
    async
    src="https://api.monoid.website/tracker.min.js"
    data-site-id="YOUR_SITE_ID"
  ></script>
</svelte:head>

トラッカーのDOMContentLoadedリスナーが初回ページロードをカバーします。その後のクライアントサイドナビゲーションでは、history.pushStateへのパッチがSvelteKitによるURL更新の直後に実行されるため、新しいlocation.pathnameを読み取り、ルート変更ごとに1件のページビューを送信します。

知っておくべき注意点が1つあります。このパッチはpushStateを対象としており、popstateは対象外です。「戻る」「進む」ボタンはpushStateを呼び出さずにルートを変更するため、現時点では新しいページビューにはなりません。

確認するには、DevToolsのNetworkタブを開き、/collectへのPOSTリクエストを監視してください。ルート変更ごとに1つ表示されるはずです。

ステージングトラフィックの分離

SvelteKitプロジェクトは開発中に通常localhostで実行されます。別のサイトを登録し、そのsite_idを環境変数にバインドして、開発トラフィックが本番メトリクスを汚染しないようにします。

<script>
  const siteId = import.meta.env.VITE_MONOID_SITE_ID
</script>

<svelte:head>
  {#if siteId}
    <script
      async
      src="https://api.monoid.website/tracker.min.js"
      data-site-id={siteId}
    ></script>
  {/if}
</svelte:head>

開発時は.env.localにVITE_MONOID_SITE_IDを設定し(またはトラッキングを抑制するために未設定のままにし)、本番ではデプロイ環境に設定します。{#if siteId}ブロックは、変数が設定されていないときにトラッカーが決して注入されないことを保証します。

不要なもの

クッキー同意バナーは不要。クッキーポリシーの更新も不要。navigator.cookieEnabledチェックも不要。コレクションエンドポイントは、IPアドレス、User-Agent、サーバー側のシークレット、そして現在の日付から日次の訪問者ハッシュを導出します。

visitor_hash = SHA-256(IP + UA + SALT_SECRET + YYYY-MM-DD)

ハッシュは24時間ごとにリセットされ、IPやUser-Agentを復元するために逆算することはできません。訪問者の端末には何も保存されません。これは統合がePrivacyやPECRの同意要件をトリガーしないことを意味します。同意するものが何もないからです。

ダッシュボードでの確認

デプロイ後、アナリティクスダッシュボードを開き、ライブサイト上で複数のルート間をナビゲートします。各ナビゲーションは正しいパスで新しいページビューエントリを生成するはずです。ナビゲーションに関係なくエントリが1つしか表示されない場合は、スクリプトがルートレイアウトに読み込まれていること、そして本番環境でVITE_MONOID_SITE_IDが設定されていることを確認してください。

使用するSvelteKitアダプター(Cloudflare、Vercel、Node、static)はアナリティクス収集に影響しません。トラッキングはハイドレーション後にブラウザで完全に行われるためです。

出典

• SvelteKit ルーティング (svelte.dev)
• SvelteKit $app/navigation (svelte.dev)
• SvelteKit $env/static/public (svelte.dev)
• MDN: History.pushState()