Adding Privacy-First Analytics to a Next.js App

Next.jsアプリケーションにはアナリティクスの一般的なアプローチがいくつかありますが、ほとんどがクッキーバナーかCore Web Vitalsを遅くする重いサードパーティスクリプトを伴います。ここではどちらも使わずに、リアルタイムでプライバシーファーストのアナリティクスを追加する方法をご紹介します。

得られるもの

クライアントサイドナビゲーションを含む、すべてのルート変更でのページビュー追跡
訪問者数、リファラー、国、ブラウザファミリー、端末タイプ
クッキーなし、フィンガープリンティングなし、GDPR同意不要
単一のasync scriptタグ — メンテナンスするnpmパッケージなし

ステップ1: Monoidアカウントを作成する

monoid.websiteでサインアップし、新しいサイトを作成します。プロパティ用の短い英数字の識別子であるsite_idを受け取ります。

ステップ2: レイアウトにトラッカーを追加する

App Routerを使用するNext.js 13以降では、ルートのlayout.tsxにトラッカースクリプトを追加します。

import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://api.monoid.website/tracker.min.js"
          data-site-id="YOUR_SITE_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}

strategy="afterInteractive"を使用すると、ページがインタラクティブになった後にスクリプトが読み込まれ、Largest Contentful Paintスコアに影響を与えません。

ステップ3: クライアントサイドナビゲーションを処理する

トラッカーの組み込みhistory.pushStateフックは、Pages RouterとApp Routerの両方で、すべてのナビゲーションイベントで自動的に発火します。追加で何かを加える必要はありません。

カスタムイベントを送信したい場合(例えば、ユーザーがチェックアウトを完了したときや特定のボタンをクリックしたとき)、グローバルヘルパーを直接呼び出します。

window.monoid('event', 'checkout_complete')

ステップ4: ダッシュボードで確認する

Monoidダッシュボードを開き、サイトのページにアクセスします。数秒以内にリアルタイムフィードにライブ訪問者が表示されるはずです。ステージング環境を設定している場合は、開発トラフィックが本番メトリクスを汚染しないように、別のsite_idを使用するようにしてください。

不要なもの

クッキー同意マネージャーをインストールする必要はありません。プライバシーポリシーをアナリティクスクッキーに言及するよう更新する必要もありません(クッキーがないため)。そしてnpmパッケージも必要ありません。トラッカーはグローバルエッジネットワークから配信される単一のバニラJavaScriptファイルです。

ブラウザファミリーと端末タイプは、集計レポート用に通常のリクエストUser-Agentからサーバー側で導出されます。完全なUser-Agent文字列、ブラウザバージョン、クッキー、永続識別子、デバイスフィンガープリントが保存されることはありません。

ほとんどのNext.jsプロジェクトでは、これはサインアップからライブデータまで2分以内です。