Google Analytics jQuery Plugin with Cross Domain, External Link Events and File Download Tracking

Google Analytics jQuery Plugin

  • Print
Author:

This Google Analytics jQuery Plugin v1.0 - 19/10/2012 is designed to extend the standard Google Analytics Tracking Tag with a minimum amount of website modification. The primary features are:

  1. Allows cross domain tracking by passing the session information to domains other than your primary domain. This is useful when you have another domain for your shopping cart or payment gateway.
    1. Note: The instructions for cross domain tracking from Google are located at https://developers.google.com/analytics/devguides/collection/gajs/gaTrackingSite, but you will see that this plugin makes it much easier.
  2. Allows for multiple tracking tags (Property IDs) on one website. This is handy when using an additional property ID for tracking multiple enterprise domains, or when using third party web applications to deliver certain functionality to your website visitors.
  3. Allows the tracking of file downloads as page views in your reporting. No modification to your links required. This allows you to specify the file types you want to track as a page view. Links to files are captured as a page view so they can be used as a goal conversion in Google Analytics.
  4. Allows tracking of clicks on email addresses supplied on your web pages. Email address links are captured as a page view so they can be used as a goal conversion in Google Analytics.
  5. Allows the tracking of clicks on external links originating from your website. Again, no updates to your link code required. Links to external websites are tracked as events, so they don’t inflate your page view statistics.
  6. Can be added to the Google Tag Manager to simplify the implementation on your website even further.

Steps for implementation (detailed documentation below steps):

  1. Load the jQuery Plugin file on your web server.
  2. Add a link to jQuery library version 1.7.2 in the HTML head of your webpages or website template (Note: this is backwards compatible for older jQuery libraries if you already link to one).  
  3. Add a link to the jQuery Plugin file location in the HTML head of your webpages or website template.
  4. Add a jQuery Function Call in the HTML head or your webpages or website template.
  5. In the jQuery Function Call, set your variables if different than the defaults already set in the jQuery Plugin file.
  6. Add the Google Analytics Tracking tag to the HTML head of your webpages or website template, before the closing head tag. You will need to modify the standard tracking tag code if you are tracking cross domain and/or if you are tracking multiple profiles.

Default settings/options in the plugin:

  • 'trackCrossDomain': false,
  • 'domains': '',
  • 'trackAlternatePropertyIDs': false,
  • 'alternatePropertyIDs': ['isd2'],
  • 'trackFiles': true,
  • 'trackFilesAsEvent': false,
  • 'appendFiles' : true,
  • 'defaultFiles': [ '.csv', '.doc', '.pdf', '.ppt', '.rar', '.rtf', '.txt', '.xls', '.zip'],
  • 'files': '',
  • 'delay': 200

The above default options can be overridden by adding the options and corresponding changes to the function/plugin call from your webpages or website template.

Detailed instructions:

Standard implementation - Tracks default files as page views, tracks external links as events


Default implementation to track a single domain and single property ID. This also tracks clicks on file downloads, clicks on email links and clicks on external domain links (external domain links are tracked as an event).


  <script  src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script src="http://www.yourdomain.com/yourpath/jquery.izilla.sd.analytics.tracker.min.js"></script>
  <script>
      $(document).ready(function() { 
         $('a').isdAnalyticsTracker();
      });
  </script>
  <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-XXXXX-X']);
      _gaq.push(['_trackPageview']);
      (function() {
         var ga = document.createElement('script'); ga.type = 'text/javascript';  ga.async = true;
         ga.src = ('https:' == document.location.protocol ? 'https://ssl' :  'http://www') + '.google-analytics.com/ga.js';
         var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga,  s);
      })(); 
  </script>

Cross domain tracking

