GAによるファーストビュー通過の計測設定と指標化の手順

ファーストビューはユーザーとの最初の合意形成の領域です。「このページはスクロールする価値がある」という判断が、ここで行われます。

本記事では、GoogleアナリティクスとGoogleタグマネージャを使って「ファーストビュー通過」をイベント計測し、指標化する方法を解説します。この設定により、ページの課題が「ファーストビュー」にあるのか「それ以降」にあるのかを分解できるようになります。

計測したい内容は上図です。ユーザーがファーストビューからしきい値を超えてスクロールした時点で、1PVあたり1回イベントを発火させます。

このイベントを蓄積することでファーストビュー離脱（に相当する状況）を把握でき、「ファーストビュー通過率」や「ファーストビュー通過後CVR」といった指標を作成できます。ページの序盤で発生する重要なエンゲージメントイベントの一つでであり、AIへの学習の側面でも有意義に活用できます。

この指標を使った分析手法については、別記事で詳しく解説しています。

本記事では、計測設定の手順に焦点を当てて解説します。

計測設定の手順

カスタムイベント「scroll_below_the_fold」の計測では、Googleタグマネージャ側でGoogleアナリティクス関連の計測設定を行います。指標「Scrolls below the fold」「Above the fold pass rate」の準備はGoogleアナリティクス側での設定です。

• カスタムイベント「scroll_below_the_fold」の計測（Googleタグマネージャ側）
• 「ファーストビュー通過数」を表す指標「Scrolls below the fold」の準備（Googleアナリティクス）
• 「ファーストビュー通過率」を表す指標「Above the fold pass rate」の準備（任意：Googleアナリティクス）

カスタムHTMLの作成（ファーストビューからスクロール通過）

Googleタグマネージャ側で、ファーストビュー通過に関連する一連の計測設定を行います。

最初に、以下のカスタムHTMLを作成します。ファーストビューから一定のしきい値までスクロールした時点で、dataLayerにてカスタムイベント「scroll_below_the_fold」を一度だけ出力します。

<script>
(function () {
  var fired = false;

  // ページ最上部から何pxスクロールでイベントを発火させるか
  var threshold = 100;

  function checkScroll() {
    var scrollTop = window.scrollY || window.pageYOffset || 0;

    if (!fired && scrollTop >= threshold) {
      fired = true;
      dataLayer.push({
        event: 'scroll_below_the_fold'
      });
    }
  }

  window.addEventListener('scroll', checkScroll);
})();
</script>

トリガーは「初期化」を選択します（計測範囲は必要に応じて調整してください）。

動作としては「ブラウザーの表示領域の最上端がゼロ地点からしきい値までスクロールした時点で、イベントscroll_below_the_foldを出力」しています。実態としては「ファーストビューからしきい値の量だけスクロールした時点」と同じです。ファーストビューでスクロールせず離脱した場合、「scroll_below_the_fold」は出力されません。

しきい値は100pxを指定しています。var threshold = 100;の数字を任意の値に変更することもできます。

しきい値は誤検出を減らすための余白として設けています。スマートフォンの指の離れやタッチパッドの慣性など、少量のスクロールを厳密に検知しない処置としてです。

カスタムイベントトリガーの作成

次にカスタムイベントのトリガー作成をします。先ほどのdataLayerでカスタムイベント「scroll_below_the_fold」の発生したタイミングをトリガーとして設定します。

トリガーのタイプ：カスタムイベント
イベント名：scroll_below_the_fold
トリガーの発生場所：（範囲は必要に応じて調整してください）

GA4 イベントタグの作成

続いてGA4のイベントタグを作成します。先ほど作成したカスタムイベントトリガーのタイミングで、GA4でカスタムイベント「scroll_below_the_fold」を発生させます。

この後の過程でカスタム指標「Scrolls below the fold」を準備するので、その目的でイベントパラメータscrolls_below_the_foldで数字「1」を出力します。

タグの種類：Googleアナリティクス: GA4イベント
イベント名：scroll_below_the_fold
イベントパラメータ：scrolls_below_the_fold → 値：1

トリガーは、先ほど作成したカスタムイベントトリガーを選択します。

ここまでがGoogleタグマネージャ側での設定です。

カスタム指標の作成（ファーストビュー通過数 Scrolls below the fold）

ここからはGoogleアナリティクスの管理画面での設定です。

