Googleタグマネージャーのトリガーの設定例と発火させない方法

Googleタグマネージャーを利用しているからと言って、使いこなせているとは限りません。特に、利用者の力量によって差が出やすいのが「トリガー」の設定です。そこで今回は、利用頻度の高いトリガー設定の実例6種類と、iframe内でタグを発火させたくない場合の例外設定について画像付きで解説します。

Googleタグマネージャーの「トリガー」とは？

Googleタグマネージャーの「トリガー」とは、「いつ」タグを発動させるのか引き金となる「条件設定」を担っている要素です。

そもそもGoogleタグマネージャーは、「タグ」「変数」「トリガー」の三大要素を紐付けることで初めて効果を発揮します。

中でもトリガーは応用力が高く、初心者と極めている人とでは得られる効果の差も歴然です。

タグを発動させることを「発火させる」と言いますが、たとえタグや変数の設定が適切でも引き金となるトリガーが使いこなせていなければ期待通りの結果は得られません。

GTMにデフォルトで用意されているトリガーの種類

Googleタグマネージャーでは、あらかじめデフォルトとして様々なトリガーが用意されています。

ここでは、4種類のカテゴリーに分けてご紹介しましょう。

ページビューのトリガー3種類

下記3種類のトリガーは、いずれも「ページの読み込み」によってタグが配信されるという基本的な仕組みは同じですが、異なるのが「対象」と「トラッキングのタイミング」の2点です。

種類	対象	タグが配信されるタイミング
ページビュー	特定のURL	ページの読み込みを開始したタイミング
ウィンドウの読み込み	アクション	画像やスプリプトなどの読み込み完了後
DOM Ready	ページのHTML要素	読み込み完了後、DOM解析が可能になった後

インプレッションのみが必要な場合は「ページビュー」を、h1タグなどページ内のテキストを変数としてトリガーの条件にしたい場合は「DOM Ready」を、といった具合に使い分けることでより詳細なアクセス解析が可能となります。

クリックのトリガー2種類

デフォルトで用意されているクリックに関するトリガーは、下記の2種類になります。

▼クリックトリガーの種類と対象

• すべての要素：リンク、画像、ボタンなど全てを測定対象にしたい時に選択
• リンクのみ：HTML リンクのクリック、いわゆる「<a>タグ」のみが対象

エンゲージメントのトリガー4種類

デフォルトで用意されているエンゲージメントに関するトリガーは、下記の4種類になります。

▼エンゲージメントトリガーの種類と特徴

• YouTube 動画：埋め込み動画の再生時や完了時など、アクション別に設定できる
• スクロール距離：ページ内のどこまで閲覧されたのかを把握したい時に選択
• フォーム送信：お問い合わせなどをトリガーに活用したい時に選択
• 要素の表示：広告枠など、特定のエレメントが表示された時に選択

その他のトリガー5種類

その他、下記の5種類のトリガーがデフォルトで用意されています。

JavaScript エラー

カスタム イベント

タイマー

トリガーグループ

履歴の変更

利用頻度の高い6種類のトリガー設定

トリガーを使いこなせるようになりたい！という方は、まず下記の6種類から試してみましょう。

特定のページを指定して発火させるトリガー設定

トリガーの設定で最も多く使われているのが、特定のページに対してタグを発火させる設定でしょう。

ここでは、例題としてユーザーが購入完了ページを見た時に発火させる方法について解説します。

▼購入完了ページの設定

• 条件：コンバージョンに至ったサンクスページが表示された時に発火させる
• サンクスページのURL：https://example.com/buy/complete.php

1.　左側のサイドメニューから赤枠で囲ってある「トリガー」をクリック

2.　右上の赤枠で囲ってある「新規」をクリック

3.　赤枠で囲ってある「トリガー設定」をクリックし、右側に表示されたメニューバーから緑色の枠で囲ってある「ページビュー」をクリック

4.　「このトリガーの発生場所」から赤枠で囲ってある「一部のページビュー」をクリック

5.　赤枠で囲ってある3区分に下記の設定条件を入力し、右上の緑色で囲ってある「保存」をクリック

• 左側のプルダウンメニューから「Page URL」を選択
• 中央のプルダウンメニューから「含む」を選択
• 右側のドメイン名を除く「/buy/complete.php」を入力

TOPページや商品詳細ページでトリガーを発火させたい場合は、右枠に入力する値を下記の通りに変更して下さい。

▼使用例

	URL例	右枠で指定する値
購入完了ページ	https://example.com/buy/complete.php	/buy/complete.php
TOPページ	https://example.com/	「/」のみ
商品詳細ページ	https://example.com/item/item-name/	/item/item-name/

