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

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

 

WEB最適化の知と技法

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

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

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

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

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

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

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

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

WEB最適化の知と技法"Movable Type"

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>

 

簡単に解説。

<MTSetVars>
cat_lab=<MTCategoryLabel>
</MTSetVars>

ここでは、変数cat_labに表示するカテゴリ名を入れる。

 

<MTSetVars>
p_cat=<MTEntryCategory>
</MTSetVars>

そして、変数p_catには各エントリーのメインカテゴリ(主カテゴリ、プライマリカテゴリ)名を入れる。

 

<MTIf name="cat_lab" eq="$p_cat"></MTIf>

あとは、ここで、変数cat_labと変数p_catが一致する場合のみ、表示させるようにする。

 

こうすれば、プラグインなど使わずにメインカテゴリのみの記事一覧が作れます。

 

WEB最適化の知と技法

これは、すごい。
自分でサイト持っている人は、是非使ってみてほしい。

Googleウェブマスターツールとは、自分のWEBサイトが
Googleにどのように見られているかが分かるツールだ。

例えば、上位の検索キーワードと自分のサイトの掲載順位など
様々な情報が手に入る。

090731search_gooletool.gif

本Blogのタイトルである「望楼守」での検索では、
なんと検索順位トップ!(うわぁい)

ドラッカーがゲーテの「ファウスト」の引用して自分を望楼守に
例えた話を 紹介しているページよりも上位だ。
タイトルに使っているワードって強いんだねぇ。

 

と、ここまでは理解できるのですが・・・・

 

意外なワードでは、「脱残業」が検索順位4位。
残業から逃れようとして訪れた人スイマセン、
お役に立てる記事はありません。。

 

意味分からないのは「あるかとらす」。

あるかとらす・・・?
アルカトラス?

なぜヘビメタ?  なぜ刑務所?(それはアルカトラズだ)
そんな言葉、使ったことないはずなのに何故か12位。
不思議に思って実際に検索してみると、、、

090731search_arukatorasu.gif

 ?!
あるかと。[中略]らすちの」って、そんな馬鹿な!(笑

 

あとは、「国際法 勉強法」。
ごめんなさい。「脱残業」と同じで国際法の勉強法についてなんか
一切書いてません!(ちなみにこのページが引っかかった)

 

しかし、「脱残業」「国際法 勉強法」「会社 開業」って、
どんなブログだよ、と。

残業せずに、国際法を一生懸命勉強して、起業しました!
みたいな内容を想像しちゃうじゃないですか。

それなのに実際は、意味不明のアラサー大学生のにっき。
期待を裏切ってごめそ。。。
(´・ω・`)しゅーん

 

と、まあ見てるだけで色々なネタ、、もといハッケンがあること間違いなし。
SEOとかCEOに興味ないみんなも一度は見てみるべし!

 

P.S.
しかしライフネット生命関連のワードが3つも入っているのは、
それだけ多くの人がGoogleでこの言葉を検索するってことですよね。
最近はプロモーションも積極的に行ってるから認知度も
上がってきたんですかね。

(ぼくも死亡保険だけでも入ろうかしら)