分析・解析

GTM(タグマネージャ)でページのどの要素までスクロールしたかを計測する

by EVERRISE DXブログ編集部

はじめまして、石垣です。3月より新しくデジタルマーケティング室の一員となりました。

よろしくお願いいたします!

さて、アドテクブログで久々のGTM(Googleタグマネージャ)ネタです。

ページのスクロール位置を計測する方法をご紹介します!今までにご紹介した記事では、ユーザーが「ページ全体に対して何%までスクロールしたか」を見ていたのですが、今回は「html内のどの要素までスクロールしたか」を計測します!

前回の記事:

ランディングページのような長い構成のページでは、「この画像まで見てもらえたか」「この文章までスクロールされたか」のように、具体的な位置のほうが分析しやすい場合もありますよね。
htmlにも修正を加えなければなりませんが、試してみる価値はあると思います。

※今回から GTM の新バージョン(V2)での設定になります。
※この記事の情報は2016年05月現在のものです。

HTML 側の設定

計測対象の要素(タグ)に id を割り振る

では、この記事の HTML を見本に設定を行っていきましょう。

まずは計測したい要素に id を付与します。id を入れるのは HTML 内のどの要素でも構いませんが、必ずユニークな名前にしてください。今回は見出し(h3)ごとにidを割り振り、『scroll-01』『scroll-02』『scroll-03』『scroll-04』を作成しました。

id設定例

 
<h3 id="scroll-01">html側の設定</h3>
 

GTM側の設定

(1)有効な組み込み変数の「Page URL」にチェックを入れる

V2 から「組み込み変数」が使えるようになりました。組み込み変数とは、GTMにデフォルトで登録してあるいくつかの変数です。今回使う「Page URL」(現在のページのURL)にチェックを入れ、有効にします。

 
変数 > 有効な組み込み変数 > Page URLにチェックを入れる
 

チェックのない(=有効でない)組み込み変数は使用できないので注意してください。

(2)変数の作成

いくつか変数を作成していきます。

1.現在のスクロール位置

ユーザーが今いるページのトップからどこまでスクロールしたかを格納する変数です。

 
変数 > ユーザー定義変数 > 新規作成
 

で新しく変数を作成します。

「変数の種類」は「カスタムjavascript」にします。

JavaScript コードは下記になります。

 
function() { 
    var d = document;
    var b = d.body;
    // 現在のスクロール位置
    var scrollHeight = d.documentElement.scrollTop || b.scrollTop;
    return scrollHeight;
}
 
2.各要素別の変数

HTML に設定した id のそれぞれの位置を格納する変数です。変数はidの数だけ(今回は『01』『02』『03』『04』の4つ)作成します。

 
変数 > ユーザー定義変数 > 新規作成
 

で新しく変数を作成します。

「変数の種類」 は「カスタムjavascript」にします。

JavaScript コードは下記になります。

『01』の場合

 
function() {
    var element = document.getElementById("scroll-01");
    var bounds = element.getBoundingClientRect();
    var Y = bounds.top + window.pageYOffset; // 要素のY座標
    return Y;
}
 

変数名と、「getElementById(“scroll-01”)」の「”scroll-01″」の部分を変更して、要素の数だけ変数を作成してください。

3.要素取得変数

ユーザーの現在のスクロール位置から、直前に見た要素を判断して返します。この JavaScript を編集すれば、Google Analytics 上に記録する数値などを「現在のスクロール位置」などに置き換えることも可能です!

 
変数 > ユーザー定義変数 > 新規作成
 

で新しく変数を作成します。

「変数の種類」 は「カスタムjavascript」にします。

JavaScript コードは下記になります。

 
function() {
    var array = [ 
        // id のスクロール量と id名 の配列を作成
        [{{01}}, {{02}}, {{03}}, {{04}}],
        ['01', '02', '03', '04']
    ];
    var scrollTop = '00'; //初期値(トップ)
    for (var i = 0; i < array[0].length; i++) {
        // 現在値が id よりも下の位置にあれば、その id(=直前のid)の名前を scrollTop に格納
        if(array[0][i] < {{現在のスクロール位置}}){
            scrollTop = array[1][i]; //scrollTop に id名 を格納
        }
    }
    return scrollTop;
}
 

