javascriptで全ての外部リンクにイベントトラッキングを付ける
まずはコードから
|
1 2 3 |
$(document).ready( function () { $("a[href^=http]").not("a[href*='"+location.hostname+"']").attr("onclick","_gaq.push(['_trackEvent', 'link', 'click', this.href,,'true']);"); }) |
以上で す。
では、解説です。
1行目、4行目の
$(document).ready( function () {
})
これはhtmlを読み終えてから実行、の意味。htmlを読み終える前に実行するとa要素が読み込まれる前に実行してしまうので、相当変わったことをしない限り必須であるといえるでしょう。
2行目。
$(“a[href^=http]").not(“a[href*='"+location.hostname+"']").attr(“onclick","_gaq.push(['_trackEvent’, 'link’, 'click’, this.href,,’true’]);");
少しずつ分解してみていきましょう。
$(“a[href^=http]").not(“a[href*='"+location.hostname+"']")
この部分がセレクタになります。
$(“a[href^=http]").
「aタグのhref属性がhttpで始まる」の意味です。
更に^=は文字列の比較で「始まりが～」の意味。今回は始まりが"http"です。
divやtable、h1他のタグや、aタグであっても内部リンクはこれで候補から外れます。
.not(“a[href*='"+location.hostname+"']")
notは真偽の偽の意味。つまりカッコ内に当てはまらないもの、の意味。
a[href*='"+location.hostname+"']
location.hostnameは要するにドメイン部分。このサイトだと「15g.jp」になります。
更に更に*=は文字列の比較で「含まれる」の意味。
合わせて「aタグのhref属性に自分のドメインが含まれない」の意味です。
またコーテーション、ダブルコーテーションが混ざってますので気をつけて下さい。
続いて後半
.attr(“onclick","_gaq.push(['_trackEvent’, 'link’, 'click’, this.href,,’true’]);");
attrは属性の追加、"onclick"はクリック時の動作。
カスタマイズできるのはココ
_gaq.push(['_trackEvent’, 'link’, 'click’, this.href,,’true’])
は元々以下のようになっています。
_gaq.push(['_trackEvent’, 'category’, 'action’, 'opt_label’,opt_value,’opt_noninteraction’]);
_gaq.push・・固定値。変更不可能
_trackevent・・固定値。変更不可能
category・・カテゴリー。linkclick、linkなどの名前にします。
action・・clickなど。
opt_label・・要するに名前。ですが全てに名前をつけるなんて面倒です。確実にそこにあるもの、URLの指定が無難です。this.hrefとすれば外部リンクへのURLとなります。
opt_value・・整数の値。広告の単価などを入れると良いですが、今回は必要ないので何も入れていません。
opt_noninteraction・・直帰率に影響します。これをfalseにすると、内部リンクを踏むのと同じ効果になり、直帰率が下がります。ですがそんなことで直帰率を下げてもしかたがないので素直にtrueを指定。指定しなくてもtrueになります。
また
$(“div.ex").attr(“onmouseover","_gaq.push(['_trackEvent’, 'link’, 'click’, this.href,,’true’]);");
こうすれば<div class="ex">内にマウスカーソルが乗った時の数を計測できます。