[Scroll Depth] Googleタグマネージャで、LPのスクロール率を計測する方法

Googleアナリティクス(GA)の便利なプラグインについてご紹介します。
GAは、標準でページのスクロール到達率が把握できません。このプラグインを使うと、ページのスクロール到達率がわかるようになります。

GAでの設定サイトは、本家サイトや、いくつか解説されているサイトがありますので、今回は、Googleタグマネージャで管理する方法を紹介します。

Googleタグマネージャって何?って方は、過去の記事をご覧ください。
2m3g1.com/tag/google-タグマネージャ

何が計測できるのか?

ページスクロールに関して、以下の2点を確認できます。
・ページ到達状況
・ページの到達時間

ページ到達状況を把握できる

ベースラインに対して、ページのどのあたりまで(ベースライン⇒25%⇒50%⇒75%⇒100%)、どのくらいのユーザーが進んでいるかを確認することができます。

下の例では、ベース(26件)に対して、100%の位置(最後)まで到達したのは7件となります。

1Image

ページの到達時間を把握できる

それぞれの到達部分まで(25%、50%、75%、100%)
平均で何秒かかっているか確認できます。

下の例だと、100%まで平均17秒で到達しています。

2Image

他にも、指定した高さ(ピクセル)までの到達率を計測したり、
各要素までの到達率が計測できるみたいですが、今回は基本的な事項を設定します。

設定方法の大まかな流れ

1.Scroll Depth(javascriptファイル)の入手
2.サイト(HTML)へのタグの埋め込み
3.Googleタグマネージャ:マクロ作成
4.Googleタグマネージャ:ルール作成
5.Googleタグマネージャ:タグ作成
6.動作&計測確認

1.Scroll Depth(javascriptファイル)の入手

以下のサイトから、「jquery.scrolldepth.min.js」を入手します。
ダウンロードボタンから対象ファイルを任意のディレクトリに保存します。

Scroll Depth – A Google Analytics plugin for measuring page scrolling
scrolldepth.parsnip.io/

2.サイト(HTML)へのタグの埋め込み

まずは、HTMLのhead部分に以下のスクリプトタグを埋め込みます。
jQueryはすでに導入されていれば、不要です。

“js/jquery.scrolldepth.min.js”の部分は、「jquery.scrolldepth.min.js」が格納されているファイルパスを指定してください。

Googleタグマネージャの基本タグはすでに設置されていることが条件です。

3.Googleタグマネージャ:マクロ作成

今回使用する、データレイヤー変数を取得するマクロ作成します。

マクロタイプ:データレイヤー変数
データレイヤー変数名:(以下の項目 ※{{ }}は不要)

{{eventCategory}}
{{eventAction}}
{{eventLabel}}
{{eventValue}}
{{eventNonInteraction}}
{{eventTiming}}

データレイヤーバージョン:2

例として、{{eventCategory}}を作成する場合は以下の画像となります。

3Image

4.Googleタグマネージャ:ルール作成

2種類のルールを作成します。

・イベント発動:ScrollDistance
・イベント発動:ScrollTiming

イベントのルール「イベント発動:ScrollDistance」の設定は、以下の画像の通りです。
サイトに設置したjs(Scroll Depth)が発生させるイベントをキーとしたルールを作成します。

4Image

イベントのルール「イベント発動:ScrollTiming」の設定は、以下の画像の通りです。
サイトに設置したjs(Scroll Depth)が発生させるイベントをキーとしたルールを作成します。

5Image

5.Googleタグマネージャ:タグ作成

2つのルールで発動する2種類のタグを作成します。(名称は任意で整理しやすいもの)
・E1_ScrollEvent
・T1_ScrollTiming

イベントのタグ「E1_ScrollEvent」の設定は、以下の画像の通りです。
作成したルールとマクロをひも付けます。

6Image

カスタム速度のタグ「T1_ScrollTiming」の設定は、以下の画像の通りです。
作成したルールとマクロをひも付けます。

7Image

6.動作&計測確認

Googleタグマネージャのデバッグモードにします。

操作は、「ドラフトコンテナ>サマリー>プレビュー>デバッグ」から実行します。
該当のページを開いて、画面下部にGTMのステータス画面が表示されます。
ページをスクロールすると、タグが飛びます。
発動タグをクリックし、該当のGTMタグ名をクリックします。
「Show More」をクリックし、詳細を表示し、「Display Macros as:」を「Value」に変更することでイベントラベルを確認できます。

8Image

Googleアナリティクスのリアルタイムイベントで計測確認します。
「Googleアナリティクス > リアルタイム > イベント」を開きます。
該当のイベントカテゴリ(Scroll Depth)をクリックし、イベントラベル(25%)を確認してください。

9Image

Googleタグマネージャのデバッグモードで問題ないようでしたら、必ず、バージョン作成→公開を行ってください。