jQueryとGoogle Analyticsを使って外部リンクへのクリックをトラッキングする
広告やアフィリエイトの目的で、AmazonやiTunesへなどへの外部リンクを貼ることが多いのですが、どの記事の外部リンクがクリックされているのか、いまいちわかってませんでした。
そこで外部リンクのクリック数をGoogle AnalyticsとjQueryを使ってトラッキングしてみようと思います。
やり方は簡単で、
- html内のaタグがクリックされたときに
- jQueryを使ってリンク先URLを持ってきて
- _gaq.pushの命令でそのURLをGoogle Analyticsに投げてあげる
簡単ですね。コードはこんな感じになりました。
<script>
$(function() {
$('a[href^=http]').click(function() {
var url = $(this).attr('href');
var url_canonical = url.match(/^(.+?)&.+?$/i)[1];
var domain = url.match(/^[httpsfile]+:\/{2,3}([0-9a-z\.\-:]+?):?[0-9]*?\//i)[1];
console.log(url_canonical);
_gaq.push(['_trackEvent', domain , 'click', url_canonical]);
});
});
</script>
jQueryを使ってドロップダウンメニューをシンプルに書いてみる
- ここを参考に短いjQueryで行ける : jQueryでプルダウンメニュー（たった5行で！）
- ただし、ここに書いてある通りのコードじゃ上手くいかなかったので、サンプルページのコードを拝借
- jQueryの読み込みは Googleのjsapiを使うことにしました。
// jQuery読み込み
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.7");</script>
// マウスオンとアウトでliの子要素であるulを表示したり消したり
$(function() {
$("#menu li").hover(function() {
$(this).children('ul').show();
}, function() {
$(this).children('ul').hide();
});
});
- コピペですがうまくいきました。
MAMP PROのmy.cnfはメニューバーから探す(※MAMPのそれとは別の場所)
MAMPを入れてMySQLに日本語を挿入したときに「???」と文字化けしてしまう。
なので、対策をググってたんだけど、基本MAMPのmy.cnf設定方法が紹介されているので、その通りにやってうまくいかないなぁと嘆いてたんだけど、MAMPのmy.cnfとMAMP PROのmy.cnfは別ものらしい。
MAMP PROの場合はメニューバーから「ファイル ＞ テンプレートを編集」からすぐにアクセスできる。ここに下記の設定を書き込んだら無事解決した。
[mysqld] character-set-server = utf8 skip-character-set-client-handshake
参考：MAMP & MAMP PRO How to set the MySQL Default Storage Engine with MAMP
MAMPのMysqlにターミナルからアクセスする
いつも忘れるから書いておく。
/Applications/MAMP/Library/bin/mysql --host=localhost -uroot -proot
WordpressログインユーザーはGoogleAnalyticsをカウントさせないようにする
Wordpressのログインを判定する関数を使えばOKっぽい。
<?php if ( !is_user_logged_in() ) { ?> // Google Analytics Code <?php };?>
Webサイトのモックを作るときに重宝するダミー画像を簡単に作る方法
Pleacehold.jpというサービスが便利で、ダミー画像を自由に作成することができます。例えば、広告ユニット(300x250)のダミー画像が欲しければ、「バナーによくあるサイズ」から選んで、更に適当にテキストを加工することも。
Microdataのプロパティを使うとGoogle検索結果のURL階層をクリッカブルにすることができるらしい
どうすればよいの？
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="http://example.com" itemprop="url"><span itemprop="title">タイトル</span></a> </div>
