トリガー

トリガーとは、ランタイム時に true か false を判別する条件です。タグが配信されるタイミングは、そのタグに付加したトリガーで決まります。

概要

タグを配信するには、少なくとも 1 つトリガーを設定する必要があります。トリガーはランタイム時に読み込まれ、条件が一致する場合に関連するタグが配信されます(一致しない場合は配信されません)。たとえば、以下のようなフィルタのページビュー イベントに基づくトリガーが設定されているタグの場合は、「example.com」のホームページで配信されます。

URL が example.com/index.html と等しい

トリガーは 1 つのイベントと 1 つ以上のフィルタで構成され(フィルタが不要なカスタム イベントは除く)、それぞれのフィルタは [変数] [演算子] [値] の形式となります。

変数 演算子
urlreferrer などの中から選択します。 equalscontains などの中から選択します。 値を指定します。Google タグマネージャが指定された値と変数内のランタイム値を比較します。

上の例では、変数「url」がランタイム時に読み込まれます。変数「url」は、現在のページの URL を含むように定義されています。そのため、ランタイム時に現在のページの URL が指定した値「example.com/index.html」と比較され、トリガーの条件に適合しているかどうかが判断されるという仕組みです。

ウェブ用コンテナでは、page urlpage hostnamereferrer などの組み込み変数を利用できます。また、クリックベースのトリガーを設定すると、クリックされた要素の ID やクラスなどに対応する組み込み変数に自動的に値が入力されます。これらの変数を使えば、一般的に必要とされるほとんどのトリガーを設定できます。なお、自分で変数を定義して、その値をトリガーのフィルタで使うこともできます。詳しくは、変数についての記事をご覧ください。

タグマネージャには、URL やクリック ID といったデータの収集などで一般的に必要とされる多くの組み込み変数が用意されています。プルダウン メニューに組み込み変数を表示するには、事前にタグマネージャでそれらを有効にしてください。詳細

1 つのトリガーには複数のフィルタ([変数] [演算子] [値])を設定できます。トリガーが成立するのは、トリガー内の条件がすべて満たされた場合のみです。

タグの配信トリガーとブロック トリガー

タグはいずれかのトリガーが成立した場合に必ず配信されます。たとえば「すべてのページ」と「ページ ABC」という 2 つのトリガーが設定されている場合は、タグはすべてのページで配信されます。

タグの配信をブロックするトリガーは、配信トリガーよりも常に優先されます。たとえば配信トリガーとして「すべてのページ」、ブロック トリガーとして「URL が thankyou.html と等しい」が設定されている場合、「thankyou.html」ページでタグが配信されることはありません。

トリガーの種類

タグマネージャで配信されるタグは、すべてイベント駆動です。タグマネージャでイベントが記録されるたびにコンテナが読み込まれ、対応するタグが配信されます。どのようなタグでも、イベントが発生しないと配信することはできません。

イベントはページビュー、ボタンのクリック、フォームの送信、または自分で定義したカスタム イベントとなります。タグマネージャには、6 種類の既定のイベントと、カスタム イベントのオプションが用意されています。トリガーを設定する際は、まず関連付けるイベントの種類を選択します。既定のイベントの例は以下のとおりです。

ページビュー(ウェブ)

このイベントは、ユーザーのウェブブラウザにページが表示されたときに発生します。トリガーの種類のメニューから、ページの解析を開始した直後(ページビュー)、ブラウザでページの DOM 読み込みが完全に終了した後(DOM 準備完了)、または画像やスクリプトなどの埋め込みのリソースを含め、ページの読み込みが完全に終了した後(ウィンドウ準備完了)を選択し、さらに詳細に設定できます。タグが DOM か JavaScript 変数を使用して動的な値を取り込んでいる場合、トリガーによってページビューのタイミングを調整すると効果的です。DOM に対応して変数に値を入力するページビュー ベースのタグの場合は、変数に一貫した値が設定されるよう、トリガーの種類として必ず [DOM Ready] を選択してください。