なお、左枠で条件を1つに限定する「Page URL」を選択した場合、中央の枠で完全一致を意味する「等しい」を選択してしまうと、末尾のクエリや「http」または「https」などの微妙な違いが合致せず、正確な結果が得られません。

左枠で「Page URL」を選択する場合の中央枠は、固定の部分のみを指定する「含む」を選択しましょう。

6.　赤枠で囲ってある「トリガー名」に任意の名称を入力し、緑色の枠で囲ってある右下の「保続」をクリックして完了

スマホのみに発火させるトリガー設定

PCとスマホのURLが同一の場合は、ブラウザのユーザーエージェントによって区別する必要があります。

ただし、GTMにはブラウザのユーザーエージェントがデフォルトで用意されていないため、トリガーを設定する前にJavaScriptで取得しておかなければなりません。

▼スマホの全ページでトリガーを発火させる手順

• 変数にブラウザのユーザーエージェントを追加する
• スマホの全ページに対してトリガーを設定

1.　左側のサイドメニューから赤枠で囲ってある「変数」をクリック

2.　「ユーザー定義変数」エリアの右上にある「新規」をクリック

3.　赤枠で囲ってある「変数の設定」をクリックし、右側に表示されたメニューバーから緑色の枠で囲ってある「JavaScript変数」を選択

4.　赤枠で囲ってある「グローバル変数名」に「navigator.userAgent」と入力し、右上の緑色の枠で囲ってある「保存」をクリック

5.　赤枠で囲ってある「変数名」に任意の名称を入力し、緑色の枠で囲ってある右下の「保続」をクリックすると変数にブラウザのユーザーエージェントが追加されて利用可能になる

6.　赤枠で囲ってある通り、「ワークスペースの変更」に「navigator.userAgent」が追加されているのを確認し、左側のサブメニューから緑色の枠で囲ってある「トリガー」を選択

7.　右上の赤枠で囲ってある「新規」をクリック

8.　赤枠で囲ってある「トリガー設定」をクリックし、右側に表示されたメニューバーから緑色の枠で囲ってある「ページビュー」をクリック

9.　 赤枠で囲ってある「一部のページビュー」を選択したら緑色の枠で囲ってある3区分に下記の設定条件を入力し、右上の青色で囲ってある「保存」をクリック

• 左側：手順5で入力した任意の名称「例：navigator.userAgent」を選択
• 中央：「正規表現に一致（大文字と小文字の違いを無視）」を選択
• 右側：「(ios|android|mobile)」を入力

10.　赤枠で囲ってある「トリガー名」に任意の名称を入力し、右下の緑色で囲ってある「保存」をクリックして完了

PCのみに発火させるトリガー設定

ブラウザのユーザーエージェントは、「スマホのみでタグを発火させる設定」で追加済みなので新たに設定する必要はありません。

また、手順8までは「スマホのみでタグを発火させる設定」と共通していますので、手順9から解説します。

9.　赤枠で囲ってある「一部のページビュー」を選択したら緑色の枠で囲ってある3区分に下記の設定条件を入力し、右上の青色で囲ってある「保存」をクリック

• 左側：入力した任意の名称「例：navigator.userAgent」を選択
• 中央：「正規表現に一致しない（大文字と小文字の違いを無視）」を選択
• 右側：「(ios|android|mobile)」を入力

「スマホのみでタグを発火させる設定」と異なるのは、中央で選択する項目だけ！右枠に入力した「(ios|android|mobile)」と一致しないブラウザのユーザーエージェントは、全てPCだと認識されます。

続いて、保存をクリックした後に表示される画面で任意のトリガー名「例：PC」を入力し、保存をクリックして完了です。

ページのスクロール距離に応じて発火させるトリガー設定

こちらは、ユーザーがページのどこまで見てくれたのかを把握するために有効な手段です。

「特定のページを指定してタグを発火させる設定」の手順2までは共通していますので、手順3から解説します。

3.　赤枠で囲ってある「トリガー設定」をクリックし、右側に表示されたメニューバーの「ユーザーエージェント」から緑色の枠で囲ってある「スクロール距離」を選択

4.　赤枠で囲ってある「縦方向スクロール」を選択して「割合」を表示し、緑色の枠に任意のスクロール数値（％）を入力してから青色で囲ってある右上の「保存」をクリック

5.　赤枠で囲ってある「トリガー名」に任意の名称を入力し、右下の緑色で囲ってある「保存」をクリックして完了

ページの滞在時間に応じて発火させるトリガー設定

例題として、特定ページの閲覧時間が5分に達したら時に発火するトリガー設定について見てみましょう。

こちらも、「特定のページを指定してタグを発火させる設定」の手順2までは共通していますので、手順3から解説します。

3.　赤枠で囲ってある「トリガー設定」をクリックし、右側に表示されたメニューバーの「その他」から緑色の枠で囲ってある「タイマー」を選択

