ページ内のスクロール状況を計測

ページ内の読了率を図りたかったので、GoogleTagManager（以降：GTM）でスクロール状況を計測してみました。「最後まで読まれているか？」を知ることで、コンテンツの改善やCV率アップのヒントになるかもしれないと思い、設定を試してみました。

1. 基本構造

まず基本的な考えとしてはスクロール数を25%、50%、80%の3段階で計測します。それぞれが発火したら、都度GA4にイベントを送信すると行った具合です。3段階の理由は、多すぎても判断が煩雑になるのと、イベント送信が多くなりすぎるからです。イベント送信が多くなりすぎるとGA4のイベント制限に引っかかる可能性があります。まぁそれはよっぽどですが。

前回も読了率の記事を上げましたが、それとちょっと違います。前回は「全部読んだかどうかをより正確に」というコンセプトでしたので、発火条件が80%スクロール+滞在時間10秒でした。しかし今回はスクロール率を単純に３パターン計測しているだけです。

ではやっていきましょう！

1. トリガーの設定

まずはトリガーを設定します。
こんな感じで25%、50%、80%の3段階それぞれ行います。

まず25%から。

次に50%。

最後に80%。

トリガーの設定は以上です。

2. タグの設定

次はタグです。ここでは以下のように4種類作ります。

まずは「25%スクロールイベントをGA4に送信」です。

次に「50%スクロールイベントをGA4に送信」です。

次に「80%スクロールイベントをGA4に送信」です。

最後に「ページスクロール状況を検知するイベント(20%,50%,80%)」です。

実際のコードは以下です。

<script>
  window.sentScrollEvents = {};

  function sendScrollEvent(percent) {
    if (!window.sentScrollEvents[percent]) {
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({
        event: `scroll_percent_${percent}`
      });
      window.sentScrollEvents[percent] = true;
    }
  }

  window.addEventListener('scroll', function () {
    const scrollDepth = (window.scrollY + window.innerHeight) / document.body.scrollHeight;

    if (scrollDepth >= 0.25) sendScrollEvent(25);
    if (scrollDepth >= 0.5)  sendScrollEvent(50);
    if (scrollDepth >= 0.8)  sendScrollEvent(80);
  });
</script>

これでプレビューで発火チェックをし、公開をしてGTMでの設定は完了です。

3. GA4で確認

実際にGA4には「scroll_read」というイベント名で送信されています。
こんな感じですね。

GA4に関しては今回はとりあえずここまで！
ひとまずスクロール状況を見える化できたのは収穫。完読されてるかどうかって、やっぱり気になるし、これから記事の改善を考えるときのちょっとした指標になりそうです。

次回はGA4でのデータの拾い方をもっと詳しくやってみたいと思います。

今回は以上です！