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

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分間）」じゃないと確認できないかもしれません。）

以上です。
ラベル:

コメント

コメントを投稿

このブログの人気の投稿

iframeに異なるドメイン（クロスドメイン）のコンテンツを読み込んで高さを自動調節する方法

趣旨 iframe（親）に異なるドメインのページ（子）を読み込んで、親フレームにスクロールが出ないよう、iframeの高さを子ページの高さに自動調節する 方法 普通にやると、 「Uncaught SecurityError: Blocked a frame with origin "http://hoge.com" from accessing a frame with origin "http://fuga.com".  Protocols, domains, and ports must match. 」 などと怒られてしまいますのでこちらを参考に http://stackoverflow.com/questions/18456498/how-can-i-change-the-size-of-an-iframe-from-inside http://i556tips.tumblr.com/post/15710917018/%E3%82%AF%E3%83%AD%E3%82%B9%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E3%81%A7iframe%E3%81%AE%E9%AB%98%E3%81%95%E3%82%92%E8%87%AA%E5%8B%95%E8%AA%BF%E7%AF%80%E3%81%99%E3%82%8Bjavascript コード hoge.com（親） <html> <head>     <title>親</title>     <script src="js/jquery.js"></script>     <script>         window.addEventListener('message', function(e) {         var iframe = $("#fugapage");         var eventName = e.data[0...
コメントを投稿
続きを読む

MovableTypeでクエリーからGET値をPHPで取得して、そのパラメータで記事を動的に出力する方法

【実現したいこと】 MovableTypeで、クエリー（http://◯◯◯.com/?aaa=bbbの?以下）からパラメータをPHPで取得して、MovableTypeの変数に引き渡して、取得したパラメータで特定カテゴリの記事を動的に出力する。 【呼び出し元】（ウェブページ、インデックステンプレートなどから） <a href="<$mt:BlogURL$>list/?category=hogehoge">カテゴリー「ほげほげ」の記事を動的に出力</a> ↓ 【呼び出し先】（インデックステンプレートなどで） <mt:Ignore><!--自分のカテゴリ（ディレクトリ名）取得--></mt:Ignore> <mt:SetVarBlock name="mycategory" strip_linefeeds="1" trim="1"><?php $mycategory = $_GET['category']; echo $mycategory; ?></mt:SetVarBlock> <mt:Ignore><!--自分のカテゴリー（ラベル名）取得--></mt:Ignore> <mt:SetVarBlock name="mycategorylabel" strip_linefeeds="1" trim="1"><?php if ($mycategory == "hogehoge") {     $my_category_label = "ほげほげ"; } else if ($mycategory == "fugafuga") {     $my_category_label = "ふがふが"; } else if () {     ... } echo $my_category_label; ?>...
コメントを投稿
続きを読む

HTMLの要素を下揃えする方法

【実現したいこと】 上の図において、要素１と要素２の下面を揃えたい。 【よく見る方法は...】 ・親要素に「position:relative;」 ・子要素に「position:absolute;」、「bottom:0;」 とすると、左右のdivの高ささえ揃えておけば、下面を合わせられますが、BootstrapなどのCSSフレームワークを使用していたりして、既存のスタイルと干渉してしまう場合に、JavaScript（jQuery）で実現する方法を記載します。 【JavaScriptでの実現方法（考え方）】 上の図において、スクリプトを使用し、「A」、「B」、「C」を高さを取得し、計算により「D」の高さを取得します。 「D」=「A」-「B」-「C」 この「D」を要素２の「margin-top」に追加してあげます。 今回は、レスポンシブ（RWD）に対応するため、ウィンドウの幅を変えた時にも「margin-top」を設定し直す仕様とします。 【実装】 jQuery(document).ready(function() {   adjustPosition();     $(window).resize(function () {     adjustPosition();   });   function adjustPosition(){       var heightA = $("要素１").outerHeight();       var heightB = $("テキスト部").outerHeight();       var heightC = $("要素２").outerHeight();       var heightD = heightA - heightB - heightC;       if (heightD > 0) {         $("#要素２").css("margin-top", heightD + "px");...
コメントを投稿
続きを読む