ヒートマップツールを無料でとても簡単に自作してWebサイトに導入する方法(heatmap.js+Milkcocoa)

Posted: / Tags: heatmap.js



Webでいうところのヒートマップツールとは、Webサイトを改善するために、クリックした場所やどこまでスクロールしたかなどを、度合いによって色を変えて視覚的にわかりやすく表示してくれるものです。

PtEngineクリックテールといったサービスを聞いたことがある方もいるのではないでしょうか。

今回は、そういったサービスを使うことなく、heatmap.jsとMilkcocoaを使って、無料でヒートマップツールを自作してしまおうといった記事になります。とても簡単なので、初心者の方も是非試して頂きたいです。

ヒートマップを表示するレイヤーが邪魔してリンクで回遊できないので、以下に各記事のリンクを用意しました。

heatmap.jsの使い方

こちらはとても簡単で、heatmap.jsを読み込んで、「ヒートマップを表示したい要素」と「x座標」と「y座標」を打ち込むだけでヒートマップが表示されます。

例えば以下のようなコードになります。

初期設定を入力して、座標と度合いのデータを追加するだけでヒートマップ表示ができる、というお手軽さです。

クリックした座標のデータをMilkcocoaに保存

座標さえ送れば描画してくれることがわかったので、クリック情報をMilkcocoaに保存してみましょう。

クリック座標の取得

heatmap.jsでは表示したい要素を指定します。なので、addDataで追加するデータのx, yは、その要素の上でのx, yになります(つまり、その要素の左上がx=0, y=0になります)。

ある要素における相対的な座標を取得するプロパティは、layerXlayerYです(座標取得プロパティについては、こちらの記事でわかりやすく説明されています)。

layerXlayerYを使うときは、その要素のpositionstatic以外(大抵はrelativeかと思います)にしておく必要があります。

以下のようなコードで座標を取得します。

取得できるのが確認できたら、Milkcocoaでデータストアを作ってpush()で保存してみましょう。

Milkcocoaに登録していない方は、Milkcocoaで登録をして、アプリの管理画面のapp idを控えておいてください。

これで、クリックされるたびに、座標が保存されます。

保存されたデータからヒートマップ表示する

保存が出来たので、保存されたデータを取得してヒートマップ表示させます。

といっても簡単で、先ほどのHTMLをコピペして、stream()でデータを取得して、その情報をaddData()するだけです。

これで、保存したデータのヒートマップ表示ができました。

(上の例では、999個までのデータしか取ってこないようにしているので、それ以上のデータを取りたい場合は、先日の大量のデータをグラフ化する記事を参考にして頂ければと思います)

Webサイトに取り入れてみる

単ページのヒートマップ表示はできたので、複数ページがあるWebサイトに取り入れてみましょう。

以下のような構成になります。

本サイトでクリック座標を取得して、全く同じHTMLの別のサイトでヒートマップを表示します。もちろん、ヒートマップ表示用のサイトは、自分だけで確認したいなら公開せずにlocalhostで構いません。

データストアのパスも、サイトのパスと同じ構造にします。

具体的には以下のようなコードになります。

// 本サイト側
// 以下は、URLの終わり方がディレクトリ名になっている場合です。phpなどで?などを使っている場合等は状況に合わせて色々工夫して下さい。
var pathname = window.location.pathname;
var pathnameLast = pathname.substr( (pathname.length-1) );
if(pathnameLast=='/') var dataStorePath = pathname.substr( 0, (pathname.length - 1) );
else var dataStorePath = pathname;

var ds = milkcocoa.dataStore('heatmap'+dataStorePath);

heatmapContainer.addEventListener('click', function(e){
  ds.push({
    x: e.layerX,
    y: e.layerY
  });
}, true);
// ヒートマップ表示側
var pathname = window.location.pathname;
var pathnameLast = pathname.substr( (pathname.length-1) );
if(pathnameLast=='/') var dataStorePath = pathname.substr( 0, (pathname.length - 1) );
else var dataStorePath = pathname;

var ds = milkcocoa.dataStore('heatmap'+dataStorePath);

ds.stream().size(999).next(function(err, data){
  data.forEach(function(d,i){
    heatmap.addData({ x: d.value.x, y: d.value.y, value: 1 });
  });
});

// リアルタイムでクリックされたデータを可視化したい場合は以下も
ds.on('push', function(pushed){
  heatmap.addData({ x: pushed.value.x, y: pushed.value.y, value: 1 });
});

これで、Webサイト全体のヒートマップ表示ができました。

ただ、固定幅のWebサイトだったら良いんですが、このブログみたいにレスポンシブウェブデザインなら、これだけではダメです。

レスポンシブだったら表示幅によってデータストアをわける

レスポンシブウェブデザインを採用しているのであれば、windowの幅でデータストアをわけます。

実際にこのブログでは以下のようなコードにしています。

// window幅取得
var windowWidth = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;

if(windowWidth > 1100) var ds = milkcocoa.dataStore('heatmap/pc'+dataStorePath);
else if(windowWidth == 320) var ds = milkcocoa.dataStore('heatmap/sp'+dataStorePath);

割とざるですが、コンテナの幅の1100pxより大きいものはpc、(少なくともこのブログの閲覧者では)最も多いスマートフォンの幅である320pxであればspをデータストアのパス名に足しています。

この条件にあてはまらないものは、クリック情報を取得しません(めんどくさがって、リサイズ対応をしていませんが...)。

表示側も同じように、「1100px以上か320px」でなければそもそも表示すらしないようにしています。

問題ありげに聞こえますが、ユーザー側が困るわけではないし、サンプル数が十分ならまあ大丈夫かなと思っています。

まとめ

このようにとても簡単かつ無料で、Webサイトにヒートマップを導入することができます。

無料プランでは同時接続数が20を超えると21人目から動作しなくなってしまいますが、先ほども言ったように、ユーザー側が困るわけではないので、導入に際して恐れることは何もないと思います。

また、例えば、一定時間ごとにscrollYwindowの高さをpushして、表示のところで少し工夫すれば、「どれくらいスクロールされたか」のヒートマップも簡単に作ることができます。

Milkcocoaを上手く使えば、アイデア次第でいろいろなWeb解析ツールが自作できますので、是非色々試してもらえると幸いです。