Googleタグマネージャの新しいトリガー「スクロール距離」「要素の表示」を試してみた

Last updated at 2017-11-30Posted at 2017-11-30

ディップ Advent Calendar 2017 の1日目です。

先日『できる逆引き Googleアナリティクス増補改訂2版』が発売されたり、
『Googleアナリティクス個人認定資格（GAIQ）』が切れそうだったので受け直してみたり...
と、自分の中でGoogleアナリティクス（GA）やGoogleタグマネージャ（GTM）の熱が上がっていたため、
その勢いで、気になっていたGTMの新しいトリガー「スクロール距離」「要素の表示」を試してみました。

新しいトリガーについて

スクロール距離

ページがスクロールされた距離に応じてタグを配信させることができます。
縦横どちらのスクロールも可能。「割合」か「ピクセル数」のどちらかで閾値を指定します。

これまでは、カスタムHTMLタグでJavaScriptを組み込んで実装する必要がありましたが
このGTMのトリガーを使うことで、より簡単にスクロール距離を計測できるようになりました。便利！

要素の表示

ページ内の「特定の要素が表示されたとき」にタグを配信させることができます。
「表示された」とは、その要素までスクロールする、スタイルを変更してその要素を表示する...等のことです。
また、起動のタイミングも1度きりだったり表示されるたびだったりと設定できます。

このトリガーは以下のような場合に活用できます。

あるバナーが何回表示されたかを計測したい
モーダルウィンドウが何回表示されたかを計測したい
無限スクロール型のページでスクロールされた位置を計測したい　等

では、さっそく試していきます。
今回は、それぞれのトリガーを使って、GAでイベントを計測したいと思います。

前提

ここから先は、以下の準備が整っている前提で話を進めます。

GA（ユニバーサルアナリティクス）の設定が完了している
GTMの設定が完了している
ウェブサイトへのGTMタグの設置が完了している
GTMによるGAタグの配信設定が完了している

「スクロール距離」によるイベント計測

1. トリガーの設定

左メニューの[トリガー]から画面を開き、[新規]ボタンを押下
[トリガーのタイプを選択して設定を開始...]を押下
「トリガーのタイプを選択」から[スクロール距離]を選択
「縦方向」か「横方向」のどちらかを選択（今回は縦方向を選択）
「割合」か「ピクセル数」のどちらかを選択（今回は割合を選択）
閾値を「,」区切りで入力
トリガーの発生場所を設定（今回は一部のページを指定）
トリガーに名前を付けて、[保存]ボタンを押下

2. 組み込み変数の有効化

「スクロール距離」トリガーが発動すると、次の3つの組み込み変数に値が入ります。

Scroll Depth Threshold
- スクロール距離を示す数値
  - 割合の場合: 0～100の数値
  - ピクセル数の場合: 閾値として指定されているピクセル数
Scroll Depth Units
- 閾値の指定に使用されている単位
  - 割合の場合: percent
  - ピクセル数の場合: pixels
Scroll Direction
- トリガー発動につながったスクロールの方向
  - 縦方向の場合: vertical
  - 横方向の場合: horizontal

今回は、GAで閾値を計測したいので、これらの組み込み変数を有効化しておきます。

左メニューの[変数]から画面を開き、組み込み変数の[設定]ボタンを押下
「組み込み変数の設定」で3つの変数のチェックをONにする

3. イベント計測タグの設定

左メニューの[タグ]から画面を開き、[新規]ボタンを押下
[タグタイプを選択して設定を開始...]を押下
「タグタイプを選択」から[ユニバーサルアナリティクス]を選択
「トラッキングタイプ」は[イベント]を選択
「イベントトラッキングパラメータ」を設定（今回は以下の通り）
- カテゴリ: scroll
- アクション: {{Page Path}}
- ラベル: {{Scroll Direction}} {{Scroll Depth Threshold}}{{Scroll Depth Units}}
- 非インタラクションヒット: 真　※直帰率に影響してしまうので忘れずに！
- Googleアナリティクス設定: GAのトラッキングIDを設定
[トリガーを選択してこのタグを配信...]を押下
「1. トリガーの設定」で作成したトリガーを選択
タグに名前を付けて、[保存]ボタン押下