クリック(ウェブ)

ユーザーがページのリンクや要素をクリックしたときにタグを配信するには、イベントの種類として [クリック] を選択します。

トリガーのフィルタでは、タグマネージャのパフォーマンスを最適化するため、クリックが発生するページの URL(または URL のパターン)を指定することをおすすめします。

ユーザーがページ上でフィルタに一致する要素をクリックすると、次の変数に自動的に値が入力されます(組み込み変数が有効になっている場合)。

  • Click Element: クリックされた HTML 要素。
  • Click Classes: 対象要素のクラス属性に設定されている値の配列。
  • Click ID: クリックされた要素の ID 属性。
  • Click Target: クリックされた要素のターゲット属性。
  • Click URL: クリックされた要素の HREF 属性(存在する場合)。
  • Click Text: クリックされた要素内の表示テキスト。

これらの変数をクリック トリガーのフィルタに含めることができます。たとえば、www.example.com/cart.html というページ上に以下のマークアップのボタンがあるとします。

<button type="submit" id="cart-add" class="addToCart" >カートに追加</button>

この場合はトリガーを次のように設定すると、ユーザーがこのボタンをクリックしたときにタグが配信されます。

トリガーの設定

トリガーの種類: Click - すべての要素
このトリガーの発生場所: 一部のクリック
Click ID が cart-add と一致
Page URL に example.com/cart.html が含まれる

また、クリックベースのトリガーでは、通常のリンクのクリックのみをリッスンするか([リンクのみ] オプション)、対象ページのすべての HTML 要素のクリックをリッスンするか([すべての要素] オプション)も指定できます。

通常はリンクがクリックされるとブラウザが新しいページを読み込むため、処理中の HTTP リクエストが中断されてしまいます。そのため、タグマネージャで配信したタグを適切に実行できるよう、次のページにリダイレクトする前に少しの遅延時間を設けることができます。[タグを待つ] オプションをオンにすると、すべてのタグの配信が完了するか、または指定したタイムアウト時間が経過するか、どちらか早い方が発生するまでリンクの読み込みを遅らせることができます。

[妥当性をチェック] をオンにすると、リンクの読み込みが有効な操作と判断された場合のみタグを配信することができます。この設定をオフにすると、ユーザーがリンクのクリックを試みたときに、必ずタグが配信されます。詳細については、下記の [検証をチェック] の説明をご覧ください。

要素の表示(ウェブ)

「要素の表示」トリガーを使用すると、特定の要素(複数可)が視認可能になったときにタグを配信させることができます。選択された要素がビューポート内で視認可能になるか、視認可能なスタイル(非表示でない状態)になると、トリガーが発動します。要素を視認可能にするアクションとしては、ページの読み込み、ページのスクロール、ブラウザのバックグラウンド タブへの切り替え、要素の位置や適用スタイルの(コードによる)変更などがあります。

「要素の表示」トリガーの発動条件には、1 つまたは複数の要素を指定できます。要素の指定方法(ID 属性または CSS セレクタ)は、[選択方法] メニューで選択します。

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

次に、トリガーを起動するタイミングを指定します。

  • 1 ページにつき 1 度: 各ページ 1 回だけトリガーが発動します。指定した ID または CSS セレクタに一致する要素が同じページ内に複数ある場合は、そのうちのいずれかが初めて視認可能になったタイミングでのみ、トリガーが発動します。

    ユーザーがページを再読み込みしたり、新しいページに移ったりすると、トリガーはリセットされ、指定した要素の視認可能性に応じて再度発動します。

  • 1 要素につき 1 度: 各ページで、指定した要素ごとに 1 回だけトリガーが発動します。指定した ID または CSS セレクタに一致する要素が同じページ内に複数ある場合は、そのうちのいずれかが初めて視認可能になったタイミングでのみ、トリガーが発動します。

    選択方法として「ID」を指定している場合、基本的には「1 ページにつき 1 度」オプションと同じ動作になります。同じ ID を持つ要素がページ内に複数ある場合、最初に一致した要素についてのみトリガーが発動します。ただし、[詳細] 設定で [DOM の変化をモニタリング] をオンにしている場合、最初に一致した要素がモニタリング対象の DOM の変化によって削除されれば、同じ ID を持つ別の要素によって再びトリガーが発動することもあります。

    ユーザーがページを再読み込みしたり、新しいページに移ったりすると、トリガーはリセットされ、指定した要素の視認可能性に応じて再度発動します。

  • 各要素が画面に表示されるたび: 条件に一致した要素が視認可能になるたびに、トリガーが発動します。ID が「foo」の要素の視認可能性に応じて発動するトリガーについて考えてみましょう。ユーザーがページをスクロールして、要素「foo」が視認可能になると、トリガーが発動します。ユーザーがそのままページ内の別の部分へと読み進んだ後、再び「foo」が見える位置まで戻ってくると、もう一度トリガーが発動します。

