AdWords が「Google 広告」になりました。これまで AdWords としてご利用いただいていたサービスの名前が「Google 広告」に変わりました。検索ネットワーク、ディスプレイ ネットワーク、YouTube などを対象にあらゆる広告サービスを提供いたします。詳細

296 人が現在オンライン
296 人が現在オンライン
Google アナリティクスのアカウント設定、プロパティ、ビューやフィルタ設定などについて、ユーザー同士で意見交換ができます。解析を通して浮かんだ質問やアイディアを投げかけ合って、よりデータ分析の知識を高めていきましょう。
ガイドを表示
star_border
返信

iframeのクロスドメイントラッキングについて

初級者 ✭ ✭

申込みページでiframeを使用し、別ドメインのフォームを読み込んでいます。

申込みページと別ドメインのフォームをクロスドメイントラッキングしたいと考えており、下記ページを参考に設定を行ったのですが、クロスドメイントラッキングができずに別セッションとして計測されてしまいました。

 

 

■参考ページ

https://developers.google.com/analytics/devguides/collection/analyticsjs/cross-domain?hl=ja#iframes

 

ソースは以下になります。

申込みページ
==================================================================
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');


ga('create', '●●●', 'auto', {'allowLinker': true});
ga('require', 'linker');
ga('linker:autoLink', ['●フォームのあるドメイン●', '●iframeで読み込むページのドメイン●'] );
ga('send', 'pageview');


ga(function(tracker) {
// Gets the client ID of the default tracker.
var clientId = tracker.get('clientId');

// Gets a reference to the window object of the destionation iframe.
var frameWindow = document.getElementById('destination-frame').contentWindow;

// Sends the client ID to the window inside the destination frame.
frameWindow.postMessage(clientId, '●iframeで読み込むページ●');
});

</script>
<iframe id="destination-frame" src="●iframeで読み込むページ●"></iframe>
==================================================================


iframeで読み込むページ
==================================================================
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

window.addEventListener('message', function(event) {
// Ignores messages from untrusted domains.
if (event.origin != '●iframeで読み込むページ●') return;

ga('create', '●●●', 'auto', {
clientId: event.data,
allowLinker:true,
});
ga('send', 'pageview');
});

</script>
==================================================================

 

gaのキャプチャを添付します。

私のアクセスのみ計測しているのですが、アクティブユーザーが2となり、「申込みページ」「iframeで読み込んだページ」にひとりずつアクティブユーザーがいる状態になってしまいます。

またPVが5件計測されてしまいます。

 

なにかお気づきの点がございましたら教えていただけませんでしょうか。

参考のページなどご教示いただけますと幸いです。

1 件の受理された解決策

受理された解決策
ベストアンサーのマーク済み.
解決策
トピック作成者太郎さんが付与
土曜日

Re: iframeのクロスドメイントラッキングについて

レジェンド

試しに実装してみました。

http://abc.go2020.tokyo/crossdomain_iframe/

 

太郎さんのソースで気になるところは以下です。

 

(1)iframe内のソースが読み込まれる前に、postMessageが走る可能性がある

(2)以下のoriginは「申込みページのドメイン」であるべき

if (event.origin != '●iframeで読み込むページ●') return;

 

恐らくですが、上記のようにされているので、親ウィンドウからのpostMessageではなく、iframe自身のウィンドウからのメッセージ受信で、event.dataに入っている文字列をclientIDとして送ってしまっているのかもしれません。

 

iframeで読み込むページの、メッセージ受信のファンクションの中の上記if文の前に、console.log(event.origin + '|' + event.data);やwindow.alert(event.origin + '|' + event.data);などを入れてデバッグしてみてください。

Taishi Akiyama / フルスタックエンジニアのWEBマーケターです。とりえあえず検証してみるが信条。★や解決マークをくれるとモチベーションあがって回答の質があがるかもしれません

元の投稿で解決策を見る

ベストアンサーのマーク済み.
解決策
トピック作成者太郎さんが付与
土曜日

Re: iframeのクロスドメイントラッキングについて

レジェンド

試しに実装してみました。

http://abc.go2020.tokyo/crossdomain_iframe/

 

太郎さんのソースで気になるところは以下です。

 

(1)iframe内のソースが読み込まれる前に、postMessageが走る可能性がある

(2)以下のoriginは「申込みページのドメイン」であるべき

if (event.origin != '●iframeで読み込むページ●') return;

 

恐らくですが、上記のようにされているので、親ウィンドウからのpostMessageではなく、iframe自身のウィンドウからのメッセージ受信で、event.dataに入っている文字列をclientIDとして送ってしまっているのかもしれません。

 

iframeで読み込むページの、メッセージ受信のファンクションの中の上記if文の前に、console.log(event.origin + '|' + event.data);やwindow.alert(event.origin + '|' + event.data);などを入れてデバッグしてみてください。

Taishi Akiyama / フルスタックエンジニアのWEBマーケターです。とりえあえず検証してみるが信条。★や解決マークをくれるとモチベーションあがって回答の質があがるかもしれません

Re: iframeのクロスドメイントラッキングについて

レジェンド
(1)の対策については、私の実装したソースを見てみてください。iframeのonloadを見ています。

また、気になるところとしては、clientIDをpostMessageで渡しているので特にautoLinkerの読み込みは必用ないことと、「allowLinker:true,」の部分の末尾のカンマ「,」が不要なことくらいです。
Taishi Akiyama / フルスタックエンジニアのWEBマーケターです。とりえあえず検証してみるが信条。★や解決マークをくれるとモチベーションあがって回答の質があがるかもしれません

Re: iframeのクロスドメイントラッキングについて

初級者 ✭ ✭
ご丁寧に返信いただきましてありがとうございます。
ソースまで頂きとても勉強になりました。
ソース確認し、直しましたら無事クロスドメイントラッキングがかかるようになりました。

色々試したのですが、うまく設定ができず困っていました。
大変助かりました。
ありがとうございました。

Re: iframeのクロスドメイントラッキングについて

初級者 ✭ ✭
ご指摘いただいた通り、postMessageでエラー出ている場合がありました。
頂いたソース通りに修正しましたら、問題なくクロスドメイントラッキングできるようになりました。
デバッグでき、理解を深められました。
大変勉強になりました。ありがとうございました。