うん丸の思考停止ブログ

箱ワイン(赤)を程よく飲んで思考停止したところで綴りだすうん丸のブログ。

Universal Analyticsのクロスドメイントラッキング方法(form対応もあるよ)

おしもおされぬweb解析ツールといえばGoogleAnalyticsですよね。上場企業のwebサイトでは3571社中1931社の54.1%が利用しているとのことですので、web解析ツールの定番中の定番といえるかと思います。

参考:about:HPW: 11/17 Google Analytics 利用率は 54.1% (前回から 0.1 ポイント増)

 

そのGoogleAnalyticsですが、UniversalAnalyticsをβ版で公開していて、現在のAnalyticsからの違いは数多くあれど、わかりやすい違いとして解析をトラッキングするためのトラッキングコードの違いがあります。UniversalAnalyticsを利用するには、専用のトラッキングコードをサイトに埋め込む必要があります。

現在、β版として公開されていますが、正式版としてのリリースも間近なように思いますので、この機にUniversal Analyticsのクロスドメイントラッキング方法(form対応もあるよ)を記しておきたいと思います。

クロスドメイントラッキングとは

GoogleAnalyticfsから提供されているトラッキングコードをサイトに設置すると設置したページが解析対象となり、ページ個別のアクセス数・閲覧平均時間・離脱率などの状況がわかるほか、ページ間の移動も解析できます。どのページから流入して、どのように移動して、どこで離脱しているのか把握ができます。この情報によって、購入完了ページや、お問い合わせ完了ページを見たユーザーがどういったアクセスをたどることが多いのかがわかるわけですね。

Analytics側でページ間の移動を記録するために、利用しているCookieという仕組みがあります。Analyticsのトラッキングコードを読み込んだブラウザを特定するための情報をブラウザ側に保存する仕組みです。

初めてトラッキングコードが読まれた場合には、ブラウザ側のCookieを設定します。2回目以降のアクセスでは、既にCookieがあることを認識した上で一連のアクセスだとしています。(概要です)

この便利な仕組みによってGoogleAnalyticsの解析も行えるのですが、一般的なブラウザの設定ではCookieはwebサイト毎に保存・利用できる制限があり、異なるwebサイトのCookieの利用はできません。この制限があるために、同一のトラッキングコードを異なるwebサイトに設置した際には専用の記述が必要となります。

これは、UniversalAnalyticsでも現在標準のAnalyticsでも変わりません。

クロスドメイントラッキングのトラッキングコード

UniversalAnalyticsのクロスドメイントラッキングを行うために、各ページに張り付けるトラッキングコードを貼り付けます。(要jQueryの読み込み)

aタグでのリンクとformのsubmitタグでの移動も対応する記述です。以下の例だと、[example.com]と[example.jp]と[ショッピングカートのホスト名]を解析対象とするような記述です。2ドメインでよい場合には、数を減らしてください。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

 <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', 'UA-XXXXXXXX-X', {'allowLinker':true});
  ga('send', 'pageview');

// Load the plugin.
ga('require', 'linker');

// Define which domains to autoLink.
ga('linker:autoLink', ['example.com', 'example.jp','ショッピングカートのホスト名']);
$(function(){
    myForm = $("form");    
     for(i=0;myForm.length;i++){
          addListener(myForm[i], 'submit', decorateForm);
     }
     function decorateForm(event) {
       event = event || window.event;                             // Cross browser hoops.
       var target = event.target || event.srcElement;
    
       if (target && target.action) {
         ga(function(tracker) {                                   // Only if ga is loaded.
           window.linker = window.linker ||
               new window.gaplugins.Linker(tracker);              // Create linker object using default tracker.
           target.action = window.linker.decorate(target.action); // Decorate the HTML link.
         });
       }
     }
    
// Cross browser way to listen for events.
function addListener(element, type, callback) {
if (element.addEventListener) element.addEventListener(type, callback);
else if (element.attachEvent) element.attachEvent('on' + type, callback);
}

});
</script>

 [example.com]と[example.jp]と[ショッピングカートのホスト名]の解析対象とするすべてのページに上記を設置ください。

上記は、すべてのformに作用する記述なので、必要に応じてformのaction値を条件として実行を制御してください。

参考:https://developers.google.com/analytics/devguides/collection/analyticsjs/cross-domain

ホスト名の追記

上記トラッキングコードを設置すると、3つのサイトの解析が一つのプロパティで行えるのようになります。解析画面には、3サイトのページの情報がURI(例、/company/index.html)で表示されます。この際に、どのサイトのページなのかわかりやすくするために出力のURIフィールドにホスト名を含ませる設定をします。

なお、この設定を行う場合には新たにビューを追加して行われることをお勧めします。

手順1

Analyticsの設定で「新しいビューを作成」から新たなビューを作成します。

f:id:hyousukejp:20131126065014p:plain

手順2

作成したビューの「フィルタ」設定に進みます。

f:id:hyousukejp:20131126065259p:plain

 

手順3

「新しいフィルタ」をクリックし、以下のように設定します。

「カスタムフィルタ」>「詳細」

フィールドA:ホスト名 / (.*)

フィールドB:リクエストURI / (.*)

出力先:リクエストURI / $A1$B1

f:id:hyousukejp:20131126075818p:plain

手順4

「保存」をクリックして、終了です。

以上です。これでショッピングカートが別ホストにある場合でも同一のビューで連続したアクセスを解析できます。