詳細オプション

  • 視認の最小割合: 選択した要素の何パーセント以上が視認可能なときにトリガーを発動させるか指定します。デフォルトは 50% で、要素の半分以上が画面内に表れていなければトリガーが発動しません。この設定ではたとえば、ユーザーがページをスクロールすることで、選択した要素が徐々にビューポートに入ってくる場合、ビューポート内の面積が要素全体の 50% に達した時点でトリガーが発動します。この設定を「100」に変更すると、要素全体(100%)がビューポートに入って初めてトリガーが発動することになります。

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

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

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

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

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

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

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

注: これらの組み込み変数を [変数] 画面で有効化しておく必要があります。

この他にも、ユーザー定義の自動イベント変数を設定すれば、トリガー発動時点での選択した要素の情報を収集することができます。

フォームの送信(ウェブ)

ユーザーがフォームを送信したときにタグを配信するには、トリガーのイベントとして [フォーム] を選択します。

トリガーのフィルタでは、タグマネージャのパフォーマンスを最適化するため、フォームの送信が発生するページの URL(または URL のパターン)を指定することをおすすめします。

フォーム送信のトリガーが成立すると、次の変数に自動的に値が入力されます。

  • Form Element: クリックされたフォーム要素。
  • Form Classes: フォームのクラス属性に入力されている値の配列。
  • Form ID: フォーム要素の ID 属性。
  • Form Target: フォーム要素のターゲット属性。
  • Form URL: フォーム要素の HREF 属性(存在する場合)。
  • Form Text: フォーム内の表示テキスト。

[タグを待つ] オプションをオンにすると、このトリガーが設定されているすべてのタグの配信が完了するか、または指定したタイムアウト時間が経過するか、どちらか早い方が発生するまでフォームの送信を遅らせることができます。この設定をオフにすると、処理が遅いタグについては、フォームの送信により次のページが読み込まれるまでに配信が間に合わない場合があります。

[妥当性をチェック] オプションをオンにすると、フォームが適切に送信された場合のみタグを配信することができます。オフにすると、ユーザーがフォームの送信を試みた時点で、必ずタグが配信されます。

履歴変更(ウェブ)

履歴変更のイベントに基づくトリガーは、URL の一部(ハッシュ)が変更されたとき、またはサイトで HTML5 pushState API が使用されたときにタグを配信します。このトリガーは、Ajax アプリケーションなどの仮想ページビューをトラッキングするタグを配信する場合に便利です。

履歴変更のイベントが発生すると、次の変数に値が入力されます。

  • History old url fragment: 変更前の URL の一部。
  • History new url fragment: 変更後の URL の一部。
  • History old state: 変更前の履歴状態のオブジェクト(サイトの pushState の呼び出しによって設定されます)。
  • History new state: 変更後の履歴状態のオブジェクト(サイトの pushState の呼び出しによって設定されます)。

JavaScript エラー(ウェブ)

