2008年4月30日 15:02 | コメント(1)
ClickHeatでクリック位置のヒートマップ:ホームページのどこをクリックしているかの統計
ホームページを見に来ている方が、どこをクリックしているかがわかればな、って思ったことないですか?
アクセスログをソフトで調べた場合、出すことができるが、どこの部分をクリックしたんだろうというのは取れないです。
クリック位置をヒートマップというので表示するツールが、オープンソースで提供されています。
ClickHeatのサイトからダウンロードできます。
ダウンロードをした後の設定が難しいのかなと思ったが意外と簡単です。
これを全ページに導入すれば全ページ調べていくことができます。
誰でも簡単にできるように、導入の仕方をまとめました。
ClickHeatのダウンロードの後、FTPでソースを導入
ダウンロードファイルを解凍すると「clickheat」のフォルダがでてきます。
これをトップフォルダにそのままアップロードします。
ブラウザで「http://www.自分のドメイン/clickheat/にアクセスします。
ClickHeat画面 事前チェック

URLにアクセスすると、このような画面がでます。
最初から日本語なので安心です。
ClickHeat画面 設定

次に設定画面です。
自分の好きなように設定するといいです。
そのままでもいいのでログインパラメータのところだけは設定してください。
ClickHeat画面 ログイン画面

次にログイン画面に移動します。
ここで先ほどの設定で行ったユーザー名とパスワードをいれます。
ClickHeat画面 統計の表示画面

一回目アクセスするとログがないので、このように表示されます。
Javascriptコードをウェブページに正確に埋め込みましたか?と記載されているのでここをクリックします。
ClickHeat画面 Javascriptコード

Javascriptコードをコピーしてお使いください。
ここでページごとに設定する箇所は赤字のところです。
全ページにいれる場合、ここを全ページ違う値をいれる必要があります。
ぞえぞえねっとはphpファイルなので、$_SERVER['REQUEST_URI']をいれて、全ページURLをいれるようにしています。
ClickHeat画面 統計の表示画面

実際統計がとれだしたら、このように表示されます。
これでユーザーがどこをクリックしたかがわかります。
web制作に関係のある記事一覧
- 見出しのサンプル集
- 複数のチェックボックスにチェックする入力支援javascript
- 画像メニューをCSSで作る(CSSでマウスオーバー)
- 検索キーワードチェックツール SEO対策
- 文字サイズを小さく、文字サイズを大きくするjavascript
- メニューを画像のように使う(CSSでマウスオーバー)
- メイリオとMS Pゴシックの違い
- グーグルサイトマップ(Google Sitemap)用のXMLを作成する方法
- クリックで画像を切り替えるjavascript
- カウンターを置く理由を考える
- アフィリエイトの登録について
- やさしいブラウザ webサイトのバリアフリーチェック
- ぞえ式web制作学(ホームページ制作学):制作に必要なソフト
- さくらインターネットでMovable Type4の拡張子をPHPでする方法
- webサイトのコンテンツツリー、フォルダとファイル構造を取得する方法
- W3CのHTMLの妥当性検証「The W3C Markup Validation Service」
- SEOに有効なディレクトリ登録・検索エンジン登録サービス
- PPC忍者:マーケティングに重要なPPCを調べるソフト
- PHPで扱えるファイルマネージャー(FM-V / File Manager - Valet)
- MovableTypeで公開時では表示しない項目をプレビュー画面で確認したい場合
- Movable Typeで記事の「記事の続き」を表示する(MTEntryMore)
- Movable Typeで記事の「本文」を表示する(MTEntryBody)
- Movable Typeで記事の「タイトル」を表示する(MTEntryTitle)
- Movable Typeで携帯電話での投稿(モブログ):ubicast Mail Blogger
- MTEntriesに関するタグの使い方(Movable Type)
- JavascriptのみでRSSを表示するGoogle AJAX Feed API
- HTML・CSSタグの変換用辞書ファイル
- Firefoxでmixiにログインできなくなった場合
- ClickHeatでクリック位置のヒートマップ:ホームページのどこをクリックしているかの統計
- CSSハックまとめ
- CSSで写真を綺麗に・アルバムのように見せる表現
- 1枚の画像を使い画像メニューをCSSで作る(CSSでマウスオーバー)
- .htpasswdファイルの管理・編集するCGI

コメント(1)
2009年3月 4日 16:19
suzuki さん
はじめまして、suzukiと申します。
ClickHeatを導入するにあたって、とてもわかりやすく解説してくださっているこちらのページが大変参考になりました。ありがとうございます。
導入にあたってbata版が機能しないというトラブルにぶち当たったりもしましたが、おかげさまで今は無事に動いております。
TIPSとして「bata版で動かなければ安定板を使ってみてね」という旨の記事をブログで書いたのですが、記事中で参考にさせていただいたページとしてリンクさせていただきました。
念のためご報告と、素晴らしい記事のお礼まで。
コメントする