アクセス解析

【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が必要
  • 親ページにGTMタグが必要

設定手順

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

子ページの設定(ChoiceRESERVE)

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

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

変数

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

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

トリガー

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

タグ

タグは、3つです。

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

カスタムHTML

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

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

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

以上です。

スキルシェアサービス「ココナラ」でご支援していますので、必要に応じてお声がけください。
その場合は下記リンクまで。ちなみにココナラが手数料が2割くらいかかる関係で、Twitterか直接お問い合わせフォームからご相談なら優先的に対応します。

お問い合わせフォーム
Twitterダイレクトメッセージ
GoogleアナリティクスGoogleタグマネージャ開発サポート | ココナラ
おまけ:このリンクから登録するとココナラの1000円分のプレゼントあります

-アクセス解析
-, , , , , , ,