【Blogger】ブログのクリックイベントをGoogleアナリティクスで計測する簡単な方法


20130814182219.jpg

はじめに

ブログを運営していると、紹介したアプリやサイトがどれくらいクリックされているのか知りたくなりませんか?

そんな事ないですか。

僕は、MacやiPhoneのアプリ紹介に、リンクシェアさんを使っているのですが、Appleのポリシーでどのアプリが売れたのかまではわかりません。

iPhoneのアプリなのか、Macのアプリなのか、サードパーティのアプリなのかくらいの粒度でしかわかりません。

20130814175211.jpg
これだと、みてくれている人がどのようなアプリに興味を持ってくれているのか、どのような紹介の仕方をしたらクリックしてもらえるのか全くわかりません。

このような時に今回ご紹介するクリックイベントをGoogleアナリティクスで計測できるようにしておくと、どんなアプリのリンクをクリックしてもらっているのかまでわかるようになります。






とても参考になったサイト


参考になったと言うよりも、完全にそのままでいけます。

googleアナリティクスで簡単にクリックカウント出来るコード - ファンブログハック


<script type='text/javascript'>
jQuery(function() {
/* click tracking google ana */
jQuery('a').click(function(e) {
var ahref = jQuery(this).attr('href');
if (ahref.indexOf('http://fccreator.blogspot.jp/') != -1 || ahref.indexOf('http') == -1 ) {
_gaq.push(['_trackEvent', 'Inbound Links', 'Click', ahref]);
}
else {
_gaq.push(['_trackEvent', 'Outbound Links', 'Click', ahref]);
}
});
});
</script>

のブログのURLの部分、
http://fccreator.blogspot.jp
をご自身のブログURLに変えるだけですね。

これをbodyの閉じタグの上に入れただけです。

jQueryを読み込んでいないブログの場合には、読み込んでください。


どんな風にイベントが取れるの?

タグを入れるとすぐにイベントを取り始めます。

で、どんな感じで取れるかというと

コンテンツのイベントをクリックしてみます。

20130814180948.jpg

イベントのサマリーにクリックイベントがカウントされています。

20130814181029.jpg

アウトバウンドリンクが外部へのリンクです。

20130814181118.jpg

ページごとのリンクのクリックを見ることも可能です。

20130814181207.jpg
リアルタイムイベントでも見れますし、あとはGoogleアナリティクスのイベントと書かれているところをいろいろみてみると面白いですよ。

最後に

実はGoogleアナリティクスでクリックイベントを計測したいと思ったのは、二ヶ月くらい前だったのですが、なかなか今回ご紹介したサイトに行き着かず、行き着いたあとでも、XHTMLの仕様を理解できずにエラーになってしまい、ちょっと諦めていました。

出来てしまえば、すごい簡単なんですけどね。

簡単にクリックイベント取りたいのに何やら難しい話ばかりされてウンザリされている方の役に立てればと思います。

以上です。


2013/8/28 追記:ちゃんと動作している?を確認する方法を書いてみました。
【Mac】ドシロウトがChromeでJavaScriptをデバック(確認)してみる
やってみたけど、計測されていない気がする方は見てみてください。



7 件のコメント:

倍成太郎 さんのコメント...

はじめまして。記事を拝見させて頂き、思わず関心してしまいました。
私も早速試してみようと、掲載内容と同様にソースを組み入れてみたのですが、イベントに数値が反映されません。
変更するとなれば、ドメイン箇所部分のみだと思われるのですが、これは「http://www」の部分も記載する必要があるのでしょうか。(参考サイト様では記載されていないように見受けられましたので・・・)
またbodyの直前にソースを書き込むとの事ですが、これはheadの直前に書き込んだらいけないものなのでしょうか。

お時間がある時で構いませんのでお返事頂けると幸いです。

icanstwotto さんのコメント...

コメントありがとうございます。

私もそれほどJavascriptやJQueryに詳しいわけではないので、検討違いの返信になってしまっていましたらすいません。

