GETメソッドを使用したフォームによるクロスドメイン遷移をGoogle Analyticsで計測する場合の注意点

2011年10月24日

ファーストパーティクッキーのみを使用しているGoogle Analytics(以下GA)では、複数ドメインのドメインにまたがる計測の実装は、少々煩雑です。

リンク（aタグ）にしろフォーム（formタグ）にしろ、基本的には公式のリファレンスにある通りに実装すればいいのですが、フォームタグでgetメソッド（method="get"）を使用している場合、バグがあり、公式の説明通りやってもドメインまたぎ時のクッキー情報の受け渡しがうまく出来ません。

今回は、このバグの回避方法と併せて、jQueryを使用したクロスドメイン対応自動化の方法も紹介します。（全部のタグを手で「onclick="_gaq.push([‘_link‘, ‘http://example.com/test.html’]); return false;"」って書くのめんどくさいですよね）

■フォーム使用時のバグと回避方法

フォーム利用時の実装方法は公式で次のように紹介されています。

<form name="f" method="post" onsubmit="_gaq.push([‘_linkByPost’, this]);">
…
</form>

この方法、postメソッド使用時（method="post"）では何の問題もないのですが、getメソッドを使用すると、クロスドメイン処理が行われません。セッションが切れてしまいます。（ここには大丈夫って書いてあるんだけど、、、これは間違いです。このページ_link()の書き方例も間違ってるし。。。）

getメソッド使用時には次のように記述する必要があります。

<form name="f" method="get" onsubmit="_gaq.push([‘_linkByPost’, this , true]);">
…
</form>

このように第2引数に「true」と書くことで、セッション情報がパラメータ（?）ではなく、ハッシュ（#）で付くようになります。このハッシュで付いた情報をGAが認識できるようにするためには、（リンク先の）トラッキングコードを次のように変更する必要があります。

一般的なクロスドメイン計測のトラッキングコード

_gaq.push([‘_setAccount’, ‘UA-XXXXX-X’]);
_gaq.push([‘_setDomainName’, ‘none’]);
_gaq.push([‘_setAllowLinker’, true]);
_gaq.push([‘_trackPageview’]);

ハッシュ使用時のトラッキングコード

_gaq.push([‘_setAccount’, ‘UA-XXXXX-X’]);
_gaq.push([‘_setDomainName’, ‘none’]);
_gaq.push([‘_setAllowLinker’, true]);
_gaq.push([‘_setAllowAnchor’, true]);
_gaq.push([‘_trackPageview’]);

この「_gaq.push([‘_setAllowAnchor’, true]);」を追加することによって、トラッキング変数をハッシュで受けることが出来るようになります。

■ハッシュの利点

このようにハッシュにすることは、getメソッド利用のフォームだけでなく、postメソッドを利用したフォームや、aタグでのリンクにも使用することが出来ます。（また、キャンペーントラッキングでも使用することが出来ます。）

aタグで利用するには次のように書きます。

<a href="http://example.com/test.html"
onclick="_gaq.push([‘_link’, ‘http://example.com/test.html’ , true]); return false;">click me</a>

こ のようにハッシュを使用する方法の利点の一つは、javascriptでハッシュを消せばURLをキレイにすることが出来るという点です。先ほど紹介した 清水誠さんの記事では、パラメータ付きURLのデメリットとして次のように挙げられています。（これはハッシュでもほとんど同じです）

  • 見た目に悪い
  • メールやTwitterでURLを伝えにくい
  • 検索エンジンのリンク評価が分散される
  • ソーシャルブックマークなどが分散される
  • パラメータ付きのURLが別の場所で流通してしまい、計測の精度が落ちる
  • 動的プログラムとパラメータ名がコンフリクトすることがある

キャンペーン用URLパラメータは#を使えばキレイにできる  実践CMS*IA

しかし、ハッシュの場合はこの記事で紹介されているように、ハッシュのみを消すことが出来ます。消してしまえば、クッキー情報のついた汚いURLがブックマークされたり、ソーシャルで拡散されるのを防ぐことが出来ます。

※ただし、アンカーリンクの場合だけは、アンカーが機能しなくなってしまうので、ハッシュは使えません。

■jQueryを使って自動化しよう

ハッシュを消すのと併せて、aタグやformタグへのクロスドメイン対応を自動化する方法を紹介します。

「WWW.YOUR- DOMAIN.COM」ドメインへリンクされたaタグと、「<form id="searchForm" …>…</form>」というformタグへクロスドメイン対応の関数を自動で付加するには次のよう に<head></head>内に記述します（それ以外の場所でも大丈夫です）。

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

<!– X-Dmain Tracking : GoogleAnalytics –>
<script type="text/javascript">

  //X-domain Link
   $(function(){
       $(‘a’).click(function(){
       var url = $(this).attr(‘href’);
           if(url.match(/^http(s?):¥/¥/WWW¥.YOUR-DOMAIN¥.COM¥//)) {
             if(url.match(/#/)){
               _gaq.push([‘_link’, this.href]);
               return false;
             }
             else {
               _gaq.push([‘_link’, this.href , true]);
               return false;
             }
           }
       });
   });

  //X-domain Form
   $(function(){
       $(‘form#searchForm’).submit(function(){
         _gaq.push([‘_linkByPost’, this , true]);
       });
   });

</script>
<!– X-Dmain Tracking : GoogleAnalytics –>

※最初のjQueryの呼び出しは、他のところに書いてあれば不要です。ただしその後の記述は、必ずjQuery呼び出しの記述の後に書いて下さい。

また、リンク先の計測コードを次のようにして、クロスドメインの処理が終わったらハッシュを自動で消す処理を行います。（清水誠さんの記事で紹介されている方法をちょこっとだけ手直ししてます。）

_gaq.push([‘_setAccount’, ‘UA-XXXXX-X’]);
_gaq.push([‘_setDomainName’, ‘none’]);
_gaq.push([‘_setAllowLinker’, true]);
_gaq.push([‘_setAllowAnchor’, true]);
_gaq.push(function(){
  if (location.hash && location.hash.match(/(#|&)(__utma)=.+/)) {
    if (‘replaceState’ in history)
      history.replaceState(”,document.title, window.location.pathname + location.search);
    else window.location.hash = ”;
  }
});
_gaq.push([‘_trackPageview’]);

これで、リンク元ページでのクロスドメイン計測関数の自動付与と、リンク先ページでのクッキ情報ハッシュの自動削除が可能になります。ハッシュは一部ブラウザでは「#」が残ってしまいますが、そこはご愛嬌ということで。

WEB最適化の知と技法GoogleAnalytics, WEB解析

Posted by pathfinder