【GTM/GA実装】 ページに埋められたiframeの子ページの計測

[voice icon="http://2m3g1.com/wp-content/uploads/icon-1.png" name="つまみさん" type="r line"]

iframeの部分のページ遷移が計測できない！
ページとiframeで二重計測されてしまう..
iframeだとセッションつながらないよ

[/voice]

こんな疑問を解決すべく、解説します。Googleアナリティクス、Googleタグマネージャの設定です。

具体的には、Web予約システムの「ChoiceRESVE」のヘルプが間違っていて、苦戦したので備忘録として、書き留めておきます。

間違った解説がこちら

ChoiceRESVE
インラインフレームで利用する場合、タグ設定はどうなりますか？

iframeに「クロスドメイントラッキングしてください」とのことだが、iframeでクロスドメイントラッキングができるはずもなく、資料があきらかに間違っているので、別の方法で実装しました。

こんな感じのページ遷移を想定しています。

予約ページは、iframeの埋め込みがあり、その部分だけページ遷移するような感じです。

緑色の箇所が子iframeとします。

ページ内に埋め込んだiframe要素です（今回、子ページと呼びます）。また、iframeが埋め込んであるページを親ページ（青枠部分）と呼ぶことにします。

通常、iframeは計測できません。

親と子ページにタグを貼った場合は、二重計測になります。

ちょっと特殊な方法で、子から親を操作しようとすると、セキュリティエラーが出てしまいます。

そして、子ページでタグを動作してもセッションがつながりません。別セッションとなります。もちろん、コンバージョンがつながりません。

そのため、回避実装してきます。

前提条件

• 子ページにもコードの埋め込みが必要
• jQueryが必要
• 親ページにＧＴＭタグが必要

設定手順

設定していきます。まずは、iframe部分のコードから。

子ページの設定（ChoiceRESERVE）

BODY部分に埋めるタグがこちらです。postメッセージで親に通知する処理です。

<script>
window.parent.postMessage(location.pathname,'*');
</script>

変数

続いて変数を作っていきます。

タグで使用するデータレイヤー変数です。

トリガー

カスタムイベントとページパスを作ります。

タグ

タグは、３つです。

• 親ページに配信するページビュータグ（iframe部分では動作しないように設定）
• カスタムHTMLのスクリプト処理
• 子iframeで動作するページビュータグ

カスタムHTML

カスタムHTMLですが、子から受け取った通知をdataLayer.pushにて送信します。カスタムイベントで受け取って、子iframe用のタグでＧＡにデータ送信します。

<script>
jQuery(function()
{
// メッセージを受信したとき
jQuery(window).on('message', function(event)
{
// 受信したメッセージ自体を表示
dataLayer.push({"event": "child-frame-event", "child-path":event.originalEvent.data});
});
});
</script>

子iframe用のＧＡタグには、データレイヤー変数をpageセットして送信します。

以上です。