We Ain't Seen Nothin' Yet. : Google Aanalyticsのトラッキングを外部リンクにも対応させるJavaScriptライブラリ「ga-external.js」

Google Aanalyticsのトラッキングを外部リンクにも対応させるJavaScriptライブラリ「ga-external.js」

書いた人: noriaki 2007,09月16日(日) 19:00

このブログでは，Google Analyticsを利用してアクセスの解析を行っています． Google Analyticsは非常に高機能なアクセス解析ツールなのですが，Webビーコン型であるため，サイトへのスクリプトの埋め込みが必要です．したがって，自分のトラッキングIDを埋め込むことのできない外部のサイトやPDFファイルなどへのアクセスを知ることができません．

そこで，これらのリンクに対してonclickイベントを設定して，アクセスをトラッキングする方法が以下のように紹介されていました．

自分のサイトの特定のリンクやバナーを、何人の人がクリックしているか知りたいと思ったことはありませんか？何人の人がアフリエイトリンクをクリックしたか、国別に何人の人が広告バナーをクリックしたか、または、Digg（ソーシャルブックマークサイト）からの訪問者のうち何人が自分のサイトのRSSフィードを購読したのか、などを知りたい場合もあるはずです。 Google Analyticsでは、ハイパーリンクコードにonClick eventを追加するだけで、簡単にこれらをトラッキングすることができます。
Google AnalyticsでトラッキングするためのTips - GoogleMania | グーグルの便利な使い方

私も，上記のページを参考にいくつかのリンクに設定してみましたが，なにせめんどくさい．リンクを書くときにいつもonclickを書いていては日が暮れてしまいそうです．

そこで，読み込むだけで外部リンクにトラッキングイベントを設定してくれるJavaScriptライブラリを作成しました．名前は「ga-external.js」といいます．最初はexternal.jsにしようと思ったのですが，別ウインドウでページを開くライブラリがそんな名前をしていたので，Googla Analyticsの頭文字をもらって「ga-external.js」です．

詳細は，専用のページを用意しましたのでご覧ください．

また，どんな感じに動作するかがalertで分かるga-external.jsの動作確認ページも作ってみました．

現在はPrototype(prototype.js)を必要とするライブラリですが，jQuery版や，他のライブラリに依存しないものも書いてみたいなと思っています．

ご意見・ご感想・ご質問などはこのエントリのコメントやブックマークコメント，トラックバックなどでお気軽にお寄せください．コード作成の参考にさせていただきます．また，ズバッと書き換えたというのも大歓迎です．

コードは1時間くらいで書けたのですが，ドキュメントを用意してたら時間がかかってしまいました．ひとつ心配なのがすでにあったらどうしよう・・ということ・・大丈夫だよね！？

toolタグの付いた他のエントリ

javascriptタグの付いた他のエントリ

このエントリをdel.icio.usに追加する
 このエントリをはてなブックマークに追加する
| Tags javascript, tool

nuke edit
kenta said 53日 later:

とても有用なライブラリですね。有難く使わせていただきます。

一点リクエストがあります。ひとつの外部リンクに対して複数のページがリンク元になることもあるため、そのリンク元ページ名も記録されるとさらに便利だなぁと思いました。

【例】 /external/http://hogehoge.com/refferer.html/http://www.yahoo.co.jp/

可能でしたらご対応いただけると嬉しいです。
nuke edit
noriaki said 65日 later:

kentaさん

コメントありがとうございます．また，ご利用いただきありがとうございます．

ご要望いただいた"一つの外部リンクに対して複数のページがリンク元になる"場合というのがちょっと分からないです．

例から察するに，「http://hogehoge.com/refferer.html」から「http://www.yahoo.co.jp/」へリダイレクトする，ということでしょうか．

リダイレクトするページがリンク先である場合に関しては，リダイレクト先のページを本スクリプトの設置ページから取得することは基本的に出来ないと思います．

したがって，本スクリプトでは以下のトラッキングが限界ではないかと思っています．「/external/http://hogehoge.com/refferer.html」
nuke edit
kenta said 66日 later:

お返事ありがとうございます。わかりにくい例を出してしまってすみません。

「複数のリンク元」というのは、 A.html　B.html　C.html 上記3つのページに、それぞれhttp://www.yahoo.co.jp/へのリンクがあるような場合です。

http://www.yahoo.co.jp/へのリンクはどのページで最もクリックされたか、という情報が必要になることが多々あると思い、機能追加のリクエストをさせていただきました。

