tezu memo blog

日々行った作業をメモしていきます

GA Functions（ver.1.4.2）導入 Hatena Blog

GA

外部リンクのクリックを測定したいので、Google Analyticsにフォーム入力イベントなどを機能拡張するJavaScript「GA Functions」 | murak.netをBlogに導入

jquery.gafunc.jsを改修

理由は以下の通り

  • Hatena Blogが使用しているjQueryは1.9系
<script type="text/javascript" src="http://hatenablog.com/.shared.js:87336cc98b0ace80bdafaed315d585dd:/js/jquery-1.9.0.min.js,/js/empty.js,/js/jquery-ui-1.10.0.custom.min.js,/js/jquery.cookie.js,/js/jquery.hashchange.js,/js/jquery.mousewheel.js,/js/jquery.colorbox-min.js,/js/jquery.flot.js,/js/jquery.ui.datepicker-ja.js,/js/jquery.tipsy.js,/js/jquery.Jcrop.min.js,/js/json2.js,/js/postMessage.js,/js/keyString.js,/js/jsdeferred.js,/js/EditDesign.js,/js/underscore-min.js,/js/fullscreen.js,/js/accesslog.js,/js/base.js,/js/backup.js,/js/admin.js,/js/blogs.js,/js/locale-all.js"></script>
<script type="text/javascript" src="http://hatenablog.com/js/texts-ja.js?87336cc98b0ace80bdafaed315d585dd"></script>


改修しないと当然エラーが発生します。Chrome Developer Toolsで確認

Uncaught TypeError: Object [object Object] has no method 'live' jquery.gafunc.min.js

jquery.gafunc.jsの改修箇所抜粋。live methodをon methodに変更

//  $(q).live('click', function() {
    $(document).on('click', q, function() {
//  $('a[href^="mailto:"]').live('click', function() {
    $(document).on('click', 'a[href^="mailto:"]', function() {
//  $(q.join(',')).live('click', function() {
    $(document).on('click', q.join(','), function() {

　

手順

1. 無料レンタルサーバ（Free Web Hosting with PHP, MySQL and cPanel, No Ads）にアップロード

ログイン後、Go to CPanelを選択
f:id:tezu35:20130215174509j:plain

File Managerを選択
f:id:tezu35:20130215174552j:plain

/public_html配下にアップロード
f:id:tezu35:20130215174603j:plain


2. Hatena Blogの管理画面でJSを指定
デザイン→カスタマイズ→サイドバー→モジュールを追加→HTMLで追加を選択し、以下をコピー
<script type="text/javascript" src="//tezu.uphero.com/jquery.gafuc.1.9.js"></script>
f:id:tezu35:20130215174925j:plain


3. ブラウザで指定したJSが読み込まれることを確認
f:id:tezu35:20130215175429j:plain
　

結果

コンテンツ→イベント→上位のイベント→イベントカテゴリー Outbound→セカンダリディメンション コンテンツ ページを選択

イベントアクションが外部リンク、ページが遷移元画面

f:id:tezu35:20130218102901j:plain
　

おまけ

livedoor BlogはデフォルトでjQuery未使用なので1.8系を使えばOKです
ブログ設定→カスタムJS→head内タグ

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="//tezu.uphero.com/jquery.gafunc.min.js"></script>