javascriptで全ての外部リンクにイベントトラッキングを付ける

Pocket

まずはコードから

以上で す。

では、解説です。

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”>内にマウスカーソルが乗った時の数を計測できます。

コメントを残す

メールアドレスが公開されることはありません。