スキップしてメイン コンテンツに移動

投稿

2月, 2014の投稿を表示しています

Googleタグマネージャー|iFrameの中で入力・確認・完了画面が遷移する場合の仮想ページビューのトラッキングの仕方

【概要】 Googleタグマネージャーをページに仕込んでおくと、仕込んだページ側のコードを一切変更することなく、後から動的にページビューやらイベントやらをタグマネージャー側の管理画面で動的にトラッキングすることができてとても便利なわけですが、ページがiframeの中で入力->確認->完了画面と遷移する場合、iframeの側(読み込む側)にタグマネージャーのタグを仕込んでおいても、目的のページビューがトラッキングできません。
そこでiframeで読み込まれた側の任意のページビューをトラッキングするためにGoogleタグマネージャーのdataLayerを利用する方法を記載します。
更に今回は、別々のiframeから共通で読み込まれたページでも外側のiframeに隠しコードを仕込み、どのiframeで読み込まれたのか判定して任意のトラッキング(仮想ページビュー)を行う方法をご紹介(提案)します。


【やりたいことをもう少し具体的に】 ページ要素として ・親フレームA ・親フレームB ・投稿フォーム とあった場合で
・親フレームA <= 投稿フォーム ・親フレームB <= 投稿フォーム と読み込んでいる場合に
Googleタグマネージャーを使用して、親フレームAでの入力画面、親フレームBでの確認画面、、、等の仮想ページビューをトラッキングしたい。

【HTML】(親フレームA) 親フレームAに以下のタグを記述(非表示の判定フラグ用) <div id="post_which" style="display:none;">frameA</div> ※親フレームAにはGoogleタグマネージャーのタグは仕込みません。

【HTML】(親フレームB) 親フレームBに以下のタグを記述(非表示の判定フラグ用) <div id="post_which" style="display:none;">frameB</div> ※親フレームBにもGoogleタグマネージャーのタグは仕込みません。

【投稿フォーム・入力画面】 読み込まれる投稿フォームの入力画面に以下のコードを記述

<body>の直下に Googleタグマネージャーのコードを設…