GTMの要素の可視性トリガーの使い方｜最小合計表示時間とビューアブルインプレッション｜未経験から100日後にGTMのプロになる話【Day 18】

クリック計測やスクロール計測だけでは、「バナーがそもそも画面に映ったのか」は分かりません。表示されていないものはクリックのしようがないので、CTAのクリック率が低いとき、原因が「見られていない」のか「見られたのに押されていない」のかを切り分けるために、要素の可視性トリガーが役立ちます。

要素の可視性トリガーを作成する

1. 「トリガー」→「新規」→種類は「要素の表示」
2. ターゲットの選択方法は「CSSセレクタ」、対象を.ad-bannerのように指定
3. 「最小可視範囲」は既定で50%（変更も可能）
4. 「1回のみ発火」にチェック
5. トリガー名を付けて保存

「表示された瞬間」か「一定時間見えていたか」を選べる

ここが今回の一番の実務ポイントです。既定では、要素が最小可視範囲を満たした瞬間にトリガーが発火します。しかし広告の「ビューアブルインプレッション」の考え方では、単に画面をよぎっただけでなく「一定時間、実際に見えていたか」が重視されます。GTMの詳細設定にある「最小合計表示時間」を有効にすると、指定したミリ秒数だけ要素が表示され続けた場合のみ発火するようになります。

ここで注意したいのは、この「合計表示時間」は連続している必要がないという点です。要素が5秒表示→スクロールで一度画面外→再度5秒表示、という場合でも、合計は10秒としてカウントされます。「連続で見え続けた時間」ではなく「トータルでどれだけ見えていたか」を測る仕組みだと理解しておいてください。

パフォーマンスへの配慮

最小合計表示時間を設定したり、DOM変更の監視を有効にしたりすると、GTMは対象要素の状態を継続的にウォッチし続けます。CSSセレクタが該当ページの多数の要素にマッチしてしまうと、常時監視対象が増えてページのパフォーマンスに影響することがあります。可能であれば対象をIDで一意に絞り込む方が安全です。

GA4に送るタグを作る

「Google アナリティクス: GA4 イベント」タグでイベント名をbanner_visibleにし、対象のバナーを識別するパラメータ（複数バナーがあるなら、要素側にdata属性でIDを振っておき、DOM要素変数で取得するのが確実です）とPage URLを設定して、作成したトリガーに紐付けます。

今日のまとめ

要素の可視性トリガーは、「表示された瞬間」で十分なのか、「一定時間見えていたか」まで見たいのかで設定が変わります。合計表示時間が連続でなくてもカウントされる点と、監視対象を広げすぎないパフォーマンス面の配慮を押さえておいてください。次回は、トリガー条件の組み合わせと正規表現を使った、より柔軟な発火条件の作り方を扱います。