Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
Clik here to view.
今日は、Googleアナリティクスでのアクセス解析で外部リンクのクリックを追跡する手法について、情報を整理してみます。私は結論としては、setTimeoutとかhitCallbackとか小細工せずに「とれるデータだけとる」が良いと判断しました。
GoogleアナリティクスなどのJavaScriptを利用したアクセス解析では、トラッキングコードをカスタマイズすることで「自分が管理しているページから外部サイトへのリンクがクリックされたこと」のデータを取得して分析できます。
計測の方法は_trackPageviewと_trackEvent
方法としては、次の2種類があります。
- 仮想ページビューを使う方法（_trackPageview命令を使う）
- イベントトラッキングを使う方法（_trackEvent命令を使う）
いずれも、HTMLまたはJavaScriptをカスタマイズして、リンクがクリックされた際にGoogleアナリティクスの計測の命令が動くようにする方法です。
仮想ページビューを使う方法は、サイト全体のページビューの数値への影響があるので、個人的にはイベントトラッキングを使うほうが好きです。
でも、ぶっちゃけ、どっちでも良いので、好みや他のトラッキングのカスタマイズ状況で判断しましょう。
でもリンククリックの計測漏れは発生している
ただし、こうした測定をふつうに実装すると、リンククリックの計測漏れが発生する場合があります。というのも、
- ブラウザでリンクがクリックされる
- JavaScriptが動作してGoogleアナリティクスの計測サーバーにクリック情報を伝える
- ブラウザの表示がリンク先のページに切り替わる
という流れになるのですが、(2)のクリック計測が完了する前にブラウザの表示が切り替わってしまうことがあり、その場合にはクリックしたことがGoogleアナリティクスのデータ保存サーバーに記録されないのです。
リンク先のサイトの動作が速ければ速いほど計測漏れが出てしまう状態。
「できるだけちゃんと計測したい」というのはアナリストの気持ち。ではどうすればいいのでしょうか？
グーグル「意図的にズラすsetTimeoutを使うべし」
計測漏れの対策として、グーグルが公式に推奨しているのが、「リンクのクリックから少し時間をずらしてページ表示を切り替える」という方法です。
JavaScriptのsetTimeoutという命令を使う方法で、次のような流れになります。
- ブラウザでリンクがクリックされる
- JavaScriptでブラウザのリンククリック時のデフォルトの動作（次のページへの切り替え）を止める
- JavaScriptでGoogleアナリティクスの計測サーバーにクリック情報を伝える
- 少し時間をおいてから、JavaScriptでブラウザの表示をリンク先のページに切り替える
グーグルの提示しているコードでは、約100ミリ秒（0.1秒）ずらしてリンク先のページに表示を切り替える例が示されています。ページ切り替えまでに少し時間をあけることで、Googleアナリティクスのサーバーに情報が伝わる時間を確保しようという方法ですね。
hitCallback命令で確実に実行
さらにグーグルは、Googleアナリティクスの命令で「計測が完了したら特定の動作をする」ように指定する方法を追加しました。hitCallbackという命令です。アユダンテさんが詳しく解説しています。
こちらでは、次のような流れになります。
- ブラウザでリンクがクリックされる
- JavaScriptでブラウザのリンククリック時のデフォルトの動作（次のページへの切り替え）を止める
- JavaScriptでGoogleアナリティクスの計測サーバーにクリック情報を伝える
- 計測サーバーに情報が伝わったのを確認してから、JavaScriptでブラウザの表示をリンク先のページに切り替える
上記ブログでは_trackPageview時の方法が解説されていますが、以下のようにすれば、イベントトラッキングでも使えます。
<a href="http://example.com/" onclick="trackClick(event);">リンク</a>
<script type="text/javascript">
function trackClick(evt) {
_gaq.push(
// コールバック設定（トラック後にリンク先にジャンプ）
[
'_set',
{
hitCallback : function(){
document.location.href = evt.target.href;
}
}
],
// イベントトラッキング
[
'_trackEvent',
'link click',
evt.target.href,
document.location.href
]
);
// デフォルトの動作とイベント伝搬をストップ（return false相当）
evt.preventDefault();
evt.stopPropagation();
if (evt.returnValue) { evt.returnValue = false }; // IE用
}
</script>
上記のコードではイベントトラッキングのカテゴリ名に「link click」を、アクションにはリンク先URLを、ラベルにはリンクがクリックされたページのURLを記録しています。
「コールバック」というのは「特定の処理が終わった時点で、次の動作を行う」という仕組みですので、これなら確実に「Googleアナリティクスのサーバーに情報を送る」→「ブラウザの表示をリンク先のページに切り替える」の順番で実行されます。
どの方法が最も良いのか？
いろいろと解説しましたが、それぞれの手法の特徴を整理してみます。
- 標準のトラッキングのみを行う方法
- 計測漏れが発生するのは避けられない
- ブラウザの動作はユーザーが意図したとおりになる
- setTimeoutでズラす方法
- 計測漏れがかなり減る（100%なくなるわけではない）
- Googleアナリティクスのサーバーに問題があった場合でもリンクは動作する
- ユーザーは必ず指定した秒数（0.1秒など）待たされる
- Ctrlキーを押しながらクリックした場合にも同じタブにリンク先を開いてしまう
- hitCallbackを使う方法
- 計測漏れは、ほぼ100%なくなる
- 万が一Googleアナリティクスのサーバーに問題があった場合、リンクが動作しない（かも？）
- ユーザーが待たされる時間は最低限の長さになる
- Ctrlキーを押しながらクリックした場合にも同じタブにリンク先を開いてしまう
ちなみに、どの手法を使っても、右クリックで「リンク先を新しいタブで開く」などを使った場合は計測できません。
Web担ではsetTimeoutを使う方法は美しくないのでスルーしていたのですが、hitCallbackは良い仕組みだと思って、早速実装してみました。
しかし！ Ctrlキーを押しながらクリックした場合にも同じタブにリンク先を開いてしまうという、使い勝手上の致命的な欠点が見つかったので、元に戻しました。
このあたりブラウザによって微妙に動作が違いました。FirefoxとChromeではCtrlキーを無視した動作になりましたが、IEではCtrlキーを押しながらクリックでは新タブに開いてトラッキングはされませんでした。Operaでは新しいタブと現在のタブの両方にリンク先が表示されたり……。
ほとんどのユーザーには関係ないことなのかもしれませんが、新しいタブで開こうとCtrlキーを押しながらリンクをクリックしたのに元のタブにリンク先が開いたら、かなりイラつきませんか？ 場合によっては状況がわからず混乱してしまうでしょう。
JavaScriptを工夫して、Ctrlキーが押されていた場合は別の処理をするという方法も考えられます。しかし、そうしたとしても、ユーザーがブラウザのデフォルトの動作を変更していた場合にはもっとダメになります。
ですので、結論としては、「外部リンクのクリック計測では漏れが発生するもの」という認識で、小細工せずにおくのが良いと判断しました。
アナリストとしてはデータをとりたいところですが、ウェブマスターとしてはユーザーが大切ですからね。
計測のタイミングはclick？ mousedown？
ちなみに、計測漏れの対策としてmousedownイベントを利用する方法もあります。
「リンクがクリックされた際に」特定の動作をさせるには、onClickイベントを使うのが一般的です。が、onMouseDown（マウスのボタンが押し下げられたとき）で計測する方法を使うと、少し計測のタイミングが早くなるため、計測漏れが減るだろうということです。
海外のCardinalPathのブログでテスト結果が発表されたのですが、ある条件でテストした結果、あるページへの235件の訪問に対して、onMouseDownでの計測では203件のクリックが記録されたのに対して、onClickでの計測では122件のクリックしか記録されなかったということです。
このテストではonMouseDownとonClickを同時に計測しているのでテストとしては微妙な気もしますが、なるほど、一理あります。onClickからonMouseDownに変更するのはアリかもしれませんね。
ただし、PCではonMouseDown→onClickの順にJavaScriptイベントが発生するのですが、スマートフォンではonMouseDownとonClickが同時に発生するブラウザもありますので、そこまで違いが出ない可能性があります。
また、onMouseDownだけで計測していると、キーボードでリンクを操作した場合に計測されませんので、onKeyDownも同時に使うようにするのがいいでしょう。
上記のもろもろをテストできるページを用意しましたので、試してみてください。
- 内容カテゴリ：アクセス解析
- コーナー：編集長ブログ―安田英久
※このコンテンツはWebサイト「Web担当者Forum - 企業ホームページとネットマーケティングの実践情報サイト - SEO/SEM アクセス解析 CMS ユーザビリティなど」で公開されている記事のフィードに含まれているものです。
オリジナル記事：Googleアナリティクスでの外部リンククリック計測3つの手法の利点と欠点を整理してみた [編集長ブログ―安田英久] | Web担当者Forum
Copyright (C) IMPRESS BUSINESS MEDIA CORPORATION, an Impress Group company. All rights reserved.
Clik here to view.
Clik here to view.
Clik here to view.
Clik here to view.
Clik here to view.