この種類のトリガーは、(window.onError を使用して)捕捉できなかった JavaScript の例外が発生したときにタグを配信する場合に使用します。トリガーが成立すると、次の変数に値が入力されます。

  • Error message: JavaScript のエラー メッセージのテキストを含む文字列。
  • Error url: エラーが発生した場所の URL。
  • Error line number: コード内でエラーが発生した行の番号。

JavaScript エラートリガーでは、Google タグマネージャが読み込まれる前にエラーが発生しても報告されず、捕捉できなかった例外のみが報告されます。

スクロール距離(ウェブ)

「スクロール距離」トリガーを使用すると、ユーザーがページをどこまでスクロールしたかに応じてタグを配信することができます。次のようなオプションを指定可能です。

  • 縦方向スクロール距離: ユーザーがページ内をどれくらい下まで進んだかに応じて、タグを配信します。

  • 横方向スクロール距離: ユーザーがページ内をどれくらい右まで進んだかに応じて、タグを配信します。

1 つのトリガーで、縦と横の両方のスクロール距離について、それぞれタグを配信させることができます。トリガー発動条件となるスクロール距離は、ページの高さないし幅に対する割合(%)、またはピクセル数で指定します。割合の場合もピクセル数の場合も、値は正の整数で指定します。複数指定する場合はカンマ区切りで入力します。

たとえば、[縦方向スクロール距離] をオンにして [割合] を選択し、「10, 50, 90」と入力すれば、ページの上から 10%、50%、90% の地点がそれぞれトリガー発動ポイントになります。このトリガーをあるタグに適用した状態で、ユーザーがページ上端から 90% 下まで読み進んだ場合、トリガー発動ポイントを通過するたび、つまり合計 3 回にわたってタグが配信されることになります。トリガーが発動するのは、各ページで発動ポイントを初めて通過したときのみです。その後ユーザーがページ内を上下に移動することで同じ発動ポイントを通過しても、トリガーは発動しません。ページを再読み込みしたり、新しいページに移動したりすれば、再度トリガーが発動可能になります。

無限スクロール型のページや、サイズが大幅に変動するページの場合、「要素の表示」トリガーのほうが効果的かもしれません。

注: 「スクロール距離」トリガーの発動ポイントが、ページを読み込んだ時点でビューポートに入っている場合、ユーザーによるスクロールを待たずにトリガーが発動します。各トリガーが発動するのは、各ページで発動ポイントを初めて通過したときのみです。

「スクロール距離」トリガーが発動すると、次の組み込み変数に自動的に値が入力されます。

  • Scroll Depth Threshold: トリガー発動につながったスクロール距離を示す数値です。しきい値がパーセンテージの場合は 0~100 の数値、ピクセル数の場合はしきい値として指定されているピクセル数そのものが使用されます。

  • Scroll Depth Units: トリガー発動のしきい値の指定に使用されている単位(「ピクセル」または「%」)が値となります。

  • Scroll Direction: トリガー発動につながったスクロールの方向(「縦方向」または「横方向」)が値となります。

タイマー(ウェブ)

このイベントに基づくトリガーでは、設定した間隔でイベントをタグマネージャに送信できます。これにより、任意の頻度でタグマネージャ イベントを発生させることができます。このトリガーを使用すると、指定した間隔(ミリ秒単位)でイベントを発生させるためのカウントダウン タイマーが起動します。間隔を 5000 に指定すると、5 秒ごとにイベントが発生します。イベント名は、[イベント名] で指定した名前になります。その後、このイベント名を使用してカスタムのイベント トリガーを作成できます。たとえばタイマーベースのトリガーでイベント名を「timer5」に指定した場合、カスタム イベントベースのトリガーを作成し、イベント条件を「event が timer5 と等しい」とします。例については、Google アナリティクス イベントをご覧ください。[制限] はイベントを発生させる回数の上限です。空白にすると、ユーザーがページを離れるまでイベントが発生し続けます。

カスタム イベント(ウェブとモバイル)