Implementation for cross domain tracking, which passes session details by the GA _link() function and a single property ID. This also tracks clicks on file downloads, clicks on email links and clicks on external domain links. Any domains listed as domains for cross domain tracking will not be tracked as an external domain click event, as the destination page should contain the same asynchronous Google Analytics Tracking Tag with the identical Property ID number (UA-XXXXXXX-X) as the originating domain.

In the example below, we have added an exclusion flag for any links that you do not want to track, just add the link to a CSS Class .exclude and it will be ignored when clicked.

Note: Examples for each step below are in the following code block.

  1. Set the trackCrossDomain variable to true
  2. Add the domain or domains to the domains variable, which are the domains you want to pass the session details to. Note: The listed domains need to have the same Google Analytics Tracking Tag and Profile ID on the linked pages to use the session details. Session details are passed by the GA _link() function.
  3. Update the default asynchronous Google Analytics Tracking Tag to include _setDomainName to yourdomain.com and _setAllowLinker to true  

  <script  src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script src="http://www.yourdomain.com/yourpath/jquery.izilla.sd.analytics.tracker.min.js"></script>
  <script>
      $(document).ready(function() { 
         $('a').isdAnalyticsTracker({
            'trackCrossDomain': true,
            'domains': 'yourdomain2.com', 
         });
      });
  </script>
  <script type="text/javascript">
      var _gaq =  _gaq || [];
      _gaq.push(
         ['_setAccount', 'UA-XXXXXXX-X'],
         ['_setDomainName', 'yourdomain.com'],
         ['_setAllowLinker', true],
         ['_trackPageview']
      );
      (function() {
         var ga =  document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
         ga.src =  ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') +  '.google-analytics.com/ga.js';
         var s =  document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
  </script>

Cross domain tracking with multiple property IDs

Implementation for cross domain tracking, which passes session details by the GA _link() function and multiple Property IDs (2 or more). This also tracks clicks on file downloads, clicks on email links and clicks on external domain links and pushes the page views and events to all Property IDs listed. Any domains listed as domains for cross domain tracking will not be tracked as an external domain click event, as the destination page should contain the same asynchronous Google Analytics Tracking Tag with the identical Property ID number (UA-XXXXXXX-X) as the originating domain.

In the example below, we have added an exclusion flag for any links that you do not want to track, just add the link to a CSS Class .exclude and it will be ignored when clicked.

Note: Examples for each step below are in the following code block.

  1. Set the trackCrossDomain variable to true
  2. Add the domain or domains to the domains variable, which are the domains you want to pass the session details to. Note: The listed domains need to have the same Google Analytics Tracking Tag and Profile ID on the linked pages to use the session details. Session details are passed by the GA _link() function.
  3. Set the trackAlternatePropertyIDs variable to true
  4. Add the namespace to use for alternate Property IDs being tracked to the alternatePropertyIDs variable. We recommend using the isd2, isd3 and so on, naming convention to avoid code conflicts. Once you define the alternatePropertyIDs you need to add the additional Property IDs to the asynchronous Google Analytics Tracking Tag   
  5. Update the default asynchronous Google Analytics Tracking Tag to include _setDomainName to yourdomain.com and _setAllowLinker to true and repeat for each Property ID being tracked.
  
  <script  src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script src="http://www.yourdomain.com/yourpath/jquery.izilla.sd.analytics.tracker.min.js"></script>
  <script>
      $(document).ready(function() { 
         $('a').isdAnalyticsTracker({
            'trackCrossDomain': true,
            'domains': 'yourdomain2.com',
            'trackAlternatePropertyIDs': true,
            'alternatePropertyIDs': 'isd2, isd3'
         });
      });
  </script>
  <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(
         ['_setAccount', 'UA-XXXXXXX-1'],
         ['_setDomainName', 'yourdomain.com'],
         ['_setAllowLinker', true],
         ['_trackPageview'],
         ['isd2._setAccount', 'UA-XXXXXXX-2'],
         ['isd2._setDomainName', 'yourdomain.com'],
         ['isd2._setAllowLinker', true],
         ['isd2._trackPageview']
         ['isd3._setAccount', 'UA-XXXXXXX-3'],
         ['isd3._setDomainName', 'yourdomain.com'],
         ['isd3._setAllowLinker', true],
         ['isd3._trackPageview']
      );
      (function() {
         var ga =  document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
         ga.src =  ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') +  '.google-analytics.com/ga.js';
         var s =  document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
  </script>

This section below is used for testing:

The Google Analytics jQuery Plugin v1.0 - 19/10/2012 is designed to allow cross domain session tracking, multiple property IDs, event tracking for external links and page views for downloaded files. This is a very comprehensive and easy to use method of implementing Google Analytics tracking tags with many advanced features of Google Analytics already included.

Below is an example of how the code is added to this website through Google Tag Manager. It can be used and called directly from your website, or it can be added to the Google Tag Manager as a Custom HTML Tag Type and the GTM code then calls the Google Analytics jQuery Plugin for you.

As soon as the documentation is complete, it will be available for download from https://github.com/izilla/


 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 <script src="http://www.yourdomain.com/yourpath/jquery.izilla.sd.analytics.tracker.min.js"></script>
 <script>
     $(document).ready(function() { 
        $('a:not(.exclude)').isdAnalyticsTracker({
           'trackCrossDomain': true,
           'domains': 'intellectiveweb.net, falley.org',
           'trackAlternatePropertyIDs': true,
           'alternatePropertyIDs': 'isd2, isd3'
        });
     });
 </script>
 <script type="text/javascript">
     var _gaq = _gaq || [];
     _gaq.push(
        ['_setAccount', 'UA-32857002-1'],
        ['_setDomainName', 'searchanddisplay.com.au'],
        ['_setAllowLinker', true],
        ['_trackPageview'],
        ['isd2._setAccount', 'UA-1522975-1'],
        ['isd2._setDomainName', 'searchanddisplay.com.au'],
        ['isd2._setAllowLinker', true],
        ['isd2._trackPageview'],
        ['isd3._setAccount', 'UA-2461352-1'],
        ['isd3._setDomainName', 'searchanddisplay.com.au'],
        ['isd3._setAllowLinker', true],
        ['isd3._trackPageview']
     );
     (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
     })();
 </script>

Links for testing

Group Links (domains to pass session details by _link)

intellectiveweb.net
falley.org

External Links (should be pushed as events

google.com
facebook.com
twitter.com

Internal Links

www.yourdomain.com/yourpage.html
relative a.html
relative a.html
relative b.html
relative.pdf
relative.docx

This email address is being protected from spambots. You need JavaScript enabled to view it.

Updates:

  • Version 1.0 - Added option 'eventCategory' with the default value of 'External', which is the requiered Category value that needs to be passed with event tracking. The default is called 'External' because only external domain links are tracked as events. Note: If you change 'trackFilesAsEvent' to 'true' the 'eventCategory' name will be passed with the events for clicked files and the file path and name will be passed as the Label value.
  • Version 0.9 - Added feature detection to only use the 'delay' on WebKit browsers
  • Version 0.8 - Added 'trackFilesAsEvent' option with a default setting of 'false' so clicks on files by default are tracked as page views
  • Version 0.7 - Added the ability to change the 'delay' time to allow the event or page tracking to be fired before the file loads,
  • Version 0.6 - Added 'appendFiles' option with a default setting of 'true', which allows additional file types to be added to the 'files' option. This is useful if you want to add file types not already in the 'defaultFiles' option. If 'appendFiles' is set to false, the files added to the 'files' option will be the only files tracked and the 'defaultFiles' option will be ignored.
  • Changed version numbering - When the documentation and latest features are completed, this will be released as version 1.0
  • Version 0.5 (1.5) - Added 'trackFiles' as an option with the default as 'true'. If set to 'false' the time delay is ignored for clicks on files. External links still maintain delay