Case Study
ユーザー行動分析トラッカー
— localStorage型でスクロール深度・クリック・滞在時間を自前収集する
GA4の「ページビュー」「セッション」だけでは見えないスクロール深度・クリック位置・滞在時間を、外部サーバーに送信しないlocalStorage型トラッカー（tracker.js）で記録する仕組みの構築事例。
4 types
行動データ種別
100 sessions
最大保持数
0 requests
外部送信
GA4のデフォルト指標（PV、セッション数、直帰率）は「量」を測るには十分だが、「ユーザーがコンテンツにどれだけ深く関与したか」は別の仕組みで補う必要があった。
たとえば、同じ3分間の滞在でも「最後までスクロールして読了したユーザー」と「ページを開いたまま放置したユーザー」は、標準的な計測指標だけでは区別することが難しい。
この課題を解決するため、localStorage型の独自トラッカー（tracker.js）を開発し、スクロール深度・滞在時間・クリック・セッション内遷移の生データを、外部サーバーに送信することなくブラウザ内に記録する仕組みを構築した。
| プロジェクト種別 | 自社ツール開発（内製） |
|---|---|
| 開発期間 | 2026年 |
| 対象 | 自社運営メディア（複数サイト） |
| 技術スタック | JavaScript (Vanilla) / localStorage / sessionStorage |
The Challenge
なぜ独自の行動分析基盤が必要だったのか
自社メディアの運営を通じて、以下の3つの課題に直面しました。
GA4の計測限界
ページビューとセッションは分かるが、スクロール深度、読了率、コンテンツ間の遷移パターンなど「行動の質」が見えない
コンテンツ評価の曖昧さ
PVが多い＝良いコンテンツ、という単純な評価では「なぜ読まれているか」「次に何をしたか」が分からない
セッション単位の文脈欠落
ユーザーがどのページからどのページに遷移し、最終的にCVに至ったか（あるいは離脱したか）の動線が追えない
GA4のカスタムイベントやBigQueryエクスポートで部分的に対応する方法もあるが、「行動の質」を多軸で定量化し、コンテンツ間で横断的に比較するには、独自の計測・分析基盤が必要だと判断しました。
The Real Challenge
本質的な課題の分解
「GA4では足りない」という表面的な不満を深掘りすると、本質的な課題が見えてきました。
「どのコンテンツにリソースを投下すべきか」を判断したい
行動データを収集する仕組みが存在しない
GA4のカスタムイベントで部分的に対応する方法もありますが、サードパーティサービスに依存せず、プライバシーに配慮しながら行動データの生データをブラウザ内に保持する独自の計測レイヤーが必要でした。
Our Approach
tracker.jsのアーキテクチャ
— イベント収集からAPI公開まで
tracker.jsは、ブラウザ内で完結するlocalStorage型トラッキングで行動データを収集し、Public API（getSessions / clearSessions / exportJSON）を通じて外部からデータを取得可能にする設計です。
システムアーキテクチャ
01
スクロール深度 & マイルストーン記録
tracker.jsはスクロール深度を0-100%の連続値で記録し、25%・50%・75%・100%の各マイルストーン到達を検知する。「どこまで読まれたか」の詳細な分布を、throttle 200msのpassive listenerで軽量に取得する。
02
クリックの意味的記録
data-track属性を持つ要素のクリックをセクション単位で分類・記録する。単なるクリック数ではなく、「どのセクションの、どの要素を、いつクリックしたか」を座標とtimestampで保持するため、ヒートマップ的な分析の基礎データとなる。
03
セッション内遷移記録
1セッション内でユーザーが閲覧した各ページのURL・referrer・enterTime・exitTime・dwellTimeを時系列で記録する。最大100セッション×50ページまでlocalStorageに保持し、古いセッションは自動で破棄される。exportJSON() APIにより、蓄積データを一括取得してオフライン分析に活用できる。
The Results
「行動の質」を示すデータを
プライバシーに配慮して自前収集する
tracker.jsの導入により、スクロール深度・滞在時間・クリック・遷移パターンの4種類の行動データを、外部サーバーへの送信なしにブラウザ内で収集できるようになりました。
データ種別
4 types
スクロール/滞在/クリック/遷移
セッション保持
100 sessions
×50ページ/セッション
外部送信
0 requests
ブラウザ内完結
Quantitative Impact
スクロール深度の詳細な把握
0-100%の連続値 + 25%刻みマイルストーン
クリック行動のセクション別記録
data-track属性による意味的分類
ページ別滞在時間の正確な算出
enterTime/exitTimeからdwellTimeを自動計算
Strategic Impact
外部サーバーへのデータ送信ゼロ
プライバシーに配慮した設計
Public APIによるデータ活用
getSessions / clearSessions / exportJSON
パフォーマンスへの影響を最小化
throttle 200ms / requestIdleCallback / passive listener
スクロール深度分布
ページ別のスクロール深度分布。tracker.jsが記録するmaxScrollDepth（0-100%）の集計。
クリックターゲット分類
data-track属性によるクリック先のセクション別分類。tracker.jsが座標・timestampとともに記録。
セッション内ページ数分布
1セッション内で閲覧されたページ数の分布。最大50ページ/セッションまでtracker.jsが記録。
Key Insights
この取り組みから得られた知見
01
サードパーティ依存からの脱却
外部のアナリティクスツールは導入しやすく便利だが、データの所有権やポリシー変更のリスクも伴う。tracker.jsのようなファーストパーティ型の計測レイヤーを自前で持つことで、データの完全な所有権を確保しつつ、必要な指標を自由に設計できる。外部ツールを否定するのではなく、自社にとって重要なデータは自社で持つという選択肢を確保しておくことが重要である。
02
プライバシーと計測精度の両立
localStorage型のトラッカーはデータをブラウザ内に保持し、外部サーバーへの送信を行わない。サードパーティCookieの廃止が進む中、この設計はユーザーのプライバシーを尊重しながら精度の高い行動データを取得する一つの方向性を示している。ユーザーはブラウザの設定でlocalStorageをクリアすることもでき、データの管理権はユーザー側にある。
03
生データ収集から段階的に分析を構築する
tracker.jsの現在の役割は「生データの収集と保持」に特化している。スコアリングやダッシュボード可視化は次のステップとして段階的に構築する方針である。まず確実に正確な生データを蓄積し、そのデータの特性を理解した上で分析ロジックを設計する。最初からスコアリングを組み込むのではなく、データドリブンに分析手法を進化させていくアプローチを採っている。
Contact