カスタム イベントは、ウェブサイトやモバイルアプリで発生する可能性があるが、標準的な方法では処理されない操作をトラッキングするために使用します。最も一般的な例には、フォームの送信をトラッキングしたいが、フォームのデフォルトの動作が変更されているケースがあります(たとえば、ブラウザの送信イベントがオーバーライドされている場合など)。

次に、「button1-click」というカスタム イベントがデータレイヤーにプッシュされたときに、タグを配信するウェブの設定例を紹介します。

  1. ボタンがクリックされたときに、イベントをデータレイヤーにプッシュするコードを追加します。
    例: <a href="#" name="button1" onclick="dataLayer.push({'event': 'button1-click'});" >Button 1</a>
  2. タグを作成します。新しいタグ設定の [トリガーの設定] セクションで、次の設定を使って新しいイベントを作成します。
    トリガーの種類: カスタム イベント
    イベント名: button1-click
    このトリガーの発生場所: すべてのカスタム イベント

この設定なら、デフォルトの送信イベントがオーバーライドされていても、タグを配信できます。ボタンがクリックされると、button1-click の値を持つカスタム イベントがデータレイヤーにプッシュされます。タグマネージャは button1-click をカスタム イベントの値として検出し、タグを配信します。

ヒント: 標準かカスタムかに関係なく、イベントはすべてデータレイヤーのキューにプッシュされます。特定のページでデータレイヤーにプッシュされた一連のイベントを表示するには、JavaScript コンソールをウェブブラウザで開き、「dataLayer」と入力します。

data layer screenshot from Google Chrome
ヒント: dataLayer.push() を使用する場合は、イベントの発生時に複数の変数をまとめて送信可能です。たとえば、ボタンがクリックされたときにコンバージョンの値をプッシュできます(例: dataLayer.push({'event':'button1-click','conversionValue':25});)。さらに、タグマネージャでデータレイヤー変数を作成し、その変数を AdWords コンバージョン トラッキング タグのコンバージョン値フィールドで使用できます。

YouTube 動画(ウェブ)

YouTube 動画トリガーを使用すると、サイトに埋め込まれている YouTube 動画のさまざまな操作に基づいてタグを配信できます。

操作が行われるたびに、動画および再生状況に関するデータがデータレイヤーにプッシュされます。この動画データは、組み込み動画変数を使って取得できます。

基本的な取得オプション

  • 開始: 動画の再生が開始されると、タグが配信されます。
  • 完了: 動画の再生が終わると、タグが配信されます。
  • 一時停止、シーク再生、バッファリング: 動画の再生が一時停止されると、再生時間を示すバーが、シーク再生する場所に合わせて調整されます。動画のバッファリングが行われると、タグが配信されます。
  • 進捗状況: 動画の再生が特定のポイントに達すると、タグが配信されます。ポイントは割合かタイムスタンプ(秒単位)で設定します。
    • 割合: 動画が再生された割合を表す整数をカンマで区切って入力します。たとえば「5, 20, 50, 80」と入力すれば、5%、20%、50%、80% という指定になります。
    • 時間のしきい値: 動画が再生された秒数を表す整数を、時間のしきい値としてカンマで区切って入力します。たとえば「5, 15, 60, 120」と入力すれば、5 秒、15 秒、60 秒、120 秒という指定になります。
注: 割合と時間のしきい値によるトリガーは、そのしきい値に初めて達したときにだけ発動します。ユーザーがシーク再生によって割合または時間のしきい値を飛び越した場合、トリガーは発動しません。

詳細オプション

  • すべての動画に JavaScript API サポートを追加する: このチェックボックスをオンにすると、YouTube iFrame Player API が有効になります。これにより、値 1 を割り当てた enablejsapi パラメータが YouTube 動画プレーヤーの URL に追加され、iFrame や JavaScript を使ってプレーヤーをコントロールできるようになります。注: Google タグマネージャの読み込み時点で動画が再生中だった場合、動画の再読み込みが行われます。

