なぜ_trackPageviewでデータが取れないのか

_trackPageviewは特定のリンクがクリックされた際や特定のアクションがなされた際に、Googleアナリティクスで「ユーザーが○○を何回したか」を数えるのに使用する関数です。
その用途上、アウトリンクなどのonclickイベントに設定して「このリンクが何回クリックされたか調べる」といったように使用することも多いのですが、しかしアウトリンクで使用した場合、非同期コードだとそのデータが正しく計測できない場合があります。

これはGoogleアナリティクスへ_trackPageviewがデータを送信しきる前にページが遷移してしまい、送信処理が中断されてしまうのが原因です。

現在のGoogleアナリティクスが発行するページ組み込み用コードの主流は、いわゆる非同期コードになります。非同期コードは「ブラウジングをサクサク軽快にするため、処理の完了を待たずに先に進める」のが特徴なんですが、その「完了を待たない」の部分が悪影響になってしまっているわけですね。
ザックリとした図にしてみたのが、上になるわけです。

そこで今回はhitCallback関数を使って、「_trackPageviewが送信完了したあとにページ遷移をするようにさせよう」というのが趣旨になります。

hitCallback関数ってなに？

以前、「Googleアナリティクス非同期コードにおける新しいAPIについて」というタイトルで2012年5月に新たに加わった関数などについて翻訳記事を公開いたしました。
hitCallback関数はそこで新たに追加された関数で、簡単に言うと「データ送信が終わったタイミング（成功/エラーどちらの場合でも）で何らかのアクションを行う」ための関数です。

使い方としては、_gaq.pushへ_trackPageviewを起動させる際に、その引数として一緒に記述する形になります。

_gaq.push(['_trackPageview', {hitCallback: function() {

  ★_trackPageview完了時に行う処理★

}}]);

ここでhitCallback関数に添えて記述した処理（★～★に記述した処理）が、_trackPageviewなどの処理が完了した段階で改めて行われます。
例えば「alert("送信完了！");」と記述されていた場合は、Googleアナリティクスへ_trackPageviewが送信完了（またはエラーが発生）すると「送信完了！」というアラートメッセージが出るようになります。

実際にhitCallbackを使ってみる

さて、では具体的な使い方を見てみましょう。
アウトリンクに設定した_trackPageviewでhitCallback関数を使う場合は、下記のように記述します。

<a href="http://example.com/" onclick="_gaq.push(['_trackPageview', {hitCallback: function() { document.location.href = 'http://example.com/'; }}]); return false;"></a>

onclickの最後にreturn falseを追加することでリンククリックによるページの遷移をキャンセルさせて、_trackPageviewの送信が完了した段階で改めてJavaScriptでページ遷移させる形になります。
つまり、同期コードっぽい処理にしてしまうわけです。

1. ユーザーがリンクをクリックする
2. onclickイベントが起動し、_trackPageviewが実行される
3. return false;でリンクのクリックアクションを中断
4. _trackPageviewが完了し、hitCallback関数に設定された処理location.hrefが実行される
5. ページが遷移する

上記サンプルソースにおける、各ポイントは以下となります。

なお、上記はもっともシンプルな、単純に現在地のurlを_trackPageviewで計測するパターンです。
カウントするURLを任意でカスタマイズする場合は、下記のようにpageとして記述する形になります。

<a href="http://example.com/" onclick="_gaq.push(['_trackPageview', {page:'カウントするURL', hitCallback: function() { document.location.href = 'http://example.com/'; }}]); return false;"></a>

カウントするURLはいつものように’_trackPageview‘の後ろに,区切りで記述しても、エラーとなってしまい実行できません。
渡す引数が配列になっていますので、hitCallback関数と同じ{}内に「page:'カウントするURL',」という書式で記述する必要があるのです。

_gaq.push(['_trackPageview', 'カウントするURL', {hitCallback: ～～}]);

_gaq.push(['_trackPageview', {page:'カウントするURL', hitCallback: ～～}]

また、カウントするURLはpageで渡せますが、同様にページのタイトルを設定する際は

title: 'カウントするページタイトル',

と記述します。
これでアウトリンクにも_trackPageviewが無事に使えるようになります。