未経験から100日後にGTMのプロになる話【Day 18】 〜要素の可視性トリガーの活用 〜「バナーは本当に見られているのか？」を計測する〜〜

■ なぜ「要素の可視性」を測るのか？

ページビューやスクロール率のデータだけでは、ユーザーが実際にページ内の重要な要素（CTAボタン、バナー、記事の結論部分など）を見たかどうかは分かりません。

例えば、 ✅ 「バナー広告は本当に見られているのか？」
✅ 「商品の説明部分までユーザーは到達しているか？」
✅ 「LPのCTAボタンはユーザーの視界に入っているのか？」

こうした情報が分かれば、より効果的なコンテンツ配置や広告改善が可能になります。

では、GTMの「要素の可視性トリガー」を使って、特定の要素がどれだけ表示されたかを計測してみましょう！

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

1. 要素の可視性トリガーを作成

1. GTMの「トリガー」メニューを開く。
2. 「新規」をクリックし、トリガーの種類を「要素の可視性」に設定。
3. 「ターゲットの選択方法」で CSSセレクタ を選択。
4. 「要素セレクタ」に .ad-banner（バナーのクラス名）を入力。
5. 「可視率」を 50% に設定（50%以上表示されたら発火）。
6. 「1回のみ発火」を選択。
7. トリガー名を「バナー可視性トラッキング」にして保存。

✅ これで、バナー広告が50%以上表示されたらトリガーが発火するようになります！

② GA4のイベントタグを作成する（可視性データを送信）

1. GA4の可視性イベントタグを作成

1. GTMの「タグ」メニューを開く。
2. 「新規」をクリックし、タグの種類を「Google アナリティクス: GA4 イベント」に設定。
3. 「設定タグを選択」で、すでに作成したGA4設定タグを選択。
4. 「イベント名」を banner_visible にする。

2. イベントパラメータを設定

1. 「イベントパラメータを追加」ボタンをクリック。
2. 以下のパラメータを追加。
3. パラメータ名: banner_id（値: .ad-banner）
4. パラメータ名: page_url（値: {{Page URL}}）
5. 保存。

✅ これで、バナー広告が視界に入ったときにGA4にデータが送信されるようになります！

③ トリガーをタグに設定する

1. 作成したGA4イベントタグの「トリガー」をクリック。
2. 先ほど作成した「バナー可視性トラッキング」トリガーを選択。
3. 保存。

✅ これで、ページ内の特定のバナーが表示されたときにタグが発火するようになりました！

④ プレビューモードで動作確認

タグを本番適用する前に、必ずプレビューモードでテストしましょう。

1. GTMの「プレビュー」を開く。
2. 計測対象のサイトを開き、バナーが表示されるまでスクロール。
3. デバッグツールの「Tags Fired（発火したタグ）」にGA4のタグがあるか確認。
4. GA4のリアルタイムレポートで banner_visible が記録されているか確認。

✅ 問題なくデータが送信されていることを確認したら、GTMの「送信」ボタンを押して公開！

⑤ GA4で要素の可視性データを分析する

要素の可視性データをGA4で分析し、バナーの閲覧状況を確認しましょう。

1. GA4の「エクスプローラ」でデータを分析

1. GA4の「レポート」→「エクスプローラ」を開く。
2. 「ディメンションを追加」ボタンをクリックし、「banner_id」を選択。
3. 「指標」に「イベント数」を追加。

✅ どのバナーがどれだけ表示されたか？ をGA4のレポートで確認できるようになります！

2. バナーの表示回数とクリック率の関係を分析

1. 「ディメンション」に「Page URL」を追加。
2. バナー表示回数とクリック数を比較。

✅ バナーが表示された回数とクリック数の関係を把握し、改善点を探ることができます！

■ まとめ 〜要素の可視性データを活用しよう！〜

今回の学びを整理すると...

✅ 要素の可視性トリガーを設定すれば、特定の要素がどれだけ表示されたか測定できる！
✅ GA4に「banner_visible」イベントを送信し、バナーの閲覧回数を記録できる！
✅ バナーの表示回数とクリック率を分析し、広告やCTAの配置を最適化できる！
✅ 「プレビューモード」でテストし、問題なければ公開する！

この設定を活用すれば、 - 「バナー広告がどれくらい見られているのか？」 - 「CTAボタンが視界に入っているのにクリックされない原因は？」 - 「ユーザーが興味を持ちやすいコンテンツの配置は？」

といったデータを収集し、施策に活かせるようになります！

■ 明日の予告 〜トリガー条件の組み合わせと正規表現〜

次回は、「トリガーの条件を細かく制御する方法」 を解説し、

• 「複数の条件を組み合わせる」
• 「正規表現を使ってより柔軟にタグを発火させる」

といったテクニックを学びます。

明日も引き続き、GTMの実践スキルを磨いていきましょう！