WEB最適化の知と技法

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

2011年10月24日
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>


<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>

※最初の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']);

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

Comments: 0
TrackBacks: 0

404ページがなくても「404 Not Found」エラーが測定できる

2011年10月23日
WEB最適化の知と技法

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

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

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

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

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

.htaccessが変更できる
phpが使える
非同期のGoogle Analytics計測用タグを使っている

この方法で計測できるもの

エラー体験率
新規訪問エラー率
リンクされているのに存在しないページ
存在しないページにリンクしているページ

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

.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」となります。

■計測のための実装２：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ページを作りナビゲーションしたり、エラー多発の存在しないページについては、作成したり、代替ページにリダイレクトするなどを検討すればいいでしょう。

Comments: 0
TrackBacks: 0

"pageTracker"が使えない？！ Google Analytics エラー対処法「pagetracker is not defined.」

2010年11月25日
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

Comments: 2
TrackBacks: 0

WEBマーケターのミッションとは？

2010年11月 9日
WEB最適化の知と技法

今日、色々と考えたことを備忘録としてメモメモ。。

WEB担当者のミッションは、会社の業績に寄与することであり、更新、リニューアル、コンテンツの作成はその手段にすぎない。そのミッションを果たすためには、次の2つが必要である。

ユーザーの満足する体験を提供するサイトである。
ユーザーの満足が企業の収益に寄与する仕組みがある。

WEBサイトの存在意義は、ユーザーとのデジタルコミュニケーションを通じた問題解決であり、満足体験の提供である。そのためには、次のことが必要となる。

WEBサイトの役割と成果の定義
ユーザーの定義
問題解決の提供手段の定義
その問題解決における満足体験シナリオの定義

また、WEB戦略策定の大前提としては、以下のことを押える必要がある。
事業のビジネスプロセス上におけるWEBサイトの役割。
WEB施策の取り組みによって、どれだけの収益増が見込めるか。
その他（営業など）の施策との総計によって、全社の収益目標が達成されるのか。

それらを踏まえて、成果を定め、その指標をアクセス解析で測り、
解析結果から目標と現状のギャップを明らかにし、その改善策を策定する必要がある。

これを素早く、低コストで実施するためには、
制作面では、ガイドラインの策定、パーツのコンポーネント化、
運用面では、仮説設定とアクセス解析による検証
が重要となる。

Comments: 0
TrackBacks: 0

【ＭＴ】カテゴリ別記事一覧でメインカテゴリ（プライマリカテゴリ）のみ表示する方法

2010年5月17日
WEB最適化の知と技法

Movable Typeで、プラグイン等を使わずにメインカテゴリ別に記事一覧をソートする方法です。普通にカテゴリ別記事一覧を作ると、メインカテゴリ、サブカテゴリの両方に記事が出てしまうので、それを回避する方法です。

カテゴリー毎記事一覧（主カテゴリのみ表示）
<MTTopLevelCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li><MTCategoryLabel>
<MTSetVars>
cat_lab=<MTCategoryLabel>
</MTSetVars>
<ul>
<MTEntries lastn="all">
<MTSetVars>
p_cat=<MTEntryCategory>
</MTSetVars>
<MTIf name="cat_lab" eq="$p_cat">
<li><a href="<mt:EntryPermalink>"><$mt:EntryTitle$></a></li>
</MTIf>
</MTEntries>
</ul>
<MTElse>
<li><MTCategoryLabel>
</MTIfNonZero>
<$MTSubCatsRecurse$>
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTTopLevelCategories>