最新コラム
-
-
-
Webサイト制作
【2023年版】国内・海外のおすすめVPS10選
-
Webサイト制作
初心者でも5分で分かる!SSL/TLSとは何か?
-
SEO外部対策SEO対策
Googleが推奨するnofollowの正しい使い方とは?
Googleタグマネージャーを利用しているからと言って、使いこなせているとは限りません。特に、利用者の力量によって差が出やすいのが「トリガー」の設定です。そこで今回は、利用頻度の高いトリガー設定の実例6種類と、iframe内でタグを発火させたくない場合の例外設定について画像付きで解説します。
目次
Googleタグマネージャーの「トリガー」とは、「いつ」タグを発動させるのか引き金となる「条件設定」を担っている要素です。
そもそもGoogleタグマネージャーは、「タグ」「変数」「トリガー」の三大要素を紐付けることで初めて効果を発揮します。
中でもトリガーは応用力が高く、初心者と極めている人とでは得られる効果の差も歴然です。
タグを発動させることを「発火させる」と言いますが、たとえタグや変数の設定が適切でも引き金となるトリガーが使いこなせていなければ期待通りの結果は得られません。
Googleタグマネージャーでは、あらかじめデフォルトとして様々なトリガーが用意されています。
ここでは、4種類のカテゴリーに分けてご紹介しましょう。
下記3種類のトリガーは、いずれも「ページの読み込み」によってタグが配信されるという基本的な仕組みは同じですが、異なるのが「対象」と「トラッキングのタイミング」の2点です。
種類 | 対象 | タグが配信されるタイミング |
---|---|---|
ページビュー | 特定のURL | ページの読み込みを開始したタイミング |
ウィンドウの読み込み | アクション | 画像やスプリプトなどの読み込み完了後 |
DOM Ready | ページのHTML要素 | 読み込み完了後、DOM解析が可能になった後 |
インプレッションのみが必要な場合は「ページビュー」を、h1タグなどページ内のテキストを変数としてトリガーの条件にしたい場合は「DOM Ready」を、といった具合に使い分けることでより詳細なアクセス解析が可能となります。
デフォルトで用意されているクリックに関するトリガーは、下記の2種類になります。
▼クリックトリガーの種類と対象
デフォルトで用意されているエンゲージメントに関するトリガーは、下記の4種類になります。
▼エンゲージメントトリガーの種類と特徴
その他、下記の5種類のトリガーがデフォルトで用意されています。
JavaScript エラー
カスタム イベント
タイマー
トリガーグループ
履歴の変更
トリガーを使いこなせるようになりたい!という方は、まず下記の6種類から試してみましょう。
トリガーの設定で最も多く使われているのが、特定のページに対してタグを発火させる設定でしょう。
ここでは、例題としてユーザーが購入完了ページを見た時に発火させる方法について解説します。
▼購入完了ページの設定
1. 左側のサイドメニューから赤枠で囲ってある「トリガー」をクリック
2. 右上の赤枠で囲ってある「新規」をクリック
3. 赤枠で囲ってある「トリガー設定」をクリックし、右側に表示されたメニューバーから緑色の枠で囲ってある「ページビュー」をクリック
4. 「このトリガーの発生場所」から赤枠で囲ってある「一部のページビュー」をクリック
5. 赤枠で囲ってある3区分に下記の設定条件を入力し、右上の緑色で囲ってある「保存」をクリック
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区分に下記の設定条件を入力し、右上の青色で囲ってある「保存」をクリック
10. 赤枠で囲ってある「トリガー名」に任意の名称を入力し、右下の緑色で囲ってある「保存」をクリックして完了
ブラウザのユーザーエージェントは、「スマホのみでタグを発火させる設定」で追加済みなので新たに設定する必要はありません。
また、手順8までは「スマホのみでタグを発火させる設定」と共通していますので、手順9から解説します。
9. 赤枠で囲ってある「一部のページビュー」を選択したら緑色の枠で囲ってある3区分に下記の設定条件を入力し、右上の青色で囲ってある「保存」をクリック
「スマホのみでタグを発火させる設定」と異なるのは、中央で選択する項目だけ!右枠に入力した「(ios|android|mobile)」と一致しないブラウザのユーザーエージェントは、全てPCだと認識されます。
続いて、保存をクリックした後に表示される画面で任意のトリガー名「例:PC」を入力し、保存をクリックして完了です。
こちらは、ユーザーがページのどこまで見てくれたのかを把握するために有効な手段です。
「特定のページを指定してタグを発火させる設定」の手順2までは共通していますので、手順3から解説します。
3. 赤枠で囲ってある「トリガー設定」をクリックし、右側に表示されたメニューバーの「ユーザーエージェント」から緑色の枠で囲ってある「スクロール距離」を選択
4. 赤枠で囲ってある「縦方向スクロール」を選択して「割合」を表示し、緑色の枠に任意のスクロール数値(%)を入力してから青色で囲ってある右上の「保存」をクリック
5. 赤枠で囲ってある「トリガー名」に任意の名称を入力し、右下の緑色で囲ってある「保存」をクリックして完了
例題として、特定ページの閲覧時間が5分に達したら時に発火するトリガー設定について見てみましょう。
こちらも、「特定のページを指定してタグを発火させる設定」の手順2までは共通していますので、手順3から解説します。
3. 赤枠で囲ってある「トリガー設定」をクリックし、右側に表示されたメニューバーの「その他」から緑色の枠で囲ってある「タイマー」を選択
4. 下記を参考に、赤枠の2項目と緑色の枠で囲ってある3区分を設定し、右上の青色で囲ってある「保存」をクリック
5. 「トリガー名」に「Timer-5分」など任意の名称を入力し、右下の「保存」をクリックして完了
JavaScriptなどを駆使した難易度の高いカスタマイズを実装している場合は別ですが、YouTube公式の「埋め込み機能」ならわずか5ステップでトリガーを設定することが可能です。
例題として、「YouTube動画が再生された時」にトリガーを発火させる設定について見てみましょう。
なお、こちらも手順2までは「特定のページを指定してタグを発火させる設定」と同じです。
3. 赤枠で囲ってある「トリガー設定」をクリックし、右側に表示されたメニューバーから緑色の枠で囲ってある「YouTube動画」をクリック
4. 赤枠で囲ってある「キャプチャ」の「完了」からチェックを外して「開始」のみを選択し、緑色の枠で囲ってある「すべての YouTube 動画に JavaScript API サポートを追加する」にチェックを入れて、右上の「保存」をクリック
5. 「トリガー名」に「YouTube-Start」など任意の名称を入力し、右下の「保存」をクリックして完了
一方、「動画の再生が完了した時」にトリガーを発火させたい場合は、手順4で「完了」だけを選択して下さい。
iframe内でタグが発火した場合、下記のような不具合が発生する可能性があります。
▼iframe内でタグが発火した時の不具合
上記のような不具合を回避するには、3段階の手順に従ってiframe内でタグを発火させないトリガー設定を行います。
例題として、GoogleAnalyticsをiframe内で発火させないためのトリガー設定について見てみましょう。
1. ワークスペースの左側サイドメニューから、赤枠で囲ってある「変数」を選択
2. 「ユーザー定義変数」エリアから、右下の赤枠で囲ってある「新規」をクリック
3. 赤枠で囲ってある「変数の設定」をクリックし、右側に表示されるメニューバーから「カスタムJavaScript」を選択
4. 下記のコードを赤枠で囲ってある「カスタムJavaScript」エリアにコピペし、右上の「保存」をクリック
function(){ return window !== window.parent; }
5. 赤枠で囲ってある「変数名」に「iframeの呼び出し判定」など任意の名称を入力し、右下の「保存」をクリック
1. ワークスペースの左側サイドメニューから「変数」を選択し、「新規」をクリック
2. 赤枠の「トリガーの設定」をクリックし、右側のサイドメニューから緑色の枠で囲ってある「その他」の「カスタムイベント」を選択
3. 赤枠の3項目と緑色の枠で囲ってある3区分を下記の通りに設定し、右上の「保存」をクリック
▼赤枠の3項目
▼緑色の枠で囲ってある3区分
4. 赤枠で囲ってある「トリガー名」に任意の名称を入力し、右下の「保存」をクリック
1. ワークスペースの左側サイドメニューから「タグ」を選択し、iframeの中で発火させたくない「GoogleAnalytics」をクリック
2. 赤枠の「トリガー」をクリック後に表示される「例外を追加」をクリック
3. 右側のメニューバーから任意の名称を設定した「例:iframe内で発生した全イベント」を選択し、最後に「保存」をクリックして完了
トリガーの設定は、Googleタグマネージャーを構成する3大要素の中でも「要」とも言える存在です。確かに、GTMではデフォルトで複数のトリガーが用意されていますが、使いこなせなければ意味がありません。色々な条件を実験的に試しながら、トリガーを極めていきましょう。