キャンペーン用URLパラメータは#を使えばキレイにできる
リファラの代わりにURLパラメータを使う理由
サイトにどこから訪問したかを特定するため、アクセス解析のツールはブラウザが送信するリンク元のURL（リファラー）を調べます。ところが、リファラーは完全ではなく、URLがセットされないことがあります。その数が少ない場合は無視していても問題ないのですが、お金をかけて実施するリスティングなどの広告や、効果がすでに認知されているメルマガ（ニュースレター）、最近注目が高いソーシャル系の取り組みに関しては、社内で効果を求められることが多いものです。
リファラーが使えない場合のために普及したのが、URLのクエリ文字列（RFC 3986の定義では、URI中の「?」以降の文字列、ただし「#」以降を含まない）にパラメータを追加する方法です。
SiteCatalystの場合
https://www.cms-ia.info/?scid=tw20110718
Google Analyticsの場合
https://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を伝えにくい
- 検索エンジンのリンク評価が分散される
- ソーシャルブックマークなどが分散される
という４つのデメリットがあります。加えて、
- パラメータ付きのURLが別の場所で流通してしまい、計測の精度が落ちる
- 動的プログラムとパラメータ名がコンフリクトすることがある
というデメリットもあります。特に、最近はパラメータ付きのURLでサイトを訪問し、そのまま「いいね！」や「Tweet」するという行動も多いはず。本来とは異なる状況でパラメータが流用されてしまうため、アクセス元のトラフィックソースを計測したデータの精度が落ちてしまいます。
リダイレクトという解決策
この解決策として、計測した後にパラメータなしのページへリダイレクトし、その場合の読み込みはGoogle Analyticsのページビューとしてカウントしない、という方式がWeb担では実装されています。パラメータを完全に消し去ることができるのは良いのですが、
- 実装が少し複雑
- Google Analytics以外に導入しているツールがある場合はそれぞれ個別対応が必要
- 再読み込みするのでユーザーにとっての体感が犠牲になる
というデメリットが残ります。
そこで、少し割り切った妥協案を考えてみました。
ハッシュという解決策
- URLのタグ付にクエリ文字列「?」ではなくハッシュ「#」を使う
- 計測後にページを再読み込みすることなく#以降を消す（ただしURLの最後に「#」が残る）
- HTML5対応ブラウザのみ#以降を完全に消す
実装は割とシンプルです。
Google Analyticsの場合
1.ハッシュに対応するため、Google Analyticsの計測タグに下記を追加
_gaq.push(['_setAllowAnchor', true]);
これだけで、
https://demo.ga7.org/hash.html#utm_source=cms-ia&utm_medium=web&utm_campaign=blog0727
というURLを認識できるようになります。
2.計測後にURLを操作するためのコールバック関数を指定
非同期の場合、関数そのものをpushすると、trackPageviewが実行された後にその関数が実行されるようになります（ってあまり知られていないですよね）
- クロスドメインの_linkerでhashを使う設定にした場合のURLも認識できます
- HTML5対応ブラウザでは、計測後に「#」以降が完全に消えます。
- 未対応ブラウザだと、URLの最後に「#」だけ残り、ブラウザの履歴に元のURLが残ります（何もしないよりは良いですよね）
デモページを作ったので、いろいろなブラウザでアクセスしてみてください。
SiteCatalystの場合
1. クエリのかわりにhashを読むプラグインを導入する
Kevinのサイトからダウンロードしてください。