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タグマネージャーのコードを設置

ページの任意の場所に

<script>
(function($){
  var parent_frame_value = $('#post_which',parent.document).html();

  $(window).load(function(){
    if (parent_frame_value == "frameA") {
      dataLayer.push({
        'event': 'now-i-at-frameA-step1'
      });
    } else if(parent_frame_value == "frameB") {
      dataLayer.push({
        'event': 'now-i-at-frameB-step1'
      });
    }
  });
})(jQuery);
</script>

【投稿フォーム・確認画面】、【投稿フォーム・完了画面】

省略
（【投稿フォーム・入力画面】と同様のコードを記述）

【Googleタグマネージャー・入力画面用】

＝＝＝マクロ

今回は使用せず。

（dataLayer.pushで、'which': 'frameA' などと値を仕込んで

macroGetWhich

「データレイヤ変数」「等しい」「which」

というマクロを使用して条件分岐する方法もあると思います。）

＝＝＝ルール

ruleGetDataLayerFrameAStep1：

「{{event}}」「等しい」「 now-i-at-frameA-step1」

ruleGetDataLayerFrameBStep1：

「{{event}}」「等しい」「now-i-at-frameB-step1」

＝＝＝タグ

tagTrackPvFrameAStep1：

・ユニバーサル

・トラッキングID：UA-XXXXXXXX-X

・トラッキングタイプ：ページ

・トラッキングする仮想ページビュー：/frame_a/step1.html

（詳細設定（オプション） > 基本設定 > ドキュメントパスに設定）

・ルール：ruleGetDataLayerFrameAStep1

tagTrackPvFrameBStep1：

・ユニバーサル

・トラッキングID：UA-XXXXXXXX-X

・トラッキングタイプ：ページ

・トラッキングする仮想ページビュー：/frame_b/step1.html

（詳細設定（オプション） > 基本設定 > ドキュメントパスに設定）

・ルール：ruleGetDataLayerFrameBStep1

【Googleタグマネージャー・確認画面用】、【Googleタグマネージャー・完了画面用】

省略
（【Googleタグマネージャー・入力画面用】と同様のルールとタグを設定します。）

【動作確認】

ページを動かしてみながら、Googleアナリティクスのリアルタイム > コンテンツでアクティブなページ（＝設定した仮想ページ）が表示されるか確認してみてください。

（トラッキング用に仮想ページが送出されるのは一瞬なので「ページビュー数（直前の30分間）」じゃないと確認できないかもしれません。）

以上です。

カウンセラーのための「あなたに相談したい！」と言われる、集客／顧客獲得型ホームページの作り方

このブログを検索