「ファーストビュー通過数」のカスタム指標の作成をします。指標「Scrolls below the fold」を準備し、前述のカスタムイベント「scroll_below_the_fold」のイベントパラメータscrolls_below_the_foldの数値「1」を受け取ります。

指標名：Scrolls below the fold
範囲：イベント
イベントパラメータ：scrolls_below_the_fold
測定単位：標準

これで、Googleアナリティクスの探索や標準レポートにて「ファーストビュー通過数」を表す指標「Scrolls below the fold」を利用できるようになります。

計算指標の作成（任意：ファーストビュー通過率 Above the fold pass rate）

この設定は任意です。設定することでGoogleアナリティクスの探索や標準レポートにて「ファーストビュー通過率」を表す指標「Above the fold pass rate」を利用できます。

この計算指標の設定をしなくても、各種レポートからデータをエクスポートしてスプレッドシートやExcelを用いて各自で計算して容易に得られる指標です。接続したLooker Studio側でも処理できます。また、無償版のGoogleアナリティクスでは計算指標の作成は5つまでという上限もあります。

ファーストビュー通過率は「ファーストビュー通過数 / 表示回数（ページビュー）」で表せます。それに即した指定をします。

計算指標名：Above the fold pass rate
API名：above_the_fold_pass_rate
数式：{Scrolls below the fold} / {表示回数}
測定単位：標準

利用例：GA4探索レポートで「ファーストビュー通過」関連指標を利用する

計測を開始すれば、前述の設定済みの指標をGoogleアナリティクスの探索や標準レポートで利用できます。Looker Studioと接続すればそちらでも利用可能です。

ページ軸のレポートでの使用例

下の図は、ページ軸の探索レポートで「Scrolls below the fold (ファーストビュー通過数)」「Above the fold pass rate (ファーストビュー通過率)」を使用した例です。

計算指標「Above the fold pass rate (ファーストビュー通過率)」は「0.72」のような小数点の表示になります。これは仕様で、％表示といった表示形式のオプションは用意されていません。

デバイス軸のレポートでの使用例

ページ軸だけでなく、デバイス軸などでも各指標を利用できます。

組み合わせるディメンションに注意

「Scrolls below the fold (ファーストビュー通過数)」はイベントレベルの指標です。そのため、組み合わせるディメンションには注意が必要です。

例えば「ランディングページ」「セッションの参照元/メディア」といったディメンションとの組み合わせはNGです。組み合わせても意図とは異なるデータになる可能性があります。

ただし、「ランディングページとしてのページのファーストビュー離脱状況の把握」は不可能ではありません。以下の設定を行えば「自ドメインをページ参照元に含むもの」を除外でき、条件的にはランディングページの内容に近づけられます（ただしGoogleアナリティクスには独特なセッション参照元の仕様があり、他のレポートとの数値の不一致に悩まされることになります）。

1. ページ系ディメンションと指標「Scrolls below the fold (ファーストビュー通過数)」などを並べる
2. フィルタで、ディメンション「ページの参照元」に自ドメインを含まない指定を加える

他にも、セグメントを活用することでランディングページ軸で抽出できます。

利用例：「ファーストビュー通過後CVR」を把握するための探索セグメント設定

ランディングページ軸やセッション参照元/メディア軸の視点でファーストビュー通過を用いた分析を行うのであれば、「ファーストビュー通過後CVR」の把握が一つの効果的な方法です。

これは特にキャンペーン向けLPの課題分解に役立ちます。ファーストビュー通過率と通過後CVRのマトリクスで課題を4つに分解し、具体的な改善方法を立てやすくなるというものです。

この分析視点の解説は、別記事にて詳しく解説しています。

ここでは、GA4探索レポートで「ファーストビュー通過後CVR」を把握するためのセグメント設定を紹介します。

セグメントの設定例（特定ディレクトリでファーストビュー通過）

例えばランディングページ軸で「ファーストビュー通過後CVR」を把握するためには、レポートはディメンション「ランディングページ」と指標「セッション」「キーイベント」を中心に構成する必要があります。

そうすると、「ファーストビューを通過した」という条件をセグメントで設定する必要があります。

一例として以下のセグメント設定を紹介します。「セッションセグメントを使用し、イベント scroll_below_the_fold が1回以上発生（特定ディレクトリ）」というセグメントです。条件を特定ページして設定を厳密にしても構いません。

ランディングページ軸のCVRを把握できるレポートでこのセグメントを適用すれば、ランディングページごとの「ファーストビュー通過後CVR」を把握できます。

