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

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

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

新しいトリガーについて

スクロール距離

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

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

要素の表示

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

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

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

---

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

前提

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

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

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

1. トリガーの設定

1. 左メニューの[トリガー]から画面を開き、[新規]ボタンを押下
2. [トリガーのタイプを選択して設定を開始...]を押下

3. 「トリガーのタイプを選択」から[スクロール距離]を選択
   

4. 「縦方向」か「横方向」のどちらかを選択（今回は縦方向を選択）

5. 「割合」か「ピクセル数」のどちらかを選択（今回は割合を選択）

6. 閾値を「,」区切りで入力

7. トリガーの発生場所を設定（今回は一部のページを指定）
   

8. トリガーに名前を付けて、[保存]ボタンを押下

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

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

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

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

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

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

1. 左メニューの[タグ]から画面を開き、[新規]ボタンを押下
2. [タグタイプを選択して設定を開始...]を押下
3. 「タグタイプを選択」から[ユニバーサルアナリティクス]を選択
4. 「トラッキングタイプ」は[イベント]を選択

5. 「イベントトラッキングパラメータ」を設定（今回は以下の通り）

   • カテゴリ: scroll
   • アクション: {{Page Path}}
   • ラベル: {{Scroll Direction}} {{Scroll Depth Threshold}}{{Scroll Depth Units}}
   • 非インタラクションヒット: 真　※直帰率に影響してしまうので忘れずに！
   • Googleアナリティクス設定: GAのトラッキングIDを設定

6. [トリガーを選択してこのタグを配信...]を押下

7. 「1. トリガーの設定」で作成したトリガーを選択

8. タグに名前を付けて、[保存]ボタン押下

4. GAでイベントの確認

タグの設定が完了したら、GTMのプレビュー機能を使って確認をしましょう。
GAのリアルタイムレポートでは、このように確認することができます。

「要素の表示」によるイベント計測

1. トリガーの設定

1. 左メニューの[トリガー]からトリガー画面を開き、[新規]ボタンを押下
2. [トリガーのタイプを選択して設定を開始...]を押下

3. 「トリガーのタイプを選択」から[要素の表示]を選択
   

4. 「選択方法」を選択（今回はIDを選択）

5. 「このトリガーを起動するタイミング」を選択（今回は「1ページにつき1度」を選択）

6. 「視認の最小割合」を設定（今回は50%で設定）

7. 「画面上での最小表示時間を設定」オプションを必要に応じて設定

   • 要素が表示された合計時間がこの設定値以上になった場合にトリガーが発動する（単位はミリ秒）

8. 「DOMの変化をモニタリング」オプションを必要に応じて設定

   • Ajax等でDOMが変更された後の要素に、一致する要素がないか計測する

9. トリガーの発生場所を設定（今回は一部のページを指定）
   

10. トリガーに名前を付けて、[保存]ボタン押下

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

「要素の表示」トリガーが発動すると、次の2つの組み込み変数に値が入ります。

• Percent Visible
  • トリガーが発動した時点で要素が表示されている割合（％）
    • 0～100の数値
• On-Screen Duration
  • トリガーが発動した時点で要素が表示されていた時間（ミリ秒）
  • トリガーが発動するたびにリセットされる

今回は使いませんでしたが、必要に応じて有効化して活用すると良いと思います。

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

「スクロール距離」の「3. イベント計測タグの設定」と同様なので、詳細は割愛...

4. GAでイベントの確認

「スクロール距離」の「4. GAでイベントの確認」と同様なので、詳細は割愛...

---

以上でお試し完了です！
自動イベント変数を活用して要素の情報を取ってきたりすれば、
GAでの計測がもっとちゃんとできそうな予感...