4.　下記を参考に、赤枠の2項目と緑色の枠で囲ってある3区分を設定し、右上の青色で囲ってある「保存」をクリック

• 間隔（ミリ秒＝1／1,000秒）：1,000＝1秒／60,000＝1分／300,000＝5分
• 制限：設定した時間が経過する度にタグが出ないよう、「1」を入力
• 左側：「Page URL」や「Page Path」など、指定する条件を選択
• 中央：「含む」や「先頭が一致」など、指定する条件を選択
• 右側：ドメイン名を除く「/buy/complete.php」など、該当ページを指定

5.　「トリガー名」に「Timer-5分」など任意の名称を入力し、右下の「保存」をクリックして完了

YouTube動画の再生時に発火させるトリガー設定

JavaScriptなどを駆使した難易度の高いカスタマイズを実装している場合は別ですが、YouTube公式の「埋め込み機能」ならわずか5ステップでトリガーを設定することが可能です。

例題として、「YouTube動画が再生された時」にトリガーを発火させる設定について見てみましょう。

なお、こちらも手順2までは「特定のページを指定してタグを発火させる設定」と同じです。

3.　赤枠で囲ってある「トリガー設定」をクリックし、右側に表示されたメニューバーから緑色の枠で囲ってある「YouTube動画」をクリック

4.　赤枠で囲ってある「キャプチャ」の「完了」からチェックを外して「開始」のみを選択し、緑色の枠で囲ってある「すべての YouTube 動画に JavaScript API サポートを追加する」にチェックを入れて、右上の「保存」をクリック

5.　「トリガー名」に「YouTube-Start」など任意の名称を入力し、右下の「保存」をクリックして完了

一方、「動画の再生が完了した時」にトリガーを発火させたい場合は、手順4で「完了」だけを選択して下さい。

計測タグが狂った時の対処法！iframe内でタグを発火させないトリガー設定

iframe内でタグが発火した場合、下記のような不具合が発生する可能性があります。

▼iframe内でタグが発火した時の不具合

• GoogleAnalyticsの計測タグが狂ってしまった
• スペースが限られているiframe内にもチャット用のボタンが表示されてしまった

上記のような不具合を回避するには、3段階の手順に従ってiframe内でタグを発火させないトリガー設定を行います。

例題として、GoogleAnalyticsをiframe内で発火させないためのトリガー設定について見てみましょう。

iframe内でGTMが読み込まれているか判別する変数の設定

1.　ワークスペースの左側サイドメニューから、赤枠で囲ってある「変数」を選択

2.　「ユーザー定義変数」エリアから、右下の赤枠で囲ってある「新規」をクリック

3.　赤枠で囲ってある「変数の設定」をクリックし、右側に表示されるメニューバーから「カスタムJavaScript」を選択

4.　下記のコードを赤枠で囲ってある「カスタムJavaScript」エリアにコピペし、右上の「保存」をクリック

function(){
return window !== window.parent;
}

5.　赤枠で囲ってある「変数名」に「iframeの呼び出し判定」など任意の名称を入力し、右下の「保存」をクリック

iframe内で発火させたくない例外タグのトリガー設定

1.　ワークスペースの左側サイドメニューから「変数」を選択し、「新規」をクリック

2.　赤枠の「トリガーの設定」をクリックし、右側のサイドメニューから緑色の枠で囲ってある「その他」の「カスタムイベント」を選択

3.　赤枠の3項目と緑色の枠で囲ってある3区分を下記の通りに設定し、右上の「保存」をクリック

▼赤枠の3項目

• イベント名：「.*」を入力
• 正規表現一致を使用：チェックを入れる
• このトリガーの発生場所：「一部のカスタムイベント」を選択

▼緑色の枠で囲ってある3区分

• 左側：「iframeからの呼び出し判定」を選択
• 中央：「等しい」を選択
• 右側：「true」と入力

4.　赤枠で囲ってある「トリガー名」に任意の名称を入力し、右下の「保存」をクリック

iframe内の「非呼び出しタグ」と「トリガー」の紐付け

1.　ワークスペースの左側サイドメニューから「タグ」を選択し、iframeの中で発火させたくない「GoogleAnalytics」をクリック

2.　赤枠の「トリガー」をクリック後に表示される「例外を追加」をクリック

3.　右側のメニューバーから任意の名称を設定した「例：iframe内で発生した全イベント」を選択し、最後に「保存」をクリックして完了

まとめ

トリガーの設定は、Googleタグマネージャーを構成する3大要素の中でも「要」とも言える存在です。確かに、GTMではデフォルトで複数のトリガーが用意されていますが、使いこなせなければ意味がありません。色々な条件を実験的に試しながら、トリガーを極めていきましょう。