分析・解析

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

  • このエントリーをはてなブックマークに追加
  • Pocket
Googleタグマネージャで画面のスクロール位置を把握する方法

こんにちは。堀井です。

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

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

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

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

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

まずGoogleタグマネージャとGoogle Analyticsはには登録してある前提で進めます。
ちなみに私はこのサイトを参考に始めました。

【文系向け】Googleタグマネージャー導入マニュアル – SEMアドバイザーの揺さBrain!

基本のGoogle Analyticsタグの作成手順も割愛しますが、よければこちらをご参考に。

Googleタグマネージャ 初期設定の手順、使い方まとめ – SEO HACKS公式ブログ

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

①タイマーリスナータグを発行する

新しいタグを追加>タグの種類:イベントリスナー>タイマーリスナー

タグの名前は自分でわかれば何でも問題ありません。イベント名はここでは『timer5』とします。
間隔はイベントを実行する間隔の設定なので1000分の1秒単位で入力します。5000で5秒毎の呼び出しになります。配信のルールは『全ページ』のみ追加します。

Google Tag Manager

②マクロの作成

イベントから値を取得するためにマクロを作成します。
まず、スクロール量を取得するための記述をカスタム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』とします。そして保存してください。

Google Tag Manager2

③ マクロの登録その2

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

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

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

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

④ルール作成

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

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

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

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

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

〈100%の場合〉

・ルール名:timer5_100%
・ 条件1:[{{scrollevent }}][等しい][100]
・ 条件2:[{{event}}][等しい][timer]

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

Google Tag Manager5

④ GoogleAnalyticsタグを作成

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

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

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

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

〈100%の場合〉

・ カテゴリ:[scroll]
・ 操作:[{{url}}]
・ ラベル:[100]
・ ルール:③で作成した同じ値のものを追加

Google Tag Manager6

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

⑤バージョン作成、公開

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

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

バージョンを作成して、プレビューで問題がなければ設定完了です。

Google Analyticsで集計に反映されるのには時間がかかりますが、リアルタイム>イベント で現在起こっているイベントは確認することが出来ます。

イベント   Google Analytics

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

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

しかし!!!

5秒毎にイベントが起こり続け、すべて値を取得してしまうため、どこで離脱したのかまでは特定できないのが現状です。

今回の場合、サイトのすべてのページでタグを有効にしましたが、ボリュームのあるページに単体で使用すれば、ページのどのあたりにユーザーが注目して長く留まっているかなどはわかりそうです。。。

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

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

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

※追記

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

 

※さらに追記

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

 

Googleタグマネージャーのイベントトラッキングタグの要素には『非インタラクティブ』という項目があります。

これは未設定のままでもイベントトラッキングには支障ありませんでした。

しかしこの値を『true』にすることで、イベントトラッキングの呼び出しによる直帰率の減少は避けられます。

 

直帰率が上がっても嬉しくは無いですが、正しい値を計測して役立てようということで・・

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

運用型広告レポート自動化ツールアドレポ
  • follow us in feedly
  • このエントリーをはてなブックマークに追加