Googleタグマネージャへ新たに「スクロール距離」トリガーと「要素の表示」トリガーが登場

設定例

「特定のページで」「50、75、90％刻みで」「イベント計測を行う」場合は、以下のような設定となります。
今回は例として弊社サイトのブログ記事詳細ページを対象としていますが、トリガーのPage Path条件の箇所を変えていただけば他のページへも流用可能です。

設定の流れ

1. 「スクロール距離」トリガーを設定
2. 組み込み変数のScroll Depth Threshold変数を有効化
3. GAのイベント計測タグを設定

まず最初に、トリガーの設定を行います。

これだけで、50％、75％、90％のそれぞれのタイミングで反応するトリガーが用意できました。わざわざ複数のトリガーに分けて登録する必要がないのは楽で良いですよね。
ちなみに100％ではなく90％にしているのは「完全に一番下までスクロール」というのはレアケースであることと、またページの最下部にあるのは共通フッターですので、単純に「ページのメインコンテンツがどれだけ見られているか」であればフッターは含まなくても問題ないのが理由です。

ポイント

• しきい値は「,」（半角カンマ）区切りで複数指定が可能
• 「ページの一番下まで」を「割合」で指定する場合、100よりも90程度がオススメ

さて、トリガーが設定できたら、あとはイベント計測タグ側で必要なScroll Depth Threshold変数を有効化して、実際にイベント計測タグを設定しましょう。

ポイント

• 複数のしきい値をトリガー側で設定した際、イベント計測タグで「どのしきい値か」はScroll Depth Threshold変数で取得可能

もしスクロール率の箇所へ単位を入れたい、などの場合はScroll Depth Units変数も有効化して「{{Scroll Depth Threshold}}{{Scroll Depth Units}}」のようにすれば「50percent」みたいな形にできます。ご参考ください。

スクロール距離トリガーの細かい注意点

簡単に使えるスクロール距離トリガーですが、何点か使用上の注意点もあります。

留意点と注意点

• しきい値の判定は「〇〇以上」になっているため、複数設定した場合、ページ最下部でページリロードなどすると一度に全しきい値分トリガーが呼び出される
• Scroll Depth Threshold変数が取得する値は「その時点でのスクロール位置」ではなく「トリガーに設定した数値」となる
• スクロール距離トリガーが存在すると、そのトリガーにタグが何も紐づいていなくても、プレビューなどで見ると全ページでイベントが発生する

特に気になるのが、1つ目と3つ目ですね。

まず1つ目の留意点について解説すると、例えば「割合」で「50, 75, 100」と設定した場合にページの最下部などで再読み込みなどをすると、一度に50の分と75の分と100の分で3回トリガーが反応するわけです。
ですので、先に紹介した設定例のようにGAで各パーセントごとにイベント計測をするように設定すると、レポートで数値を見た場合にイベント数が50 > 75 > 100の大小関係になるので、あとは各ページのPV数と数値を見比べれば「そのページに訪れたユーザーの何割程度がどこまでスクロールしたか」を見ることができます。

次の3つ目についてですが、こちらは注意点です。端的に言うと「ユーザー環境への処理負荷が発生する懸念」と「プレビューでのデバッグ時にデバッグがしづらくなる」の2点が問題です。
ただあくまで実装直後の2017/10/20現在での仕様ですので、将来的にはリンククリックトリガーやフォームの送信トリガーのように、トリガーの有効化条件が設定できるようなったりすることを期待したいところです。

設定例

「全ページ」で「共通フッターに掲載している『お問い合わせはこちら』ブロックが表示された」場合は、以下のような設定となります。

設定の流れ

1. 「要素の表示」トリガーを設定
2. GAのイベント計測タグを設定

まず最初に、トリガーの設定を行います。
こちらが今回の本題ですね。

