分析・解析

Googleタグマネージャで画面のスクロール位置を把握する方法

by EVERRISE DXブログ編集部

こんにちは。堀井です。

webページでは、単純にPV数が多くてもサイトの内容を読んでもらえていなければ意味がありません。そこで、ユーザーのスクロール量を数字で取得することでどの辺りまで読んで離脱する人が多いのか知れたら便利ですよね?

そこで今回は、 Googleタグマネージャ(GTM) のイベントリスナーを使用したページスクロール量を取得するための手順についてご紹介します。 いくつかのサイトを参考に作業しましたが、結構手こずった部分があったのでそれを含めまとめています。

新しい自動イベントトラッキング機能

Googleタグマネージャ では複数のタグの管理が可能ですが、イベントリスナーを使用して任意のルールと紐付けすることで、より細かい条件でイベントトラッキングが可能になります。HTML に特別な記述をすることなく、自動で GTM からタグを発行できるようになるのです。

webページ上でのユーザーのスクロール量を取得する

まずGoogleタグマネージャとGoogle Analyticsはには登録してある前提で進めます。

ちなみに私はこのサイトを参考に始めました。
【文系向け】Googleタグマネージャー導入マニュアル – SEMアドバイザーの揺さBrain!

基本のGoogle Analyticsタグの作成手順も割愛しますが、よければこちらをご参考に。
Googleタグマネージャ 初期設定の手順、使い方まとめ – SEO HACKS公式ブログ

では、2つのツールが使える状態からスタートです。

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

ここが私がひっかかっていた最大のポイントです。

実はもう一つマクロの作成が必要なんです。(他のブログや Google のヘルプでは言及されていないので、もしかしたら最初からあるのかもしれません。)

 
新しいマクロの作成 → カスタムイベント
 

「マクロのタイプ」が「カスタムイベント」なマクロを作成します。何も入力する項目はありません。このマクロはルール作成のためだけに使用します。

4. ルール作成

マクロとタイマーリスナータグを紐付けするためのルール作成します。

 
新しいルールを作成 → 任意の名前を入力 → 条件を入力 → 保存
 

ここでは、取りたい値の数だけルールを作成します。

今回は、マクロの カスタムJavaScript で0%・20%・40%・60%・80%・100% の6個値を設定したので、同じ数だけ作成します。

ルールの中身は以下の様になります。

 
〈100%の場合〉
ルール名:timer5_100%
条件1:[{{scrollevent}}][等しい][100]
条件2:[{{event}}][等しい][timer]
 

この2つの条件を一つのルールとして作成します。
これを値の数だけ数字を変えて作成してください。

4. GoogleAnalyticsタグ を作成

イベントを Google Analytics で取得するためのタグを作成します。

 
新しいタグの作成 → タグの種類:GoogleAnalytics → ウェブプロパティID:GoogleAnalyticsのID → トラッキングタイプ:イベント
 

「3」と同様に取りたい値の数だけタグが必要です。

内容は以下の様になります。

 
〈100%の場合〉
カテゴリ:[scroll]
操作:[{{url}}]
ラベル:[100]
ルール:「3」で作成した同じ値のものを追加
 

このようなタグを取得する数値の分だけ作成します。

5. バージョン作成、公開

ここまで来たら準備はととのいました!

 
バージョン → バージョンを作成 → プレビューとデバック → 公開
 

バージョンを作成して、プレビューで問題がなければ設定完了です。Google Analytics で集計に反映されるのには時間がかかりますが、リアルタイム>イベント で現在起こっているイベントは確認することが出来ます。

値をどうやって活用するか

さて、やっと値を取得することが出来ましたね。
後の URL でどれだけのユーザーがどこまでスクロールしたかがわかります。

しかし!!!

5秒毎にイベントが起こり続け、すべて値を取得してしまうため、どこで離脱したのかまでは特定できないのが現状です。今回の場合、サイトのすべてのページでタグを有効にしましたが、ボリュームのあるページに単体で使用すれば、ページのどのあたりにユーザーが注目して長く留まっているかなどはわかりそうです。。。

ということで、まだまだ新しい機能で、資料や参考サイトが少ない中、作業しましたが、明確な活用法は編み出せておりません。笑

これからも精進したいと思います。

長々お読みいただきありがとうございました。

※追記

続きを書きました!【Googleタグマネージャで画面スクロール位置からユーザー離脱位置を取得する方法

※さらに追記

イベントトラッキングを行うと、直帰率の測定に影響が出てしまっていましたが、この改善方法がわかったので追記させていただきます!

Googleタグマネージャー のイベントトラッキングタグの要素には『非インタラクティブ』という項目があります。これは未設定のままでもイベントトラッキングには支障ありませんでした。

しかしこの値を『true』にすることで、イベントトラッキングの呼び出しによる直帰率の減少は避けられます。直帰率が上がっても嬉しくは無いですが、正しい値を計測して役立てようということで・・

簡単に設定できるのでやってみてください。

このエントリーをはてなブックマークに追加
この記事を書いた人:EVERRISE DXブログ編集部

「攻めのDX」をサポートする株式会社EVERRISEのブログです。