注: YouTube 動画トリガーは、ページと同時に読み込まれた動画と、ページより遅れて読み込まれた動画の両方で利用できます。ただし、Google タグマネージャが読み込まれた時点で、次のうち少なくとも 1 つがあることが条件となります。

  • 埋め込み YouTube 動画
  • YouTube iFrame API <script>
  • YouTube iFrame API <script> を作成するコード(こちらの例を参照)。

正規表現や CSS セレクタを演算子として使用する

トリガー設定時に正規表現や CSS セレクタを演算子として使用することができます。トリガーに正規表現や CSS セレクタを演算子として使用する場合、適用するルールにトリガーが一致するかしないかを指定できます。たとえば、次の正規表現が URL や URL パス変数に適用されるとします。

/pro/

この場合、URL パスに「products」、「promotions」、「professionals」、「processes」など、文字列「pro」が含まれるすべてのページに一致します。

CSS セレクタは、HTML 要素をターゲティングするために使用できます。たとえば、次のセレクタが Click Element 変数に適用されるとします。

#promo .purchase

親の ID 属性値が「promo」で、クラス属性値が「purchase」の子要素に対するクリックと一致します。

トリガーにフィルタを追加する

トリガーのベースとなるイベントを選択したら、そのトリガーでタグを配信する条件をさらに詳しく指定することができます。条件として使用されるのはタグマネージャの変数の値です。ページビュー イベントの場合はページ URL、クリック イベントの場合はクリックされた要素 ID など、それぞれの既定イベントには自動的に入力される変数が設定されています。選択したイベントの種類に関連付けられた変数や、自分で作成したカスタムの変数を使用して、トリガーのフィルタを作成することができます。

カスタム イベントベースのトリガー以外では、トリガーを作成する際に少なくとも 1 つフィルタを指定する必要があります。

最後に、トリガーの名前を指定し、その他のオプション(選択したトリガーの種類によって変わります)を設定します。

トリガーと変数

タグで変数を使用する場合、そのタグに渡される値は、そのタグを配信したイベントが発生したときに、その変数に入力されていた値です。

たとえば以下のように、一連のデータレイヤーの更新が行われたとします。

Screenshot of chrome devtools showing objects in data layer

この場合、productView イベントのトリガーによってタグが 2 回配信されます。データレイヤー変数 productId に対応する変数の場合、値は最初のタグの配信時は「ABCD」、その後の配信時は「EFGH」となります。loggedInUser に対応するデータレイヤー変数の場合、値は最初に「no」に設定され、2 回目のタグ配信でも上書きされないため、どちらのタグ配信でも「no」となります。

addToCart イベントに先立つ dataLaye 更新で以前の値「no」から precededloggedInUser 変数が変更されたため、addToCart イベントのトリガーによって配信されるタグは、productId の値が「XYZ」、loggedInUser の値が「yes」の時に配信されます。loggedInUser 変数を「yes」に設定するデータレイヤー更新は、この更新に関連付けられたイベントがないためタグの配信には使用できません。

タグの一時停止

タグを一時停止すると、関連するトリガーをブロックすることで、タグの呼び出しを一時的に無効にすることができます。これは、タグを削除したりコンテナ設定のトリガーを調整したりせずに、タグの呼び出しを保留にする場合のトラブルシューティングや、時間指定のあるキャンペーンなどに役立ちます。

その変更を反映するには、一時停止済みまたは一時停止済みでないタグを保存して公開する必要があります。

タグを一時停止するには:

  1. [タグ] をクリックして一時停止したいタグを見つけ、リスト内の名前をクリックして開きます。
  2. その他の操作メニュー(その他アイコン)をクリックし、[一時停止] を選択します。
  3. 変更を保存して公開します。

一時停止されたタグに表示される一時停止アイコン: yellow circular pause icon

タグの一時停止を解除するには:

  1. [タグ] をクリックして一時停止したいタグを見つけ、リスト内の名前をクリックして開きます。
  2. [保存] の下にある [一時停止を解除] をクリックします。または、その他の操作メニュー(その他アイコン)を選択し、[一時停止を解除] を選択します。
  3. 変更を保存して公開します。