今回の例では非常にシンプルな要件ですので、この内容であれば上記のように「要素を指定するだけ」という簡易な設定となります。
なお上記は弊社サイトのHTMLをベースに設定例として掲載していますが、「要素セレクタ」欄の設定値は計測対象としたいブロックを示すものに書き換えてご利用ください。また、「このトリガーの発生場所」欄で条件を追加すればもっと詳細な条件下での計測が可能になります。

あとは実際にユーザーへ表示された際に行うイベント計測タグを設定して、このトリガーを紐づければ完了です。

もしトリガー側で要素を指定する際、複数が合致するような指定をしていた場合は別途「Click ID」や「Click Classes」変数などを利用すると、指定した要素のIDやclass属性の値が取得できますので覚えておくと良いでしょう。
はい。実はこの「要素の表示」トリガーはイベントリスナーの一種ですので、リンククリックトリガーやクリックトリガー、フォームの送信トリガーのように自動イベント変数で「表示された要素」の情報が取得できるのです。

ポイント

• Click ElementやClick IDなどの自動イベント変数で「表示された要素」の情報を取得可能

要素の表示トリガーの細かい注意点

こちらの要素の表示トリガーでも、スクロール距離トリガーと同様にいくつか利用上の注意点があります。

留意点と注意点

• 1画面に収まらない巨大なブロックを指定する場合、視認の最小割合の指定に注意
  （100％などにすると、大きさ的に1画面内に収まらないので発火しなくなる）
• 「各要素が画面に表示されるたび」を指定していても、表示中にスクロールしただけでは反応しないので大丈夫
  （一度画面外に外れてまた表示した場合に反応する）
• 初期表示画面内などで複数の対象が一度に表示された場合でも、問題なく動作する
  （要素数分、個別にイベントが発生する）
• CSSで対象要素の上に別の要素がかぶさっていて実際には見えない場合でも、トリガーは反応する
• CSSで非表示や画面外飛ばしなどをしていると、トリガーは反応しない
• IDで指定した場合、HTML内に同一IDが複数存在した場合（本来はHTML的にNG）は最初のIDの要素のみに反応する
• 要素の表示トリガーが存在すると、そのトリガーにタグが何も紐づいていなくても、プレビューなどで見ると全ページでイベントが発生する

特に気を付けなければいけないのは、1つ目の「視認の最小割合」の設定値ですね。
指定する要素が大きければ大きいほど、基本的に「視認の最小割合」は小さい数値（最低値は1）を指定しなければトリガーが反応しなくなってしまいますので注意が必要です。

また、最後に挙げていますがスクロール距離トリガーと同様にトリガーが存在するだけで、現状では全ページで判定が行われる仕様になっているようです。
おそらくさほど影響は出ないレベルかとは思いますが、ユーザー環境への処理負荷が懸念されますので、使用が終わった場合は忘れないうちにトリガーの削除をされることをおすすめいたします。

「要素の視認性」変数で異なるトリガーでも条件として設定可能

要素の表示時に計測したい場合は「要素の表示」トリガーで行いますが、もしリンククリックなどの「要素の表示」以外のトリガーで特定要素の表示状況を条件として使いたい場合は、別途新たに追加された「要素の視認性」変数を使います。
これは「要素の表示」トリガーを変数に変換されたような機能を持つ変数で、トリガーと同様に指定した要素が表示されているかどうかを取得する機能を持っています。

すでに要素タイプへ新たに加わっていますので、利用が可能です。

1. 「変数の種類」で「ページ要素 > 要素の視認性」を選択
   
2. 「出力データ型」を選択
   
   「True / False」……指定した要素が「視認の最小割合」以上見えていたらTrueが、見えていなかったらFalseが取得される
   「%」……指定した要素が現在何％表示されているか、を数値で取得される
3. 保存して完了

トリガーに比べるとおそらく使い道は限られると思いますが、例えば「ユーザーがCVボタンクリック時に画面内で特定要素が表示されているか」などを計測できるようになります。
変数ではトリガーよりもテクニカルな印象で、その分応用も利きそうですね。