2011年10月24日WEB最適化の知と技法GoogleAnalytics,WEB解析

ファーストパーティクッキーのみを使用している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’]);

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

2011年10月23日WEB最適化の知と技法GoogleAnalytics,WEB解析

リンク先ページが存在しない「404 Not Found」エラーですが、検索すればそのエラーページのカスタマイズ方法や秀逸なデザインなどがたくさん出てきます。

しかし、そのデザインは、果たして効果的なのか。ユーザーが目的を達成する助けになっているか、自己満足になっていないか。清水誠さんのアスキーでの連載記事「そのエラーページ、自己満足になっていませんか?」では、そんな問題提起を行い、実際に404ページの効果測定をする方法を紹介しています。

しかし、デザインする余裕がないなどの理由で404ページを作らず、リンク切れはすべてトップページへ転送サイトも少なくありません。このようなサイトでは、この記事になるようなデータを取ることは出来ないのでしょうか?

今回は、ちょっとの工夫で必要最低限のデータをGoogle Analytics(以下GA)で取る方法を紹介したいと思います。

この方法が使うための条件

  1. .htaccessが変更できる
  2. phpが使える
  3. 非同期のGoogle Analytics計測用タグを使っている
この方法で計測できるもの
  1. エラー体験率
  2. 新規訪問エラー率
  3. リンクされているのに存在しないページ
  4. 存在しないページにリンクしているページ

■計測のための実装1:トップページに転送で工夫をしよう

.htaccessでまず404ドキュメントを指定する必要があります。

ErrorDocument 404 /404.php 

つぎにこの404ページ(404.php)でトップページに転送するのですがここで一工夫。(2011.10.24修正)

<?php
header(“Location:http://WWW.YOURDOMAIN.COM/#404".$_SERVER['REQUEST_URI’]);
?>

<?php
$request = $_SERVER['REQUEST_URI’];
header(“Location:http://WWW.YOURDOMAIN.COM#404$request“);
exit;
?>

こ れでトップページに転送されます(もちろんWWW.YOURDOMAIN.COMはあなたのWEBサイトのURLに変更してくださいね)。ポイントはサイ トの「#404″.$_SERVER['REQUEST_URI’]」の部分。ポイントは「#404$request」の部分(とその前の行)。これで、アドレスの最後に404エラーが起きているページを「#404/エ ラーページのアドレス」のカタチで付記することができます。

例えば、「WWW.YOURDOMAIN.COM/nonopage /index.html」という存在しないページにアクセスがあると、トップページに転送されるのですが、そのときのアドレスは 「WWW.YOURDOMAIN.COM/#404/nonopage/index.html」となります。

■計測のための実装2:Google Analyticsの計測用タグの変更

ここまでくれば、冒頭で紹介した清水誠さんの記事で紹介されているGoogle Analyticsでの実装方法をちょっと変えるだけで様々なデータがとれるようになります。

次の記述を「_gaq.push(['_trackPageview’);」の前に加えます。

if(window.location.hash && window.location.hash.match(/#404\/.+/)){
  _gaq.push(['_setCustomVar’, 1, 'Error’, '404’, 2]);
  _gaq.push(['_trackEvent’, 'Error404’, document.location.hash, document.referrer]);
  _gaq.push(function(){window.location.hash = ";});
}

これで、アドレスに「#404/」と付いた時のみイベントを発生させることができます。GAのイベントで記録してる内容は、紹介した記事の内容と同じになります。

ちなみに最後の「_gaq.push(function(){window.location.hash = ";});」は、測定後に不要となった「#404/エラーページのアドレス」を消す処理です(#は残っちゃいますが)。「#404/エラーページのアドレス」付きのURLがブックマークされたり、ソーシャルでシェアされると、エラー計測の精度が狂ってしまうので、それを避けるための処理です。

■GAで見てみよう

エラー体験率の見方については、紹介記事にある通りです。

また、エラー体験率があまりに高い場合や特定ページ偏っている場合などは、デザインした404ページを作りナビゲーションしたり、エラー多発の存在しないページについては、作成したり、代替ページにリダイレクトするなどを検討すればいいでしょう。

2010年11月25日WEB最適化の知と技法GoogleAnalytics,WEB解析

イベント・トラッキングが出来なくなった?!

Google Analyticsで、問い合わせフォームやダウンロードのクリック測定をするのに便利なのが、「バーチャル・ページビュー」や「イベント・トラッキング」です。

Google Analyticsのヘルプには、"pageTracker"を使ってそれぞれ次のように記述するように説明されています。

pageTracker._trackPageview('仮想URL’)
pageTracker._trackEvent('カテゴリ’, 'アクション’, 'ラベル’, '値’)

しかし、Google Analyticsの新しいトラッキングコードである、非同期トラッキングコード(Asynchronous Tracking Code)を使用すると、この"pageTracker"が使えません。

Googleがこっちがオススメだよ!って推奨してるから、トラッキングコードが新しくなってパワーアップしたみたいだから、と無邪気にスニペット(トラッキングコード)の変更だけをすると困ったことになります。。

新しいトラッキングコードでは、"pageTracker"がそのまま使えないため、トラッキングコードだけを変えると、"pageTracker"の部分でjavascriptエラーが発生してしまいます。

エラーコンソールなどでみると「pageTracker is not defined.」と言われちゃいます。最初は、いきなり使えなくなって戸惑ってしまいました。Googleがこっちがオススメだよ!って推奨してるから、じゃあ、ってことで古いものと差替えたのに、"pageTracker"の注意書きやアナウンスなんかは(多分)何もなかったんだもん(見落としかなぁ~)。。未だに、Google Analyticsのヘルプには、"pageTracker"を使えって書いてありますし。

Google Analytics 非同期トラッキングコードでの、イベント・トラッキングの方法

ではどうすればいいか。Google Analyticsの非同期トラッキングコードで、「バーチャル・ページビュー」や「イベント・トラッキング」を使用するには、"pageTracker"に代わって"_gaq.push"を使います。記述の方法は次のようになります。

バーチャルページビュー
_gaq.push(['_trackPageview’,’仮想URL’]

イベントトラッキング
_gaq.push(['_trackEvent’,’カテゴリ’,’アクション’,’ラベル’,’値’])

これを、例えばダウンロードボタンをクリックした時に、「バーチャル・ページビュー」と「イベント・トラッキング」の両方を記録するようなリンクのタグはこのようになります。(2011.10.23修正)

<a href="javascript:void(0);" onclick="javascript:_gaq.push(['_trackPageview’,’/download/pdf’]);_gaq.push(['_trackEvent’,’download’,’PDF’]);return false;">ダウンロード</a>

<a href="ZYX.pdf" onclick="javascript:_gaq.push(['_trackPageview’,’/download/pdf’]);_gaq.push(['_trackEvent’,’download’,’PDF’]);">ダウンロード</a>

この変更、その他カスタム変数などを使っている場合も変更が必要です。

【参考】
非同期スニペットのスタート ガイド – Google Analytics – Google Code
非同期トラッキングの利用ガイド – Google Analytics – Google Code
Google Analytics 非同期トラッキングコード再考 | MOL