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

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];         var data = e.data[1];         switch(eventName) {             case '…

WordPressのwp_get_archivesで月別リストを生成する際に<li>をカスタムする方法

【About】 WordPressの wp_get_archives('type=monthly') で月別のリスト<li>を生成する際に、特定の年月のアーカイブページを表示した際に<li>に特定のクラス(class="active"など)を設定する方法を記載します。
また、おまけとして、functions.phpによらず、テンプレートで<li>をカスタマイズする方法も記載します。

【通常の書き方】 <WordPress>ーテンプレート
<p>月別アーカイブ</p> <ul>     <?php wp_get_archives('type=monthly')); ?> </ul>
とすると

<HTML><p>月別アーカイブ</p> <ul>     <li><a href="http://hoge.com/2013/12/">2013年12月</a></li>     <li><a href="http://hoge.com/2013/11/">2013年11月</a></li> </ul>
などと生成されます。

これを、ある月を表示しているときに、該当のリスト<li>に class="active" を追加したいとします。

【カスタマイズ方法】 <WordPress>ーテンプレート
<p>月別アーカイブ</p> <ul>     <?php wp_get_archives('type=monthly')); ?> </ul> (変更なし)

ーfunctions.php
functions.phpに以下を追加
<?php ・・・ function my_archives_link($link_html){   $my_month = '/' . get_query_var('year') . &#…

PhotoSwipeでテキストリンクから特定の画像のPhotoSwipeギャラリーを起動する方法

【PhotoSwipeとは】 スマホサイトで写真ギャラリーを設置したいときに使えるライブラリ
スワイプで画像がめくれて便利!
レスポンシブサイトの画像ギャラリーにオススメ。
(optionに、imageScaleMethod: "fitNoUpscale" とすれば画像が最大100%で表示されるのでPCサイトでも使えます。)
https://github.com/codecomputerlove/PhotoSwipe


【実現したいこと】 通常は画像サムネイルのクリック(or タップ)でPhotoswipeギャラリーを起動します。
それとは別に、新着情報などのテキストリンクから特定の画像のPhotoSwipeギャラリーを起動したい。


【方針】var instance = $("#Gallery a").photoSwipe(options); instance.show(0); で、最初のPhotoSwipeギャラリーを起動できることから、テキストリンクに任意の要素(data-swipeとする)と、クラス(.swipe-targetとする)を設置し、.swipe-targetの上から順番にdata-swipeに番号を振ってゆき、.swipe-targetがクリックされたら、data-swipeから番号xを取得し、instance.show(x)で目的のPhotoSwipeギャラリーを起動する。


【HTML】 ヘッダー(もしくはフッター)部分(jQueryバージョンを使用)<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="/js/vendor/jquery-1.8.2.min.js"><\/script>')</script> <script src="/js/vendor/klass.min.js"></script> <scri…