ひよこwebプログラマーの覚え書き

エクセルとwebで効率化しますさせます

*

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

      2015/01/26

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

 - google-analytics, javascript, jquery

Message

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

  関連記事

イラストレーターでjavascriptを使う時のデバッグ方法など

まず、イラストレーターを開いて下さい。 既存のファイルを開くか、ctrl+Nで新 …

no image
jsで連番のページを一気に開く

1から10までのページを一気に開きます。 1000ページ指定しても普通に動作して …

jQuery環境で画像ポップアップ(lightbox)はどれを使えば良いか

素直にlightbox2がオススメです。jQuery1.11系で動きます。 fa …

URLバーのURLを変更する方法

URLバーのURLを変更する方法。 history.replaceState() …

frameの中身をjQueryで取得する方法は…

frameの中身をjQueryで取得する方法は、ありませんでした。 無理矢理操作 …

javascriptで配列・オブジェクトの判定

返り値はboo …

イラストレーターのjavascriptマクロのサンプル

最上位レイヤーを削除する場合はこのような感じです。 deleteitemsに任意 …

イラストレーターのjavascriptマクロの注意点

山程ありますが、その内の一例をご紹介します。 activeDocument.la …

Google Analyticsのページビュー・セッション・ユニークユーザー・ランディングページの違い

ページビュー ページの閲覧数。リロードしても計測される。 最も基本的な指標です。 …

jQueryで電話番号のリンクを外す方法

htmlで

と …