厳密には一部の例外ケースを含むことがあります（ランディングページではファーストビュー通過イベントは発生せず、回遊後のページでファーストビュー通過イベントが発生するケースなど）。しかし、多くのケースでは上記の内容で「ファーストビュー通過後CVR」を把握するのに十分な結果を得られます。

いくつかの補足説明

しきい値の100pxは妥当なのか

しきい値は誤検出を減らすための余白として設けています（少量のスクロールを厳密に検知しない処置）。そのスクロール量をここでは100pxとしていますが、明確な根拠はありません。

この少量のスクロールは、ユーザーの動作の癖、OSやブラウザーの仕様と設定、タッチパッドやキーボードやマウスの仕様と設定、ページ側の制御などによってさまざまです。その前提において、「テキスト2～3行分」のスクロール量「100px」をしきい値として基準に置きました（これもフォントサイズや行間によってもまちまちであるのは承知の上です）。

もし計測している中で「余白を減らして厳密に計測したい」「もっと余白を設けたい」という希望があれば、各自で数値を変更してください。

GAのscrollイベントと何が違うのか

Googleアナリティクスの拡張計測機能によるイベント「scroll」は、ユーザーがページの垂直方向90%地点までスクロールした際に自動的に計測されるイベントです。

一方、今回のカスタムイベント「scroll_below_the_fold」は、ユーザーがファーストビューから垂直方向にしきい値を超えてスクロールした場合に計測しています。

「ページの長さの何％」という基準ではなく、またユーザーやその環境によってもイベント計測地点は異なります。イベント「scroll_below_the_fold」は「ユーザーがどこまで見たか」ではなく「最低限の初期情報を消化して次へ進む意志を示したか」を計測しています。

ファーストビュー通過率が低いのは悪い状態か

ユーザーがファーストビューのみで行動を終えるケースは多くあります。ページによっては他の指標と合わせて総合的な判断が必要です。

そのページがどのような目的で準備したものか、ユーザーに期待するアクションは何かを前提におき、該当ページのファーストビュー通過率を見ることになります。状況に応じて、遷移先のページやファーストビュー内コンテンツの利用状況の確認が必要です。

ページが短い場合は計測されるのか

ページがスクロールできないほどの長さの場合、イベント「scroll_below_the_fold」は発生しません。ページの長さがファーストビューからしきい値までに収まる場合も同様です。

発生するイベント数に注意

イベント「scroll_below_the_fold」をWebサイト全体で計測した場合、イベント「page_view」のおおよそ70％ほどのイベント数が追加で発生します。Webサイトの規模によってはサンプリングが発生しやすくなったり、BigQueryエクスポートにてテーブルの肥大化に伴うコスト増加の可能性があります。

SPAのページでも計測できるか

今回の計測仕様は、SPAでは動作を未確認です。まず、上記設定のカスタムHTML（ファーストビューからスクロール通過の内容）にて、トリガー指定で「初期化」に加えて「履歴の変更」を選択する必要がありそうです。ただしそれでも適切な挙動や計測をしない可能性があります。

GTMのスクロール距離トリガーを使用した設定は可能か

条件的には、Googleタグマネージャのスクロール距離トリガーを使用した設定も可能かもしれません。しかしいくつか試した結果、執筆時点では採用には至っていません。

例えば、ユーザーによるページ表示時のブラウザービューポートの高さを取得してしきい値を加えたJavaScript変数を準備し、スクロール距離トリガーの縦方向スクロール距離のピクセル数指定でそのJavaScript変数を選択する、といった設定が考えられます。計測の設定もこの方がスマートです。

しかしビューポートの高さに関して、特にスマートフォンでは数値がブレやすい、あるいは取得しにくいという問題があります（アドレスバーやソフトウェアキーボードの表示/非表示で高さが大きく変化する、どの高さを取得するかがブラウザー実装で異なるなど）。そのため、この方法は精度が不安定で取得ハードルも高いという判断に至っています。

まとめ：ファーストビュー通過はページ序盤で発生する重要なエンゲージメントイベント

「ファーストビュー通過」をGoogleアナリティクスとGoogleタグマネージャを使ってイベント計測し、指標化する方法を解説しました。ファーストビュー通過はページの序盤で発生する重要なエンゲージメントイベントの一つです。Googleアナリティクスできちんと計測し蓄積することで、分析に役立てることができます。ぜひ参考にしてみてください。