heatmap.jsとGoogle Tag Managerを使った簡易ヒートマップ(mouse click)作成

昔から簡単にヒートマップを作るサービス、heatmap.jsを利用すれば、簡単なヒートマップ作成ぐらいなら出来てしまうのは知っていたけれども、実際に試したことがない。。。

ということで、簡単にGoogle Tag Managerと組み合わせてポジションデータを取得して、それをヒートマップ化してしまおうというのが、今回の趣旨。

heatmap.jsを利用して、こんなscriptを埋め込み。

window.onload = function(){
    document.getElementById("heatmapArea").onclick = function(e){
var position = document.location.pathname + document.location.search + '?position=' + e.layerX +','+ e.layerY;
dataLayer.push({'event': 'heatmapscript', 'action': 'mouseclick', 'event_label': position });
    };
};

ソースで分かる方もいらっしゃると思いますが、Event Trackingを利用して、Event情報にポジションデータを追加している。

あと、レスポンシブデザインのサイトだと解析出来ないけれども、idで「heatmapArea」を指定しているため、基本的に解像度の違いも吸収出来る。
ただし、あくまでもEvent Tracking。傾向値的に使ってもらいたい。

サンプルで作ったものがこんな感じ。
ヒートマップサンプルページ

Google Analyticsでデータを取得して、そこからポジションデータを取得。
再びheatmap.jsにデータを読み込んで描画する。。。という流れです。

今回はデータ数が少ないので、データも直接ソースに直書きしちゃっています。


このぐらいのポジション情報を取得する実装なら、Google Tag ManagerにカスタムHTMLとして埋め込んでも動くみたい。
heatmap.jsの場所さえ指定しておけば。

heatmap.jsを利用しないでjQueryで取得するとしたら、たぶん、こんな感じで解像度を吸収しながらデータを収集するんだと思うけど、今のところ「dataLayer.push」が何故か動かないという現象に直面していて・・・

jQuery(document).ready(function(){
$("#heatmapArea").click(function(e){
    var x = e.pageX - this.offsetLeft;
    var y = e.pageY - this.offsetTop;

jQueryでの実装が一番楽なんだけどね。修正範囲が少なくてすむという意味で。
jQueryでの動作はもうちょっと研究してみるけど、実装出来た方はご連絡いただけると嬉しいかも。

簡単なクリックデータで検証するくらいなら、このくらい手軽な方がいいかな。

【参考】
Google Tag Managerに関するまとめ