/external/http://hoge.com/A.html/_http://www.yahoo.co.jp/ /external/http://hoge.com/B.html/_http://www.yahoo.co.jp/ /external/http://hoge.com/C.html/_http://www.yahoo.co.jp/
nuke edit
てんた said 66日 later:

すばらしいプログラムをありがとうございます。偶然ですが、kentaさんと同じ要望を持ちました。 kentaさんが言っているのは、自分の（リンク元の）サイトの複数のページ上に、同一URLへの外部リンクがある場合、どのリンク元ページでのクリックなのかを区別したい、ということだと思います。例ページa.htmlからのhogehoge.comへのリンク　a/external/http://hogehoge.com/

ページb.htmlからのhogehoge.comへのリンク b/external/http://hogehoge.com/

のような。

文章がヘタなのでうまく伝わりますでしょうか？
nuke edit
noriaki said 68日 later:

kentaさん，てんたさん：

コメントありがとうございます．また，まとめての返信になることご容赦ください．

"一つの外部リンクに対して複数のページがリンク元になる"ということ，分かりました．理解力が乏しくてすいません＾＾；

ご要望の件に関しまして，ソースコードに本コメント末尾の修正を加えることで実現が可能です．

修正を浮くわ得た場合，外部リンクはkentaさんの例を用いた場合，以下のようにトラッキングされます．
- /external//A.html/http://www.yahoo.co.jp/
- /external//B.html/http://www.yahoo.co.jp/
- /external//C.html/http://www.yahoo.co.jp/
ただ，Google Analyticsの機能「概要 > 上位のコンテンツ > ナビゲーションサマリー」で同様のことができるのではないでしょうか．

例えば，「/external/http://www.yahoo.co.jp/」に関してナビゲーションサマリーを見ると，「前のURL」の部分でサイト内のどのページで何回クリックされたか記録されています．

最後に，ソースコードの修正箇所をpatchとして以下に示します．1行だけの修正なので試してみてください．（未検証です，すいません）
```
$ diff ga-external.js.original ga-external.js
--- ga-external.js.original     2007-11-23 19:17:13.000000000 +0900
+++ ga-external.js      2007-11-23 19:30:09.000000000 +0900
@@ -35,6 +35,7 @@
     }
     var _ga_elm_href = _ga_elm.href.toArray();
     _ga_elm_href.unshift(_ga_prefix);
+    _ga_elm_href.unshift(location.pathname + '/');
     _ga_elm_href.push(_ga_postfix);
     urchinTracker(_ga_elm_href.join('').escapeHTML());
 }
```
nuke edit
てんた said 72日 later:

noriakiさんご対応いただきありがとうございます！！！本当に感激です。ご指摘の方法もそのとおりですね。今後ともすばらしい情報を楽しみにしております。
nuke edit
schutz said 146日 later:

いいですね、これ。 prototypeが嫌いというわけではないんですが、サイズがちょっと大きいので導入に二の足を踏んでいます。できればライブラリに依存せず、軽量になればいいなあと思っています。もしお時間があればご検討ください。
nuke edit
さとる said 231日 later:

はじめまして、さとるです。 ga-external.js使わさせていただいております。

ひとつ、質問ですが、Mac OS10.5 Safari3.1.1にて、外部リンクのみ認識されません。サンプルの/external/http://www.yahoo.co.jp/でしょうか。他に、mailtoとlightboxはコンテンツサーマリーとして認識します。何が原因なのでしょうか。

よろしくお願いいたします。
nuke edit
noriaki said 237日 later:

てんたさん:

ありがとうございます。お役に立てたのでしたら嬉しいかぎりです。
nuke edit
noriaki said 237日 later:

schutzさん:

コメントありがとうございます。なるほど、Prototype込みのサイズですと大きいかもしれませんね。

ただ、クロスブラウザのことを考えるとライブラリを使うのが楽だったという理由があります。

また、単独で実装した場合でもクロスブラウザ対応となると、それなりの大きさになってしまうと思ったのもあったりします。

というわけで、どなたかが作ってくれるんじゃないかと期待してます！ｗ
nuke edit
noriaki said 237日 later:

さとるさん:

コメントありがとうございます。

手元にMacの環境がないため、Mac Safariでは検証できていないのです。ただ、クロスブラウザ部分はPrototypeに任せているので、もしかするとそっちの可能性もあるかなと思います。

ちなみに、Win Safariでは動作しているので何が原因なのか全然想像できてない状態です。