ひよこ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

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

  関連記事

Adobe_Illustrator_Icon_CS6-150x150
jQueryで電話番号のリンクを外す方法

htmlで

と …

Adobe_Illustrator_Icon_CS6-150x150
locationを画面遷移させずに変更したい時

無理です、諦めましょう。 唯一例外的に可能なのはlocation.hashのみで …

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

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

Adobe_Illustrator_Icon_CS6-150x150
イラストレーターのjavascriptマクロでテキストを全てアウトライン化

createOutline()を使います。 元々のテキストは消えるので、必要な場 …

Adobe_Illustrator_Icon_CS6-150x150
Illustrator CS6でjavascriptを使う方法

Illustratorでマクロを使う方法。 大きく分けて「アクション」と「スクリ …

Adobe_Illustrator_Icon_CS6-150x150
イラストレーターでjavascriptを使う

イラストレーターではjavascriptを使ってスクリプトを組めます。 しかしh …

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

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

Adobe_Illustrator_Icon_CS6-150x150
jQueryでクリックしたことにする

フォームに文字を入力する時「input要素をクリックする動作」を検知するサイトが …

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

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

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

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