webページでは、単純にPV数が多くてもサイトの内容を読んでもらえていなければ意味がありません。そこで、ユーザーのスクロール量を数字で取得することでどの辺りまで読んで離脱する人が多いのか知れたら便利ですよね？
本記事では、 Googleタグマネージャー（GTM）のイベントリスナーを使用したページスクロール量を取得するための手順について紹介します。いくつかのサイトを参考に作業しましたが、結構手こずった部分があったのでそれを含めまとめています。
新しい自動イベントトラッキング機能
Googleタグマネージャーでは複数のタグの管理が可能ですが、イベントリスナーを使用して任意のルールと紐付けすることで、より細かい条件でイベントトラッキングが可能になります。HTML に特別な記述をすることなく、自動で GTM からタグを発行できるようになるのです。
webページ上でのユーザーのスクロール量を取得する
まずGoogleタグマネージャーとGoogle Analyticsは連携してある前提で進めます。
1.タイマーリスナータグを発行する
新しいタグを追加 → タグの種類：イベントリスナー → タイマーリスナー
タグの名前は自分でわかれば何でも問題ありません。イベント名はここでは『timer5』とします。
間隔はイベントを実行する間隔の設定なので1000分の1秒単位で入力します。5000で5秒ごとの呼び出しになります。配信のルールは『全ページ』のみ追加します。
2.マクロの作成
イベントから値を取得するためにマクロを作成します。まず、スクロール量を取得するための記述を カスタムJavaScript で作成します。
新しいマクロの追加 → マクロの種類：カスタムJavaScript
表示されるテキストエリアに以下のコードを記述します。
function(){
// ---- 初期化
var d = document;
var b = d.body;
var nowScrollTop = 0; // 返し値格納用変数
// 現在のスクロール位置
var scrollHeight = d.documentElement.scrollTop || b.scrollTop;
// ページの高さ
var pageHeight = Math.max.apply( null, [b.clientHeight , b.scrollHeight, d.documentElement.scrollHeight, d.documentElement.clientHeight] );
// 表示領域の高さ
var viewHeight = d.documentElement.clientHeight || b.clientHeight;
// ---- 計算
if(pageHeight <= viewHeight){ // -- スクロール無しで全表示可能な場合は100％扱い
nowScrollTop = 100;
}else{ // -- スクロールバー有りの場合
// パーセントで、10パーセント単位の数値を取得
nowScrollTop = Math.round(((scrollHeight + viewHeight) / pageHeight) *10) * 10;
switch(nowScrollTop){ // -- 20パーセント単位に変更
case 10:
nowScrollTop = 0;
break;
case 30:
nowScrollTop = 20;
break;
case 50:
nowScrollTop = 40;
break;
case 70:
nowScrollTop = 60;
break;
case 90:
nowScrollTop = 80;
break;
}
}
// ---- 値の取得
return nowScrollTop;
// 現在のスクロール位置に応じて、0/20/40/60/80/100の6段階のパーセンテージの数値を返します。
// ただし、ページがとても縦に長いページでない限り、0にはなりません。（ファーストビューで20％前後を表示済みのため）
}※Googleタグマネージャーに新しく追加されたマクロ「カスタムJavaScript」｜コラム アユダンテ株式会社を使わせていただきました。
マクロ名は任意のものをつけてください。ここでは『scrollevent』とします。そして保存してください。
3.マクロの登録その2
ここが私がひっかかっていた最大のポイントです。
実はもう1つマクロの作成が必要なんです。（他のブログやGoogleのヘルプでは言及されていないので、もしかしたら最初からあるのかもしれません。）
新しいマクロの作成 → カスタムイベント
「マクロのタイプ」が「カスタムイベント」なマクロを作成します。何も入力する項目はありません。このマクロはルール作成のためだけに使用します。
4.ルール作成
マクロとタイマーリスナータグを紐付けするためのルール作成します。
新しいルールを作成 → 任意の名前を入力 → 条件を入力 → 保存
ここでは、取りたい値の数だけルールを作成します。
今回は、マクロの カスタムJavaScript で0％・20％・40％・60％・80％・100％ の6個値を設定したので、同じ数だけ作成します。
ルールの中身は以下のようになります。
〈100％の場合〉
- ルール名：timer5_100％
- 条件1：[{{scrollevent}}][等しい][100]
- 条件2：[{{event}}][等しい][timer]
この2つの条件を1つのルールとして作成します。 これを値の数だけ数字を変えて作成してください。
5.GoogleAnalyticsタグ を作成
イベントを Google Analytics で取得するためのタグを作成します。
新しいタグの作成 → タグの種類：GoogleAnalytics→ webプロパティID：GoogleAnalyticsのID → トラッキングタイプ：イベント
「3」と同様に取りたい値の数だけタグが必要です。
内容は以下のようになります。
〈100％の場合〉
- カテゴリ：[scroll]
- 操作：[{{url}}]
- ラベル：[100]
- ルール：「3」で作成した同じ値のものを追加
このようなタグを取得する数値の分だけ作成します。
6.バージョン作成、公開
ここまで来たら準備はととのいました！
バージョン → バージョンを作成 → プレビューとデバック → 公開
バージョンを作成して、プレビューで問題がなければ設定完了です。Google Analyticsで集計に反映されるのには時間がかかりますが、リアルタイム＞イベントで現在起こっているイベントは確認することができます。
値をどのように活用するか
さて、やっと値を取得することができましたね。 後の URL でどれだけのユーザーがどこまでスクロールしたかがわかります。
しかし！
5秒ごとにイベントが起こり続け、すべて値を取得してしまうため、どこで離脱したのかまでは特定できないのが現状です。今回の場合、サイトのすべてのページでタグを有効にしましたが、ボリュームのあるページに単体で使用すれば、ページのどのあたりにユーザーが注目して長く留まっているかなどはわかりそうです。。。
ということで、まだまだ新しい機能で、資料や参考サイトが少ない中、作業しましたが、明確な活用法は編み出せておりません。笑
これからも精進したいと思います。長々お読みいただきありがとうございました。
※追記
イベントトラッキングを行うと、直帰率の測定に影響が出てしまっていましたが、この改善方法がわかったので追記させていただきます！
Googleタグマネージャー のイベントトラッキングタグの要素には『非インタラクティブ』という項目があります。これは未設定のままでもイベントトラッキングには支障ありませんでした。
しかしこの値を『true』にすることで、イベントトラッキングの呼び出しによる直帰率の減少は避けられます。直帰率が上がっても嬉しくはないですが、正しい値を計測して役立てようということで・・・
簡単に設定できるのでやってみてください。
この続きは、下記の記事をご覧ください。
