要素の表示トリガー

Google タグ マネージャーの要素の表示トリガーは、選択した要素がウェブブラウザのビューポートに表示されると発動します。要素を表示させるイベントには、ページの読み込み、ページのスクロール、ブラウザタブのフォアグラウンドへの移動、要素の位置や表示に影響を与える自動タスクなどがあります。

要素の表示トリガーを設定するには:

  1. [トリガー] 次に [新規] をクリックします。
  2. [トリガーの設定] をクリックして、[要素の表示] を選択します。

[選択方法] メニューで、要素の指定方法(ID 属性または CSS セレクタ)を選択します。

  • ID: 要素の ID 属性の値を基準に、単一の要素を選択します。
  • CSS セレクタ: CSS セレクタのパターンを指定することで、1 つ以上の要素を選択します。

このトリガーを発動するタイミングを決める次のオプションがあります。

  • 1 ページにつき 1 度: 各ページ 1 回だけトリガーが発動します。指定した ID や CSS セレクタに一致する要素が同じページ内に複数ある場合は、そのうちのいずれかが初めて視認可能になったタイミングでのみ、トリガーが発動します。ユーザーがページを再読み込みしたり、新しいページに移ったりすると、トリガーはリセットされ、指定した要素の視認可能性に応じて再度発動します。
  • 1 要素につき 1 度: 各ページで、指定した要素ごとに 1 回だけトリガーが発動します。指定した CSS セレクタに一致する要素が同じページ内に複数ある場合は、要素ごとに初めて視認可能になったタイミングで、トリガーが発動します。同じ ID を持つ要素がページ内に複数ある場合、最初に一致した要素についてのみトリガーが発動します。ただし、[詳細] 設定で [DOM の変化をモニタリング] をオンにしている場合、最初に一致した要素がモニタリング対象の DOM の変化によって削除されれば、同じ ID を持つ別の要素によって再びトリガーが発動することもあります。ユーザーがページを再読み込みしたり、新しいページに移ったりすると、トリガーはリセットされ、指定した要素の視認可能性に応じて再度発動します。
  • 各要素が画面に表示されるたび: 条件に一致した要素が視認可能になる(プログラムによるか、ユーザー操作により)たびに、トリガーが発動します。

詳細

  • 視認の最小割合: デフォルトは 50% で、要素の半分以上が画面内に表れていなければイベントは呼び出されません。ここでは、選択した要素の何パーセント以上が画面内に表示された場合にトリガーを発動させるかを指定します。

  • 画面上での最小表示時間を設定: チェックボックスをオンにすると、選択した要素のうち、[視認の最小割合] で指定したパーセントが何ミリ秒間にわたって視認可能だった場合にトリガーを発動させるか、指定することができます。デフォルトではオンになっていないため、要素が視認可能になった時点でトリガーが発動します。

    注: 各要素の表示時間は、ページごとの累計値で計算されます。よって、ある要素が 5,000 ミリ秒間にわたって視認可能だった後、いったん見えなくなり、その後もう一度 5,000 ミリ秒間表示された場合は、表示時間は 10,000 ミリ秒間と認識されます。ユーザーがページを再読み込みしたり、新しいページに移ったりすると、トリガーも表示時間もリセットされます。

  • DOM の変化をモニタリング: チェックボックスをオンにすると、DOM の変化によって表示有無が変化する要素も、トリガーの監視対象となります。

[画面上での最小表示時間を設定] や [DOM の変化をモニタリング] がオンの場合、Google タグ マネージャーは選択された要素の状態をモニタリングします。条件に合致する要素がページ内に複数ある場合、ページのパフォーマンスが影響を受けることがあります。良好なパフォーマンスを維持するには、多数の要素が一致する CSS セレクタを指定しないよう注意するか、ID による要素選択を使用してください。

「要素の表示」トリガーが発動すると、次の変数に自動的に値が入力されます。

  • Percent Visible: トリガー発動時点で、選択した要素の何パーセントが視認可能かを、0~100 の数値で示した値です。

  • On-Screen Duration: トリガー発動時点で、選択した要素が視認可能だった時間の長さを、ミリ秒単位の数値で示した値です。

この情報は役に立ちましたか?
改善できる点がありましたらお聞かせください。