初代編集長ブログ―安田英久

Googleアナリティクスでの外部リンククリック計測3つの手法の利点と欠点を整理してみた

結論としては、setTimeoutとかhitCallbackとか小細工せずに「とれるデータだけとる」が良い
Web担のなかの人

今日は、Googleアナリティクスでのアクセス解析で外部リンクのクリックを追跡する手法について、情報を整理してみます。私は結論としては、setTimeoutとかhitCallbackとか小細工せずに「とれるデータだけとる」が良いと判断しました。

GoogleアナリティクスなどのJavaScriptを利用したアクセス解析では、トラッキングコードをカスタマイズすることで「自分が管理しているページから外部サイトへのリンクがクリックされたこと」のデータを取得して分析できます。

計測の方法は_trackPageviewと_trackEvent

方法としては、次の2種類があります。

  • 仮想ページビューを使う方法(_trackPageview命令を使う)
  • イベントトラッキングを使う方法(_trackEvent命令を使う)

いずれも、HTMLまたはJavaScriptをカスタマイズして、リンクがクリックされた際にGoogleアナリティクスの計測の命令が動くようにする方法です。

仮想ページビューを使う方法は、サイト全体のページビューの数値への影響があるので、個人的にはイベントトラッキングを使うほうが好きです。

でも、ぶっちゃけ、どっちでも良いので、好みや他のトラッキングのカスタマイズ状況で判断しましょう。

でもリンククリックの計測漏れは発生している

ただし、こうした測定をふつうに実装すると、リンククリックの計測漏れが発生する場合があります。というのも、

  1. ブラウザでリンクがクリックされる
  2. JavaScriptが動作してGoogleアナリティクスの計測サーバーにクリック情報を伝える
  3. ブラウザの表示がリンク先のページに切り替わる

という流れになるのですが、(2)のクリック計測が完了する前にブラウザの表示が切り替わってしまうことがあり、その場合にはクリックしたことがGoogleアナリティクスのデータ保存サーバーに記録されないのです。

リンク先のサイトの動作が速ければ速いほど計測漏れが出てしまう状態。

「できるだけちゃんと計測したい」というのはアナリストの気持ち。ではどうすればいいのでしょうか?

グーグル「意図的にズラすsetTimeoutを使うべし」

計測漏れの対策として、グーグルが公式に推奨しているのが、「リンクのクリックから少し時間をずらしてページ表示を切り替える」という方法です。

JavaScriptのsetTimeoutという命令を使う方法で、次のような流れになります。

  1. ブラウザでリンクがクリックされる
  2. JavaScriptでブラウザのリンククリック時のデフォルトの動作(次のページへの切り替え)を止める
  3. JavaScriptでGoogleアナリティクスの計測サーバーにクリック情報を伝える
  4. 少し時間をおいてから、JavaScriptでブラウザの表示をリンク先のページに切り替える

グーグルの提示しているコードでは、約100ミリ秒(0.1秒)ずらしてリンク先のページに表示を切り替える例が示されています。ページ切り替えまでに少し時間をあけることで、Googleアナリティクスのサーバーに情報が伝わる時間を確保しようという方法ですね。

hitCallback命令で確実に実行

さらにグーグルは、Googleアナリティクスの命令で「計測が完了したら特定の動作をする」ように指定する方法を追加しました。hitCallbackという命令です。アユダンテさんが詳しく解説しています。

こちらでは、次のような流れになります。

  1. ブラウザでリンクがクリックされる
  2. JavaScriptでブラウザのリンククリック時のデフォルトの動作(次のページへの切り替え)を止める
  3. JavaScriptでGoogleアナリティクスの計測サーバーにクリック情報を伝える
  4. 計測サーバーに情報が伝わったのを確認してから、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も同時に使うようにするのがいいでしょう。

◇◇◇

上記のもろもろをテストできるページを用意しましたので、試してみてください。

用語集
Googleアナリティクス / HTML / JavaScript / アクセス解析 / スマートフォン / ページビュー / リンク / 外部リンク / 訪問
この記事が役に立ったらシェア!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!

人気記事トップ10(過去7日間)

今日の用語

カオスマップ
企業やサービスや製品などについて、カテゴリーや関係性でまとめて図にしたもの。具体 ...→用語集へ

インフォメーション

RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]