増子良太のブログです

増子良太が書いているブログです。テーマをしぼらず、思いついたものをただひたすら書いていきます。

イベントトラッキングで外部リンクへの移動を解析する方法

      2013/06/28

おはようございます。rmascoです。

自分のブログを書いていくと、ブログ記事中に他サイトの記事の参照をおすすめしていたり、ブログの下部にzenbackの表示をしたり色々外部サイトへのリンクも増えていきます。

アクセス解析でそのあたりも知りたいけど、自分のサイト内へ移動はキャッチできますが、他サイトへのリンクに関してはGoogleAnalyticsでは解析できません。

そこでGoogleAnalyticsが用意している「イベントトラッキング」というものを使います。

イベントトラッキングって何?

イベントトラッキングとは、サイト内で任意のイベントを定義して、データを収集、解析できるようにするための機能です。任意のイベントというのは例えば動画サイトであれば、どの動画がいつ再生されたかというイベントを記録することができます。またPDFファイルなど直接ダウンロードさせる場合のダウンロード数の集計などにも使えます。

今回は外部へのリンクをどれくらい押されているのか、どのリンクに飛んでいくことが多いのかなどを検証するため、外部リンク全部に外部リンクがクリックされたよというイベントを定義したいと思います。

イベントトラッキングの使い方

リンクを記述してあるaタグのonclickを以下のように追加します。


<a href=”https://twitter.com” onClick=”_gaq.push([‘_trackEvent’, ‘link’, ‘click’, ‘https://twitter.com’]);”>Play</a>


色々なサイトで解説しているのでここではonclick内のソースについては説明を割愛しますが、簡単に説明すると「https://twitter.com」へのリンクを押した時にlinkというカテゴリを定義して、その中でどういったアクションをしたのかを指定して、ラベルをtwitterへのクリックだとわかるように定義してあげます。

ただ、この方法だとすべてのリンクにonclickを付けていくことになります。もっと簡単にできないかなと考えてみると、jQueryという便利なものがあるじゃないか!ということで、jQueryで書いて見ることにしました。

ただ、それも一筋縄ではいきません。

なぜなら、リンク(a)タグ全てを取得し、そのなかで絶対パス(httpやhttpsから始まるもの)でなおかつ自分のドメイン意外にリンク先が指定されているものにたいして、上記イベントを付与してあげるという条件が複雑なものになっています。

jQueryで外部リンクをイベントトラッキングへ送る

まずいきなり答えみたいになりますが、ヘッダーに下記記述を追記します。

非常にまどろっこしいですが、順番に解説していきます。

$(document).delegate(セレクタ,イベント,イベント発生時の処理)

delegateはドキュメントにたいしてドキュメント内でイベントが起こった場合の動きを定義するものです。

イベントが起こった時点でイベント発生元をセレクタと比較し、条件に合えばイベント発生時の処理をするため、途中でDOMが追加・変更されたとしても有効となります。

またliveというメソッドもありますが、こちらはイベントが発生した時点ですべてのDOMに検索処理が走り、一致するものであれば処理をするというもので、少し無駄が多いようです。

続いて、下記の記述です。

まとめ

たぶんもう少しスマートに書ける気もしますが、、、とりあえずはこれで様子を見たいと思います。実はデバッガーツールでは外部リンク時に正しく通っていることは確認していますが、現時点でGoogleAnalyticsのイベントは追加されていないので、もう少し時間が立ったら結果をお伝えします。

jQueryってホント便利でほとんどはなんでもできるので、全部をこれに頼りきりにならないように、処理が重くならないようにとか考えるのが結構大変ですね。jQueryについてはバージョンが上がると色々なことが更に増えてできるようになるので、勉強が大変ですが、昔のJSをガリガリ書いていたことに比べれば、すごく楽になりました。

jQueryをもっと覚えたくなる今日この頃でした。

 - その他