簡単にクリックマップを作れるソフトはないかな～と捜索しましたが、見つからなかったので自分でクリックマップを簡単に作れる便利ツールを作ってみました。
告知：スクロール計測の新しい手順作成しました！
[kanren postid="3632"]
今回作ったスクリプト
一言でいうと、ページに設置されたイベントトラッキングを表に表示するスクリプトです。
スクリプトを実行すると、
イベントトラッキングなしのリンク・ボタンが緑色で囲われ、
イベントトラッキングありのリンク・ボタンが青色で囲われます。
そもそもイベントトラッキングって何？
イベントトラッキングとは、Googleアナリティクスの計測機能を使って、特定のリンクやボタンのクリック回数を計測する方法です。
計測するには、別途リンクやボタンにイベントを仕込む必要があるので、通常の計測に＋αの設定がややめんどうでもあります。
イベントトラッキングをするリンクやボタンは、javascriptのonclickに「ga」や「_gaq.push」といった関数を設置します。
・ユニバーサルアナリティクス（新バージョン）
onclick="ga('send', 'event', 'カテゴリー', 'アクション', 'ラベル', 1);"
・標準Googleアナリティクス（旧バージョン）
onclick="_gaq.push(['_trackEvent', 'カテゴリー', 'アクション', 'ラベル', '値' , true/false]);"
「カテゴリー」「アクション」「ラベル」部分にはそれぞれボタンごとに異なる文字列を設定します。そのため設置後は、正しくそれらが設置されているか確認する必要があり、この点も手間のかかる部分です。
スクリプトを使うと何が便利なのか？
通常は、設置したイベントトラッキングは、通常はソースを確認するか、クリックして計測されるイベントをリアルタイム計測にて確認するでチェックする必要がありますが、このスクリプトを使うと、一瞬でソースに埋め込まれたイベントを表に表示します。
これによって、クリック計測しているリンク・ボタンが一目瞭然となります。
使用方法
以下を行ってください。
①ブラウザ（Chromeなど）でどこかのサイトのブックマークを作成
②ブックマークを編集
名前：（任意の名称）例：イベントチェック
URL：以下のスクリプトを入力（1行で）
スクリプトは以下の2種類です。
青枠緑枠＋イベント表示あり
javascript:var eventlabel_switch = true;/* イベントラベルON/OFF */$('a,area').each(function() { var label1 = $(this).attr('tname') + ""; var label2 = $(this).attr('data-statsoptlabel') + ""; var label3_1 = $(this).attr('onclick')+ ""; /* gaq */ if(label3_1) var label3_2 = label3_1.match(/_gaq.*/i); if(label3_2) var label3_3 = label3_2[0]+ ""; /* ga */ if(label3_1) var label4_2 = label3_1.match(/ga\(.*/i); if(label4_2) var label4_3 = label4_2[0]+ ""; /* dataLayer.push */ if(label3_1) var label5_2 = label3_1.match(/dataLayer.push.*/i); if(label5_2) var label5_3 = label5_2[0]+ ""; var label6 = $(this).attr('data-action-retailer') + ""; onclick1 = ""; if(label1 != "undefined" && label1) onclick1 = onclick1 + "[tn]" + label1; if(label2 != "undefined" && label2) onclick1 = onclick1 + "[dsl]" + label2; if(label3_3 != undefined && label3_3) onclick1 = onclick1 + "[gaq]" + label3_3; if(label4_3 != undefined && label4_3) onclick1 = onclick1 + "[ga]" + label4_3; if(label5_3 != undefined && label5_3) onclick1 = onclick1 + "[dtl]" + label5_3; if(label6 != "undefined" && label6) onclick1 = onclick1 + "[dar]" + label6; if(onclick1 != "" || onclick1){ if(eventlabel_switch) $(this).parent().append("<span class='pop_span'>"+onclick1+"</span>");/* イベントラベル表示 */ outline_color = "outline1"; }else{ if(eventlabel_switch) $(this).parent().append("<span class='pop_span'>空</span>");/* イベントラベル表示 */ outline_color = "outline2"; } $(this).addClass('pop_a'); $(this).parent().addClass('pop_parent'); if ( $(this).children('img').length > 0 ) { $(this).children().addClass(outline_color); }else if ( $(this).children('p').length > 0 ) { $(this).children().addClass(outline_color); }else if ( $(this).children().children('img').length > 0 ) { $(this).children().children().addClass(outline_color); }else{ $(this).addClass(outline_color); }});var style1 = "<style type='text/css'>.pop_parent {position: relative;} .pop_a {position: relative;}.pop_span {line-height:15px;text-indent:0;text-align: left;display: block;position: absolute;letter-spacing: 0em;font-size: 6px;font-weight: 900;color: #f00;font-family: 'Lucida Grande','Hiragino Kaku Gothic ProN','%E3%83%92%E3%83%A9%E3%82%AE%E3%83%8E%E8%A7%92%E3%82%B4 ProN W3',Meiryo,%E3%83%A1%E3%82%A4%E3%83%AA%E3%82%AA,sans-serif;text-shadow: -1px -1px #fff,1px -1px #fff,-1px 1px #fff,1px 1px #fff;z-index:9999;margin-top:-20px}.outline1{outline:3px solid #00f}.outline2{outline:3px solid #0f0}</style>";$("head").append(style1);
青枠緑枠のみ
javascript:var eventlabel_switch = false;/* イベントラベルON/OFF */$('a,area').each(function() { var label1 = $(this).attr('tname') + ""; var label2 = $(this).attr('data-statsoptlabel') + ""; var label3_1 = $(this).attr('onclick')+ ""; /* gaq */ if(label3_1) var label3_2 = label3_1.match(/_gaq.*/i); if(label3_2) var label3_3 = label3_2[0]+ ""; /* ga */ if(label3_1) var label4_2 = label3_1.match(/ga\(.*/i); if(label4_2) var label4_3 = label4_2[0]+ ""; /* dataLayer.push */ if(label3_1) var label5_2 = label3_1.match(/dataLayer.push.*/i); if(label5_2) var label5_3 = label5_2[0]+ ""; var label6 = $(this).attr('data-action-retailer') + ""; onclick1 = ""; if(label1 != "undefined" && label1) onclick1 = onclick1 + "[tn]" + label1; if(label2 != "undefined" && label2) onclick1 = onclick1 + "[dsl]" + label2; if(label3_3 != undefined && label3_3) onclick1 = onclick1 + "[gaq]" + label3_3; if(label4_3 != undefined && label4_3) onclick1 = onclick1 + "[ga]" + label4_3; if(label5_3 != undefined && label5_3) onclick1 = onclick1 + "[dtl]" + label5_3; if(label6 != "undefined" && label6) onclick1 = onclick1 + "[dar]" + label6; if(onclick1 != "" || onclick1){ if(eventlabel_switch) $(this).parent().append("<span class='pop_span'>"+onclick1+"</span>");/* イベントラベル表示 */ outline_color = "outline1"; }else{ if(eventlabel_switch) $(this).parent().append("<span class='pop_span'>空</span>");/* イベントラベル表示 */ outline_color = "outline2"; } $(this).addClass('pop_a'); $(this).parent().addClass('pop_parent'); if ( $(this).children('img').length > 0 ) { $(this).children().addClass(outline_color); }else if ( $(this).children('p').length > 0 ) { $(this).children().addClass(outline_color); }else if ( $(this).children().children('img').length > 0 ) { $(this).children().children().addClass(outline_color); }else{ $(this).addClass(outline_color); }});var style1 = "<style type='text/css'>.pop_parent {position: relative;} .pop_a {position: relative;}.pop_span {line-height:15px;text-indent:0;text-align: left;display: block;position: absolute;letter-spacing: 0em;font-size: 6px;font-weight: 900;color: #f00;font-family: 'Lucida Grande','Hiragino Kaku Gothic ProN','%E3%83%92%E3%83%A9%E3%82%AE%E3%83%8E%E8%A7%92%E3%82%B4 ProN W3',Meiryo,%E3%83%A1%E3%82%A4%E3%83%AA%E3%82%AA,sans-serif;text-shadow: -1px -1px #fff,1px -1px #fff,-1px 1px #fff,1px 1px #fff;z-index:9999;margin-top:-20px}.outline1{outline:3px solid #00f}.outline2{outline:3px solid #0f0}</style>";$("head").append(style1);
③イベントラベルを確認したいページを開く
④作成したブックマークを実行
スクリプトで各種サイト調査してみました。
緑色の枠部分が、イベントトラッキングなしのリンク箇所で、青色の枠部分が、イベントトラッキングとなります。
まずはこのサイト（ツマミグイ。）
試しに一か所だけイベントトラッキングを仕込んでみました。
続いて、UNIQULO
青枠の部分がいくつか見られます。イベント表示はややうまく行っていないようです。インターネットマーケティングのお手本としてよく取り上げられるユニクロだけあって、計測にも力を入れているようです。
livedoorブログ
全部リンクにイベントが見つかりました。livedoor系のサイトは、すべてのリンクにイベントトラッキングが仕込んであるようです。
あとは、いろいろ捜索してみましたが、意外と見つかりませんでした。途中いくつか正常に動作しないサイトもあり、スクリプトの改善が必要かと思っています。ただ、時間がかかりそうですので、一旦このくらいでリリースします。
さいごに
通常の計測違って、トップページや重要なページにはイベントトラッキングを仕込んでどこがクリックされているのか計測することによって、思わす発見があるかもしれません。ぜひともイベントトラッキングを実装して、あなたのサイトのアクセスアップを図ってください。Googleアナリティクス関連の書籍はいくつか出ていますので、そういった本でも勉強することをオススメします。
インプレスジャパン
売り上げランキング: 8,781
ソフトバンククリエイティブ
売り上げランキング: 150,641
ソーテック社
売り上げランキング: 6,766
技術評論社
売り上げランキング: 32,198