CSS＆JavaScriptを使ってサイト利用者の訪問済みor未訪問サイトを分析:phpspot開発日誌

前の記事 ≪：hostsファイルの編集・監視をする「Hosts File Manager」
次の記事 ≫：Web 2.0カラーパレット

CSS＆JavaScriptを使ってサイト利用者の訪問済みor未訪問サイトを分析

2006年08月25日-

スポンサードリンク

A New Way of Tracking Users' Browsing Habits - techfoolery

Jeremiah Grossman came up with a really clever way of using Javascript to find what pages you've visited recently.

CSS＆JavaScriptを使ってサイト利用者の訪問済みor未訪問サイトを分析する方法。
自分のサイトに来ている人は他のこんなサイトも見ている、なんてことを管理者側で知ることができるんですね。

早速デモを見ていきましょう。

まずは、サイト訪問済みとするため、www.yahoo.com を見ておきましょう。
そして、サンプルページを見てみてください。www.yahoo.com　が表示されるはずです。
(他にもサンプルページ上で定義されたリストの中で訪れたサイトがあれば表示されます)
履歴を消して再度訪れると、何も表示されなくなります。
このように、訪問済みor未訪問サイトを出しわけることが出来る上、JavaScript によってその利用状態を知ることができます。

紹介サイトのデモを参考に、独自にHTML+CSS+Javascriptを作ってみると次のような感じ。
3つの掲載サイトのうち、まだ訪れたことのないサイトのみを画面に表示し、訪れたことのあるサイトはalertで表示します。

■CSS ■HTML ■Javascript

<html>
<style>
a:visited{
position:absolute;
left:0px;
top:0px;
overflow:hidden;
width:0px;
height:0px;
}
</style>
<body>
<h1>まだ訪れていないサイト</h1>
<a href="http://www.yahoo.com" id="a">yahoo</a><br>
<a href="http://www.goo.com" id="b">goo</a><br>
<a href="http://www.yahoo.co.jp" id="c">goo</a><br>
<script>
if (document.getElementById("a").offsetTop == 0) {
alert(document.getElementById("a").href+"は訪問済み");
}
if (document.getElementById("b").offsetTop == 0) {
alert(document.getElementById("b").href+"は訪問済み");
}
if (document.getElementById("c").offsetTop == 0) {
alert(document.getElementById("c").href+"は訪問済み");
}
</script>
</body>
</html>

CSSの定義( a:visited 部分 )によって、訪問済みのURLはCSSの指定通り見えなくなります。
これにより、利用者がまだ見ていないページだけを表示することが可能になります。
このテクニックはリンク集なんかでリスト表示する場合なんかに使えますね。
ここまではCSSだけで実現出来ます。

更に、CSSの定義により、訪問済みのURL部分のoffsetTopプロパティは0になるようにしているので、
JavaScriptを使って、offsetTopの値を得ることにより、上記サンプル例のようにして訪問/未訪問のサイトをトラック出来ます。
このJavaScriptで取得した値をAjax等でサーバに格納するようにすると、自分のページに来ている人の他のページ利用状況が取れます。

例えば、このブログに来ている人は、どれだけ phpspot も見てくれているかどうか？ということを知ることが出来ます。

Webマスターはユーザごとにどんなページを見ているか、というのを把握でき、サイトの解析に役立ちます。
逆に利用者側は、自分がどういうサイトを見ているか、というのを知られてしまうので、気になる方はJavaScriptを切る/履歴を頻繁に消す等の対策が有効です。

関連の記事検索：JavaScript, CSS, チュートリアル