この設定の用途
- GTMでGoogleAnalyticsの計測タグを貼ったらiframe内でまで読み込まれて計測が狂って困ったとき
- GTMでチャット用のボタンを表示させるタグを貼ったら狭いiframeの中にも表示されて困ったとき
iframeの中で発火して欲しくないタグが発火してしまっている状況を回避するための設定方法を解説。
設定に必要な時間：3分
手順
1.変数の作成
まず、GTMがiframeの中で読み込まれたのかどうかを判別する変数設定を作成する。
「変数」タブを開き、「ユーザー定義変数」の領域内にある「新規」ボタンをクリック。
「変数タイプを選択して設定を開始...」と表示されている箇所、あるいは「変数の設定」と書かれている箇所をクリックすると
横からウィンドウが開くので、「カスタムJavaScript」を選択。
以下のように変数設定を完了する。
変数名
iframeからの呼び出し判定
「カスタムJavaScript」に入力するコード
function(){
return window !== window.parent;
}
以下のスクリーンショットと同じ状態になったら右上の「保存」ボタンをクリックして作成した変数設定を保存する。
2.トリガーの作成
次に、iframe内で動かしたくないタグの例外条件に設定するトリガー設定を作成する。
「トリガー」タブを開き、「新規」ボタンをクリック。
「トリガーのタイプを選択して設定を開始...」と表示されている箇所、あるいは「トリガーの設定」と書かれている箇所をクリックすると
横からウィンドウが開くので、スクロールして下部にある「カスタムイベント」を選択。
以下のように変数設定を完了する。
トリガー名
iframe内で発生したイベントすべて
イベント名
.*
「正規表現一致を使用」にチェック
このトリガーの発生場所
「一部のカスタムイベント」を選択し、
「iframeからの呼び出し判定」「等しい」「true」という設定にする。
必要に応じてドメイン指定やページ指定のトリガー設定も追加する。
以下のスクリーンショットと同じ状態になったら右上の「保存」ボタンをクリックして作成したトリガー設定を保存する。
3.タグの設定
最後に、先ほど作成したトリガー設定をiframe内で呼び出されたくないタグの例外条件に紐付ける。
iframeの中で発火して欲しくないタグ設定を開き、「トリガー」と書かれている部分をクリック。
「例外を追加」という文字が表示されているので、これをクリックする。
右からウィンドウが開くので先ほど作成したトリガー設定「iframe内で発生したイベントすべて」を選択してタグを保存する。
必要な設定変更が終わったらプレビューモードで意図した挙動を行っているか確認した上でコンテナの公開を行い、
本番環境に反映する。
以上の設定を行ったタグはiframeの中で発火しなくなる。
※ただし、該当のタグが「タグの順序付け機能」で呼び出される場合はトリガー設定を無視して動くので、呼び出し元のタグで設定が必要。
詳しい解説
トリガー設定
タグのトリガー設定で例外条件を設定する場合、タグの発火条件として設定したトリガーの種別が「ページビュー」であれば、例外条件として設定するトリガー設定も「ページビュー」である必要があり、すべてのトリガー種別に対応できるトリガーを通常のやり方で作ろうと思うと例外用のトリガー設定も「ページビュー用」「DOM Ready用」「ウィンドウの読込用」「クリック用」..と作成する必要がある。
この方法で除外設定を作ろうとすると似たようなトリガーが大量発生して管理が難しくなってしまうため、今回カスタムイベントトリガーによって除外設定を作成している。
GTMでカスタムイベントを作成するとき、
以下のようなJavaScriptコードを走らせることで、任意のイベント名のカスタムイベントを起こすことができる。
dataLayer.push({'event':'customEvent01'});
カスタムトリガーと同じく、「ページビュー」などの通常のイベントもシステム上のイベント名を
Page View、DOM Ready、Window Loaded、Click、Link Clickのように持っている。（GTMのプレビューモードで確認可能）
GTMのプレビューモードで発生したイベント名を確認できることが分かるスクリーンショット
このため、すべてのイベント名にマッチする正規表現「.*」をカスタムイベントのイベント条件に使用すれば、すべてのイベントでこのトリガーが反応できるようになる。
変数設定
function(){
return window !== window.parent;
}
window.parentはiframeで読み込まれたときは親フレームの参照を返し、自分がiframeで読み込まれていないときは自分自身の参照を返す。
よって、このスクリプトを動かしたウィンドウがiframe内であるときは、
windowとwindow.parentの参照が一致せず、window !== window.parentの計算結果はtrueとなる。
逆に、iframeではなく通常のウィンドウとして読み込まれたときはwindowとwindow.parentの参照が一致するため、window !== window.parentの計算結果はfalseとなる。
現在のウィンドウ、または、サブフレームの親ウィンドウへの参照を返します。
ウィンドウが親を持たない場合、parent プロパティは、それ自身への参照となります。
ウィンドウが<iframe>、<object>、あるいは、<frame>で読み込まれた場合、その親ウィンドウは、ウィンドウを埋め込んだ要素が存在するウィンドウとなります。
- window.parent - Web API | MDN