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

2011年07月27日 00:36

リファラの代わりにURLパラメータを使う理由

サイトにどこから訪問したかを特定するため、アクセス解析のツールはブラウザが送信するリンク元のURL(リファラー)を調べます。ところが、リファラーは完全ではなく、URLがセットされないことがあります。その数が少ない場合は無視していても問題ないのですが、お金をかけて実施するリスティングなどの広告や、効果がすでに認知されているメルマガ(ニュースレター)、最近注目が高いソーシャル系の取り組みに関しては、社内で効果を求められることが多いものです。

リファラーが使えない場合のために普及したのが、URLのクエリ文字列RFC 3986の定義では、URI中の「?」以降の文字列、ただし「#」以降を含まない)にパラメータを追加する方法です。

SiteCatalystの場合

http://www.cms-ia.info/?scid=tw20110718

Google Analyticsの場合

http://www.cms-ia.info/?utm_source=Twitter&utm_medium=Social&utm_campaign=20110718

ツールに関わらず基本は同じですが、SiteCatalystは一つのパラメータのみを付与し、計測後にそのメタデータをCSV(TSV)でサーバーにアップロードするので、URLは短めです。楽天でアクセス解析を推進していた時は、SEO的な懸念はありましたが、効果測定を優先してこの普及に努めていました。

一方、Google Analyticsは決められた種類のメタデータをURLに含めるため、URLが長くなりがちです。個人的にはGoogle Analyticsの方式を使うことはほとんどありません。

クエリ文字列にパラメータを足す方式のデメリット

この方式のデメリットについては、Web担当者Forumの安田編集長が「長くて汚いutm_*パラメータ付きURLをキレイにするGoogle Analytics用の少しマニアックなスクリプト」でまとめられたように、

  • 見た目に悪い
  • メールやTwitterでURLを伝えにくい
  • 検索エンジンのリンク評価が分散される
  • ソーシャルブックマークなどが分散される

という4つのデメリットがあります。加えて、

  • パラメータ付きのURLが別の場所で流通してしまい、計測の精度が落ちる
  • 動的プログラムとパラメータ名がコンフリクトすることがある

というデメリットもあります。特に、最近はパラメータ付きのURLでサイトを訪問し、そのまま「いいね!」や「Tweet」するという行動も多いはず。本来とは異なる状況でパラメータが流用されてしまうため、アクセス元のトラフィックソースを計測したデータの精度が落ちてしまいます。

リダイレクトという解決策

この解決策として、計測した後にパラメータなしのページへリダイレクトし、その場合の読み込みはGoogle Analyticsのページビューとしてカウントしない、という方式がWeb担では実装されています。パラメータを完全に消し去ることができるのは良いのですが、

  • 実装が少し複雑
  • Google Analytics以外に導入しているツールがある場合はそれぞれ個別対応が必要
  • 再読み込みするのでユーザーにとっての体感が犠牲になる

というデメリットが残ります。

そこで、少し割り切った妥協案を考えてみました。

ハッシュという解決策

  1. URLのタグ付にクエリ文字列「?」ではなくハッシュ「#」を使う
  2. 計測後にページを再読み込みすることなく#以降を消す(ただしURLの最後に「#」が残る)
  3. HTML5対応ブラウザのみ#以降を完全に消す

実装は割とシンプルです。

Google Analyticsの場合

1.ハッシュに対応するため、Google Analyticsの計測タグに下記を追加

_gaq.push(['_setAllowAnchor', true]);

これだけで、

http://demo.ga7.org/hash.html#utm_source=cms-ia&utm_medium=web&utm_campaign=blog0727

というURLを認識できるようになります。

2.計測後にURLを操作するためのコールバック関数を指定

非同期の場合、関数そのものをpushすると、trackPageviewが実行された後にその関数が実行されるようになります(ってあまり知られていないですよね)

code 32
  • クロスドメインの_linkerでhashを使う設定にした場合のURLも認識できます
  • HTML5対応ブラウザでは、計測後に「#」以降が完全に消えます。
  • 未対応ブラウザだと、URLの最後に「#」だけ残り、ブラウザの履歴に元のURLが残ります(何もしないよりは良いですよね)

デモページを作ったので、いろいろなブラウザでアクセスしてみてください。

SiteCatalystの場合

1. クエリのかわりにhashを読むプラグインを導入する

Kevinのサイトからダウンロードしてください。

2. キャンペーン変数をセットする行を以下のように書き換える。

code 33

3. s.t();の後に下記を追加する

code 34

Real Time Web Analytics