jQuery + GoogleAnalyticsでPDFのクリック回数を計測
GoogleAnalyticsはトラッキングコードをページのフッターへ挿入しただけでは、PDFや外部へのリンクをクリックされた回数を取得することが出来ません。計測する方法の一つとしてaタグのonclick属性にバーチャルページビューやイベントトラッキングのコードを入れることで計測できますが、リンクを張った際に毎回挿入しようとすると手間になってしまいます。
仕事でjQueryのコードを挿入する方法を使ってみたので備忘録として残しておきます。
今回やりたかったプログラムの流れをまとめると、
1. ページの中からaタグのhref属性にpdfが指定されているリンクを探す。
2. href属性の中からpdfのファイル名のみを抽出する。
3. pdfのリンクに対してonclickイベントにGoogleAnalyticsのバーチャルページビューのコードを挿入する。
それではコードを見ていきましょう。（jQueryはあらかじめ読み込んでおいてください）
HTML
[html]
<p><a href="sample.pdf">PDFのリンク</a></p>
<p><a href="sample2.pdf">PDFのリンク2</a></p>
<p><a href="#">通常のリンク</a></p>
[/html]
aタグに2つのPDFのリンクを作成し、通常のリンクもコードが入らないかチェックするために配置します。
JavaScript
[html]
$(function(){
$("a[href $= ‘.pdf’]").each(function(){
var str = $(this).attr("href");
var str = str.match(".+/(.+?)([\?#;].*)?$")[1];
$(this).attr("onclick","ga(\"send\",\"pageview\", \"/pdf/download/"+ str + "\");");
});
});
[/html]
2行目の「$(“a[href $= ‘.pdf’].each」でhref属性が「.pdf」で終わるものを探し、ヒットしたものに対して処理を実行します。
3,4行目で値を取得し、正規表現を使って最後の「/」（スラッシュ）より前を削除してから変数に代入します。
5行目にattrを使ってonclickイベントにコードを挿入しています。これはユニバーサルアナリティクスのコードになっているので以前のトラッキングコードを使用している方は下記のように変えてください。
[html]
$(this).attr("onclick","_gaq.push([\"_trackPageview\",\"pdf/download/" + str + "\"]);");
[/html]
動作のチェックはブラウザの開発ツールを使い、ページ読み込み後にコードが追加されているか確認してください。
GoogleAnalyticsでリアルタイムのトラッキングをチェックすれば、情報がとれているかどうか確認できるので合わせてチェックしておきましょう。