2016.05.11

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

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

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

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

HTML 側の設定
- 計測対象の要素（タグ）に id を割り振る
GTM側の設定
プレビューと公開
値の見方

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.変数の作成

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

現在のスクロール位置

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

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

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

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

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

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

各要素別の変数

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”」の部分を変更して、要素の数だけ変数を作成してください。

要素取得変数

ユーザーの現在のスクロール位置から、直前に見た要素を判断して返します。この 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.スクロール位置（要素）を取得するイベント用のタグを作成

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

タグ > 新規

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

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

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

タグを設定

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

に設定します。

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

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

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

「配信するタイミング」（トリガーの設定）

タグを動作させるためのトリガーを作成します。

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

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

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

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

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

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

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

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

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

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

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

ページを読み込んだ時、必ずページトップの値（今回は「00」）を読み込むタグを作成します。

1、2タグを新規作成、設定は先程のタグと同様 3のタグも「非インタラクションヒット」の設定に注意してください。イベントラベルのみ「00」に設定します。 4のタグはページを読み込んだ時に一回動作すれば良いので、タイマーは使わずにページ範囲の指定だけ行うトリガーを設定します。（下の画像では「すべてのページ」を指定しています）