まず私がやったことは以下3点になります。
1.headタグの中にJQueryが読み込まれているか確認
私の場合には、別件で以下のように読み込んでいましたので、今回特別に対応はしませんでした。

<script defer='defer' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

こちら私の環境では、これでも動いていますが、最新のJqueryのほうが良いかもしれません。
2013/8/21現在 1.10.2のようです。
https://developers.google.com/speed/libraries/devguide?hl=ja&csw=1#jquery

2.bodyの閉じダグの上に設置する
BloggerのHTML編集のコードをそのまま貼り付けてみます。

<script type='text/javascript'>
jQuery(function() {
/* click tracking google ana */
jQuery(&#39;a&#39;).click(function(e) {
var ahref = jQuery(this).attr(&#39;href&#39;);
if (ahref.indexOf(&#39;http://fccreator.blogspot.jp/&#39;) != -1 || ahref.indexOf(&#39;http&#39;) == -1 ) {
_gaq.push([&#39;_trackEvent&#39;, &#39;Inbound Links&#39;, &#39;Click&#39;, ahref]);
}
else {
_gaq.push([&#39;_trackEvent&#39;, &#39;Outbound Links&#39;, &#39;Click&#39;, ahref]);
}
});
});
</script>
</body>
</html>

こちらは、できればBody閉じタグのすぐ上(HTMLコードの一番下)に入れたほうがよいかもしれません。
クリック系のイベントを取りますので、HTMLのコードが全て読み込まれていない状態でクリックされても正確にとれないかも?(ごめんなさい専門ではないので、そこまで正確な情報ではないですが)です。

3.Chromeなどを使って、Javascriptが動いているか確認する。
これは、Macであれば、コマンドキー+オプションキー+Iで開発ツールが開きますので、該当のスクリプトが動いているか確認しています。

このあたりは説明に画像が必要かと思いますので、今後ブログにかければと思います。

解決できそうでしょうか?

あまり参考にならなかったらすいません。

倍成太郎 さんのコメント...

ご返信頂き、ありがとうございます。
また、詳細なご意見を頂き併せてお礼いたします。

ご意見を基に改めて試行してみたいと思います。試行結果は改めてコメントさせて頂きます。

取り急ぎ、お礼を兼ねてコメントさせて頂きました。

icanstwotto さんのコメント...

遅くなりました。
Chromeでの確認方法を書いてみました。

http://fccreator.blogspot.jp/2013/08/macchromejavascript.html

素人なので、本当にこれで正しいのかかなり不安なのですが。。

倍成太郎 さんのコメント...

返信が遅くなり、申し訳ありません。
前回のコメントから、ご意見を基に色々試行してみたのですが、現状でもクリック数が反映されない状態です。
別途記事をおこして頂いたChromeでの確認方法を参考に、私のサイトを検証した際、エラーが発生していたのでそちらが問題なのかもしれません。引き続き検証してみたいと思います。成功した際は改めてコメントさせて頂きます。
ご協力頂き、有難うございました。

倍成太郎 さんのコメント...

お世話になっております。
更に検証を進めておりましたが、なんとか問題は解消いたしました。
反映されない原因は、記述したソースに問題があるのではなく、アナリティクスの初期設定時に問題があったようです。
現状のアナリティクスにおいて、「新規プロパティ」を設定する際、
「トラッキングの対象」を「Universal Analytics BETA」と「標準のアナリティクス」の2択から1つを選ぶ事になると思います。
これを「Universal Analytics BETA」に設定してしまうと、クリック数が反映されないようです。
改めて、「標準のアナリティクス」に新規プロパティを設定するとクリック数が反映されるようになりました。
灯台元暮らしのようでなんとも言えない気持ちですが、上記解決方法が今後のご参考になれば幸いです。

この度は、ご協力とご対応頂いて本当にありがとうございました。

icanstwotto さんのコメント...

ご連絡ありがとうございます!
そうなんですね!

GoogleAnalytics側の設定が必要だったなんて盲点でした!
逆に教えていただきありがとうございます!

今後試してみます!
ご丁寧にご連絡いただき、ありがとうございました!

このページをブックマーク