ページのクリックされたところがヒートアップする「Clickheat」

Webページのどこがクリックされているかを表示してくれるプログラム「Clickheat」。phpとJavascriptを使ったプログラムで、トラッキングしたいページにJavascriptを埋め込むことで、そのページのどこがよくクリックされているかをGDを使って視覚的に表示してくれます。仕組みについてはDo You PHP はてなさんで紹介されています。

Clickheat

設置は簡単らしいのですが、インストレーションがいかんせん英語なのでよくわからないまま設置。以下、覚書。

  1. まずはClickheatから圧縮ライブラリをダウンロードし、解凍後フォルダ名をclickheatにリネームする。
  2. フォルダごとサーバーにアップロード。私の場合はindexをトラッキングしたかったので、indexと同じ階層におきました。
  3. indexページの任意の場所にClickheatを呼び出すためのJSを挿入。インストレーションでは<body>の直前となっていますが、Wordpressの場合<body>にすると全てのページから呼び出してしまうので、トップページにしている部分の最下部に挿入。JSはインストレーション参照。
    **pageというのはトラッキングしたいページの名前を書きます。indexならindex、それ以下のアーカイブ全体であればアーカイブ名を入れます。
  4. config.php内のパスワード[CLICKHEAT_PASSWORD]を変更します。
  5. clickheat.js内のinitpageをトラッキングするページの名前に変更します。
  6. サーバー上のclickheatフォルダ内にlogsフォルダを作成し、パーミッションを書き込み可能に設定します。
  7. 修正したファイルをサーバー内にアップロードして上書きする。
  8. ブラウザからclickheat/check.phpを呼び出し、全ての設定が完了していることを確認します。

全ての設定が完了したら、ブラウザからclickheat/を呼び出します。パスワードを入力してログインし、[Show as heatmap]にチェックを入れてupdateボタンを押せば表示されるはずです。Google Analyticsのサイト上のデータ表示と合わせてみると、アクセス解析に役立つのでは?と思います。

Tags: , , ,

Leave a Reply

Recent Posts

Googlemaps ストリートビュー日本版

Googlemaps ストリートビュー日本版

ようやく日本版のGooglemapsストリートビューが登場ということで、仕事さぼってグリグリいじってみました。とりあえず、東京、京都、大阪、神戸など主要都市だけと限定的だけど、かなり見ごたえありです。...more

仕事を効率よく進めるために

仕事を効率よく進めるために

どうも昔から片付け物が苦手。かといって、散らかっているともっとやる気がなくなったりする。そんな私が気をつけていることといえば、PCのデスクトップ上を極力きれいに保つこと。...more

色覚異常の人にとってどう見えているかを検証してみる

色覚異常の人にとってどう見えているかを検証してみる

COLOURloversですごく興味深い内容の『As Seen By The Color Blind』がエントリーされています。色覚異常を持つ人にとって色相がどう変化するかを検証しまとめてあります。...more

Googleの仮想世界サービス Liverly

Googleの仮想世界サービス Liverly

とうとうGoogleがLiverlyを立ち上げて仮想世界に参入!という情報が各サイトで取り上げられてます。今まで、仮想世界=セカンドライフだったのですが、Googleが参加してきたことで今後どう変わっていくのか楽しみです。...more

今さらながらmixiにはまってる

今さらながらmixiにはまってる

職場かわってから、友人達と連絡取り合う方法の一つとしてmixiをはじめだけど、これがなかなか面白い。これまで、mixiって閉鎖的な感じで、アカウントを持ってはいるものの、カキコのひとつしかしてなかったけど、最近は毎日誰かの日記にコメントつけてる自分がいます。...more

Last FM

Analytics


Web Design Blogs - Blog Catalog Blog Directory