• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

christianhellsten/jquery-google-analytics: A Google Analytics plugin for jQuery. ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

christianhellsten/jquery-google-analytics

开源软件地址(OpenSource Url):

https://github.com/christianhellsten/jquery-google-analytics

开源编程语言(OpenSource Language):

JavaScript 100.0%

开源软件介绍(OpenSource Introduction):

jQuery Google Analytics Plugin

NOTE This plugin hasn’t been updated to work with the latest version of Google Analytics. I recommend you fork and improve the code and submit a patch.

Introduction

The jQuery Google Analytics plugin does the following:

  • improves page load times by deferring the loading of Google Analytics to after the page has been loaded. (Note Google is currently testing their own implementation which does the same)
  • simplifies event and link tracking.
  • helps you track error pages (404, 500) as described here.

Installation

JavaScript

Inside the head tag, first include the jQuery JavaScript file, then the jQuery Google Analytics file:

  
    <script type="text/javascript" src="javascripts/jquery.js"></script>
    <script type="text/javascript" src="javascripts/jquery.google-analytics.js"></script>
  

Usage

With the script loaded you now have access to these new methods:

  • $.trackPage(‘UA-XXX-XXX’) – Adds Google Analytics tracking to the page it’s called from. By default, the loading of Google analytics is done after the onload event.
  • $.(‘selector’).track – Used in combination with jQuery selectors to add click tracking, or tracking of other jQuery events, to matching elements. For example: $(‘selector’).track()
  • $.trackEvent – Used for custom event tracking. Same as _pageTracker.trackEvent, but checks that analytics isn’t blocked. For example: $.trackEvent(‘category’, ‘action’, ‘label’)

Page tracking

To enable Google Analytics page tracking add a call to $.trackPage inside the head tag:

  
  <head>
    <script type="text/javascript">
    $.trackPage('UA-YOUR_ACCOUNT_ID')
    </script>
  </head>
  

To improve page load times, the script defers the loading of the Google Analytics script to after the page has been loaded (window.onload). To disable this feature, set the onload parameter to false:

  
  <script type="text/javascript">
  $.trackPage('UA-YOUR_ACCOUNT_ID', {onload: false})
  </script>
  
Tracking 404 and 500 errors

This plugin implements tracking of error pages as described on the Google Analytics Help pages

To track an error, simply set the status_code parameter to the response code, as shown in this example:

  
  <script type="text/javascript">
  $.trackPage('UA-YOUR_ACCOUNT_ID', {status_code: 404}); // Track a 404 error
  </script>
  

Link tracking

Link tracking is done by selecting the elements you want to track with jQuery selectors. By default the click event is tracked, but this can be changed as I’ll explain later.

The following is an example of how to track outgoing links (to also track internal links, set the skip_internal parameter to false):

  
  <script type="text/javascript">
  $(document).ready(function(){
    $('.normal a').track();

    $('.sidebar a').track({
      category : 'sidebar'
    });

    $('.footer a').track({
      category : 'footer'
    });

    // Support any markup you want, eg. http://microformats.org/wiki/xFolk
    $('.complex a').track({
      // Use class as category. " tracked" is added by plugin...
      category : function(element) { return element.attr('class').replace(' tracked', '') }
    });
  });
  </script>
  

The first example selects links in the sidebar and sets the category to ‘sidebar’.

The second example selects links in the footer and sets the category to ‘footer’.

The third example selects links located inside the “complex div” and uses the link’s class as category.

See index.html for complete examples.

Custom event tracking

You can also track events by calling the trackEvent method:

  
  <script type="text/javascript">
  $(document).ready(function(){
    $.trackEvent(category, action, label, value);
  </script>
  

Parameters

The track methods accepts the following parameters:

  • category – required string used to group events. Default is autodetected: internal or external.
  • action – required string used to define event type, eg. click, download. Default is click.
  • label – optional label to attach to event, eg. buy. Default is href attribute’s value.
  • value – optional numerical value to attach to event, eg. price. Default null.

Additional parameters supported by the track(), not the trackEvent(), method:

  • skip_internal – Default true. If true then internal links are not tracked.
  • event_name – Default click. Name of the event to track.

The following snippet shows you how to define the parameters:

  
  <script type="text/javascript">
  $(document).ready(function(){
    $('.sidebar a').track({
      category : 'sidebar',
      action   : 'click',
      label    : 'buy',
      value    : '10.49'
    });
  });
  </script>
  

If no parameters are given then sensible defaults are used, which should work in most cases.

Note that you can also use functions instead of string values. Functions are useful for extracting the values from the HTML itself (metadata).

Tracking mouseover and other events

The default behavior is to track the click event. This can be changed to any other jQuery event by setting the event_name parameter to the name of the event you want to track, as shown in this example:

  
  <script type="text/javascript">
  $(document).ready(function(){
    $('.normal a').track({event_name: 'mouseover'});
  </script>
  

Debugging

You can print debug statements to the Firebug console by setting the debug option. Default: false.

To enable: $.fn.track.defaults.debug = true;

Todo

  • Review code
  • Refactor code

Author

Christian Hellsten (Aktagon Ltd.)

Contributors

Joshua Jabbour




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap