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

2017年10月24日
ライター:畑岡 大作

先日YouTube動画トリガーや正規表現の表変数などが実装されたと思ったら、またもやGoogleタグマネージャで新しい機能が実装されました。
今回実装されたのはページのスクロール率を計測するのに使える「スクロール距離」トリガーと、そしてページ内要素がユーザーへ表示されたタイミングで反応する「要素の表示」トリガーの2つです。また、これら新トリガーに関連する新しい変数も追加されていますので、合わせてご紹介します。

  1. ページのスクロール率計測に使う「スクロール距離」トリガー
    1. 設定例
    2. スクロール距離トリガーの細かい注意点
  2. 特定要素がユーザーに表示された際の計測に使う「要素の表示」トリガー
    1. 設定例
    2. 要素の表示トリガーの細かい注意点
    3. 「要素の視認性」変数で異なるトリガーでも条件として設定可能

ページのスクロール率計測に使う「スクロール距離」トリガー

そのページがどれぐらいスクロールされたかを計測したい、といった場合、今まではカスタムHTMLタグでJavaScriptを組み込んだり、はたまたタイマーリスナーを応用した設定などをする必要がありました。
しかし今回実装された「スクロール距離」トリガーを使えば、もっと簡単に「ページのスクロール」を計測できるようになります。

「スクロール距離」トリガーは名前の通り、ページ全体に対して「スクロールされた距離に応じて」反応するトリガーとなっています。

スクロール距離トリガーの設定画面
使用例
  • 縦に長いページで、ユーザーがどの程度スクロールしているかを計測したい
    (任意の%刻みでイベント計測などを行いたい)

なお「ページ内の特定のブロックまでスクロールされたかどうか」を計測したい場合は、ページによってそのブロックの位置が異なるため「スクロール距離」トリガーでは対応できません。
そのため「特定ブロックまでのスクロール」の計測については後述の「要素の表示」トリガーで代替しましょう。

設定項目などもシンプルにまとまっていますので、普通にGoogleタグマネージャを利用できる方であれば問題なく利用できると思います。
また、1つのトリガーで複数のしきい値を設定できるうえに「しきい値ごとに1度ずつしかタグを処理しない」仕様になっていますので、素直に使える安心設計です。

  1. 「トリガーの種類」で「ユーザー エンゲージメント > スクロール距離」を選択
    トリガーの種類 > ユーザー エンゲージメント > スクロール距離
  2. 計測したいスクロールの種類を選択(通常は縦方向スクロール距離が主になると思います)
    「縦方向スクロール距離」と「横方向スクロール距離」のいずれか、または両方をチェック
  3. パーセントで指定したい場合は「割合」を、実px数で指定したい場合は「ピクセル」を選択
    複数のしきい値を設定したい場合は「,」区切りで複数入力が可能
    「割合」または「ピクセル」を選択
  4. 「このトリガーの発生場所」で他トリガー同様に必要に応じた条件を設定
    (例えば特定ページだけにしたければ、この欄でPage URL変数などを使ってページを特定する条件を設定) 「このトリガーの発生場所」
  5. 保存して完了

なお「スクロール距離」トリガーの実装に伴い、関連する変数として新たに以下の3つが追加されています。
ユーザー定義変数ではなく「組み込み変数」への追加ですので、ご注意ください。

組み込み変数のスクロール変数
組み込み変数名 説明 値のサンプル
Scroll Depth Threshold トリガーが呼び出されたイベントでの、トリガーで設定されたしきい値。
例えば50, 100とトリガー側のしきい値で設定していた場合、この変数の値を見ることで50と100のどちらに合致して呼び出されたのか、が判別できる。
50
Scroll Depth Units トリガーが呼び出されたイベントでの、トリガーで設定したしきい値の単位。 「割合」であればpercent
「ピクセル」であればpixels
Scroll Direction トリガーが呼び出されたイベントでの、トリガーで設定したスクロールの方向。 「縦方向」であればvertical
「横方向」であればhorizontal

呼び出されたトリガーの設定内容に応じて異なる値となる、いわば「トリガーの設定内容」を取得するための変数です。
今までの他の変数(現在の状況を取得するものがほとんど)とはちょっと毛色が違いますので、その点はご留意ください。

具体的なトリガーと変数の使い方のサンプルとして、次にまとめて見ました。

設定例

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

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

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

スクロール距離トリガーの設定例
「縦方向スクロール距離」で「割合」を選択し、しきい値には「50, 75, 90」と入力
「このトリガーの発生場所」では「一部のページ」を選び、{{Page Path}} [先頭が一致] [/column/201]と入力

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

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

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

組み込み変数で有効化
変数ページにて、組み込み変数でScroll Depth Threshold変数を有効化
GAのイベント計測タグを登録
「カテゴリ:ページスクロール」「アクション:{{Page Path}}」「ラベル:{{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現在での仕様ですので、将来的にはリンククリックトリガーやフォームの送信トリガーのように、トリガーの有効化条件が設定できるようなったりすることを期待したいところです。

特定要素がユーザーに表示された際の計測に使う「要素の表示」トリガー

ページ全体のスクロール率の計測ではなく、ページ内の「特定要素がユーザーへ表示されたかどうか」を計測する場合は「スクロール距離」トリガーではなく、こちらの「要素の表示」トリガーを使います。
また特定要素の表示は「特定要素が掲載されている位置までスクロールされた」ことも意味しますので、「特定ブロックまでスクロールされたかどうか」を計測する場合も「スクロール距離」トリガーではなく「要素の表示」トリガーの出番となります。

「要素の表示」トリガーは名前の通り、指定した特定要素(バナーやらフッターやら任意の要素)がユーザーの表示領域内に出てきた場合に反応するトリガーです。

要素の表示トリガーの設定画面
使用例
  • バナーが表示された回数を計測したい
  • モーダルウィンドウが表示された回数を計測したい
  • ブログ記事の最後までユーザーがページをスクロールさせたかを計測したい
  • ブログ記事の本文が10秒以上読まれていた場合に計測したい

使い方は「DOM要素変数のように特定要素を指定」して、そのうえで「トリガーが起動するタイミング」を設定します。ちなみに要素の「選択方法」を「CSSセレクタ」にした場合は、合致する要素すべてをそれぞれ対象にできます。
また、オプションで「要素の何割が表示されたら『表示された』とみなすか」や「一定の時間表示されたら」や「AJAX(SPA)対応」などを設定するためのオプションもあります。

  1. 「トリガーの種類」で「ユーザー エンゲージメント > 要素の表示」を選択
    トリガーの種類 > ユーザー エンゲージメント > 要素の表示
  2. 要素の指定方法を選択(DOM要素変数と同様)
    「選択方法」でIDで選ぶかCSSセレクタで選ぶかを選択し、それぞれ指定する。複数指定する場合は「CSSセレクタ」を選ぶ
  3. 「このトリガーを起動するタイミング」を選択
    「このトリガーを起動するタイミング」
    「1ページにつき1度」……指定した要素が複数あった場合でも、1度しかこのトリガーは反応しない
    「1要素につき1度」……指定した要素が複数あった場合、それぞれの要素ごとに1度ずつトリガーは反応する
    「各要素が画面に表示されるたび」……指定した要素が表示されるたびに、何度でもトリガーは反応する
  4. 「視認の最小割合」で要素の何パーセントが表示されたら、という条件を指定
    「視認の最小割合」
  5. オプションで「最小表示時間」と「DOMの変化をモニタリング」を必要に応じて設定
    「最小表示時間」と「DOMの変化をモニタリング」
    「最小表示時間」……指定した要素が何ミリ秒以上表示された場合、という条件を設定する項目(表示されている間の合計時間で判定)
    「DOMの変化をモニタリング」……AJAXやSPAなど向けの対応。ページのHTML構造(DOM)が変わった場合に、変わった後の要素にも指定要素がないかを判定継続する項目
  6. 「このトリガーの発生場所」で他トリガー同様に必要に応じた条件を設定
    (例えば特定ページだけにしたければ、この欄でPage URL変数などを使ってページを特定する条件を設定) 「このトリガーの発生場所」
  7. 保存して完了

設定項目はいくつかありますが、基本としては「要素の指定」と「タイミング」が主ですね。
多くは「1要素につき1度」タイミングを選び、必要に応じてオプションの「視認の最小割合」と「最小表示時間」を設定することになると思います。

特に「最小表示時間」オプションは使い勝手がよく、例えば「一瞬だけ表示されても見られているとは言えないので1000(1秒)と設定しておく」や「じっくり読まれていた場合に反応させたいので10000(10秒)と設定しておく」のように、使い方によってはいろいろと便利に応用できそうです。

またスクロール変数と同様に、要素の表示トリガーでも関連する可視性変数が追加されています。
こちらも組み込み変数から追加する形となります。

組み込み変数の可視性変数
組み込み変数名 説明 値のサンプル
Percent Visible トリガーが呼び出された時点での、指定した要素の画面内に表示されている割合(パーセント) 50(数値)
On-Screen Duration トリガーが呼び出された時点での、指定した要素の合計表示時間(ミリ秒)
各要素が要素の表示トリガーで呼び出されるたびに、0へリセットされるので注意
10000(数値)

上記は要素の表示トリガー反応時に使用する組み込み変数ですが、もし他のトリガー内の条件として「特定要素の表示状況」を使用したい場合は、別途「要素の視認性」変数を使います。こちらについては後述していますので、そちらをご参照ください。

設定例

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

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

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

要素の表示トリガーの設定例
「選択方法」および「要素セレクタ」欄でフッターに掲載している共通CV誘導ボタンを指定するだけでOK

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

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

GAのイベント計測タグ設定例
カテゴリ、アクション欄は任意の文字列で。ラベル欄で表示されたページを示すためにURLを含ませた

もしトリガー側で要素を指定する際、複数が合致するような指定をしていた場合は別途「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. 要素の指定方法を選択(DOM要素変数と同様)
    「選択方法」でIDで選ぶかCSSセレクタで選ぶかを選択し、それぞれ指定する。「CSSセレクタ」で設定した場合、もし複数合致する要素がページ内に存在していたら最初の1つ目の要素が参照される
  3. 「出力データ型」を選択
    「出力データ型」
    「True / False」……指定した要素が「視認の最小割合」以上見えていたらTrueが、見えていなかったらFalseが取得される
    「%」……指定した要素が現在何%表示されているか、を数値で取得される
  4. 保存して完了

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

先日はSafariのITP絡みの対処方法としてGoogleコンバージョンリンカーというタグ種別も加わっているなど、ここのところ連日のGoogleタグマネージャ新機能実装が続いております。Googleコンバージョンリンカータグについても具体的な使い方などまとまりましたら、また記事として提供できればと思いますが、間もなくGoogleアナリティクスの新しいタグとなるgTagも実装されるのではないかと考えられますし、なかなか忙しない今日この頃です。
より便利になっていくことに期待していきましょう。

この記事を書いた人
畑岡 大作
畑岡 大作
マークアップエンジニア

マークアップエンジニアとして活躍しながら昨今はGTMのスペシャリストに。日本初となる書籍を出版し、多くの顧客サイトのGTM設計、運用、アドバイスなどを行う。セミナー登壇も多数。好きな物はラノベ、ゲームからラーメン、万年筆(のインク)と幅広い。

最近書いた記事
著書