GoogleAnalytics で離脱率や平均セッションを見ていて、ユーザーがページのどこまで目を通しているのか気になりました。

海外の技術ブログや GitHub でも評価のある、「Scroll Depth」というライブラリを使用します。要件として jQuery1.7 以上です。

Scroll Depth http://scrolldepth.parsnip.io/

これとタグマネージャーを連携してスクロール計測を行いたい思います。

Dom Event の設定

まずは「Triggers」(旧:ルール)からイベントを登録します。

「Scroll Depth」を実行する際にスクロール幅の計算を行うため、

読み込み完了イベントの「gtm.dom」を「Dom Event」として登録します。

Google Tag Manager1

Scroll Listener の設定

次に「Tags」(旧:タグ)からライブラリを「Scroll Listener」として登録します。

以下 GitHub の「jQuery.scrolldepth.js」を script タグで挟んで貼り付けてください。

robflaherty/jquery-scrolldepth** > https://github.com/robflaherty/jquery-scrolldepth

Google Tag Manager2

タグの最後に実行タグを追記します。

オプションで計測する項目のオンオフができます(ほかにも有り)

$.scrollDepth({
  minHeight: 1000, //計測実行する最小のページ高さ
  elements: ['#comments', 'footer'], //計測するスクロール要素
  percentage: true, //スクロール率の計測有無
  userTiming: false, //ユーザーのスクロールイベント有無
  pixelDepth: true //スクロール幅の計測有無
});

「Scroll Listener」を発行するタイミングは先ほど用意した「Dom Event」を使います。

Scroll Event の条件設定

次に「Triggers」(旧:ルール)から「Scroll Listener」のイベント登録します。

イベント名は「ScrollDistance」と入力します。

Google Tag Manager3

dataLayer の設定

次に「Variables」(旧:マクロ)から「Scroll Listener」の 4 つのデータレイヤ変数を登録します。

「eventCategory」

Google Tag Manager4

「eventAction」

Google Tag Manager5

「eventLabel」

Google Tag Manager6

「eventValue」

Google Tag Manager7

Scroll Event の設定

最後に「Tags」(旧:タグ)から Analytics のプロファイルを選択して、

各項目を入力すれば設定完了です。

Google Tag Manager8

デバッグモードで PC からでもスマートフォンからで取得できていれば完了です。

満足感で公開を忘れないよう気を付けてください。