アクセス解析

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

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

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

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

告知：スクロール計測の新しい手順作成しました！

[kanren postid="3632"]

何が計測できるのか？

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

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

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

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

1Image

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

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

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

2Image

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

設定方法の大まかな流れ

１．Scroll Depth（javascriptファイル）の入手
２．サイト（HTML）へのタグの埋め込み
３．Googleタグマネージャ：マクロ作成
４．Googleタグマネージャ：ルール作成
５．Googleタグマネージャ：タグ作成
６．動作＆計測確認

１．Scroll Depth（javascriptファイル）の入手

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

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

２．サイト（HTML）へのタグの埋め込み

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

<!-- jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

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

<!-- スクロールデプス -->
<script src="js/jquery.scrolldepth.min.js"></script>
<script>
jQuery(function() {
  jQuery.scrollDepth();
});
</script>

<script>
// このScriptは、カスタマイズサンプルです。
jQuery.scrollDepth({
  minHeight: 2000,
  elements: ['#comments', 'footer'],
  percentage: false,
  userTiming: false,
  pixelDepth: false,
  nonInteraction: false
});
</script>
<!-- スクロールデプス end -->

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

３．Googleタグマネージャ：マクロ作成

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

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

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

データレイヤーバージョン：２

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

3Image

４．Googleタグマネージャ：ルール作成

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

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

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

4Image

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

5Image

５．Googleタグマネージャ：タグ作成

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

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

6Image

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

7Image

６．動作＆計測確認

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

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

8Image

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

9Image

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

-アクセス解析
-, , , ,