今回の方法では、現在のスクロール量以下の最後の要素の位置を返すようにしているため、「id のスクロール量と id名 の配列」はページの上から順番に並べるようにしてください。

(3)スクロール位置(要素)を取得するイベント用のタグを作成

イベントトラッキングのタグを作成します。

 
タグ > 新規
 

でタグを新規作成、任意のタグ名を入力

1. 「プロダクト」「Google Analytics」を選択

2. 「タグの種類」「ユニバーサルアナリティクス」を選択

3. タグを設定

 
「イベントカテゴリ」を「スクロール計測」
「イベントアクション」を「{{Page URL}}」
「イベントラベル」を「{{要素取得変数}}」
 

に設定します。

GTMでは {{変数名}} で、変数を使うことができます。

タグの設定で注意しなければならないのが 非インタラクションヒット です。イベントを計測した時に、直帰率に影響を与えたくない時は「」にします。

実際には1ページしか見ていない場合でも、スクロールをした=何かしらの動作をしたという意味で直帰ユーザーに含まないという場合は、非インタラクションヒットを「」にしてください。

4. 「配信するタイミング」(トリガーの設定)
タグを動作させるためのトリガーを作成します。

 
配信するタイミング > その他
 

 
既存のトリガーから選択 > 新規
 

でトリガーを新規作成、任意のトリガー名を入力

「イベント」は「タイマー」に設定し、「トリガーを設定」でタイマーの間隔を設定します。

ここでは「ミリ秒」で時間を指定する必要があるので、今回は「3000」と設定します。これで 3秒毎 にタグが実行されるようになります。タイマーの間隔は任意です。

「制限」はイベントを発生させる回数の上限です。今回は「空白(無制限)」にします。

※デフォルトでは空白のまま先に進めないようになっているので、一度何か数値を入力してから値を削除して空白にしてください。

「有効化のタイミング」ではタグを動作させたいページを指定します。すべてのページに適用させる場合は、下記のように「正規表現に一致」+「.*」と指定してください。

最後に、「配信するタイミング」を「すべてのタイマー」にしてトリガーの作成は完了です。

「タグを作成」を押して作成完了です。

(4)トップ表示を記録するイベント用のタグを作成

ページを読み込んだ時、必ずページトップの値(今回は「00」)を読み込むタグを作成します。
①② タグを新規作成、設定は先程のタグと同様
③こちらのタグも「非インタラクションヒット」の設定に注意してください。
イベントラベルのみ「00」に設定します。
④このタグはページを読み込んだ時に一回動作すれば良いので、タイマーは使わずにページ範囲の指定だけ行うトリガーを設定します。(下の画像では「すべてのページ」を指定しています)

プレビューと公開

設定が完了したら、「プレビューモード」で動作確認をします。
GTMを開いているブラウザでプレビューモードを有効にすると、公開した時と同じ状態でページを表示することができます。
思わぬトラブルを回避するためにも、プレビューモードでの検証は必ず行いましょう。

プレビューモードでは動作しているGTMのタグが画面下に表示されます。

値の見方

今回の設定を行うと、イベントレポートに値が表示されるようになります。

イベントアクション(=ページ)別のラベルのイベント数で、そのページでどの位置が見られていたかわかります。イベントの回数は「ユニークイベント数」を見ます。

『00』(=トップを読み込んだ回数)の数=ページヘのアクセス数です。
『00』のユニークイベント数に対して、他の値のユニークイベント数を比較することで、各要素までどのくらいの割合で見られているのかを知ることもできます!

長くなってしまいましたが、スクロール計測の設定方法は以上になります!

GTMで計測できるものはまだたくさんあります。
アドテクブログでは今後もGTMの活用方法をご紹介していきます!

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

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