-
-
Save hazdik/4d87c8bd3624ab1ee29110ea00fb1d92 to your computer and use it in GitHub Desktop.
Simple jQuery Helper for wrapping GA event tracking
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function($) { | |
| /* | |
| A simple helper plugin for wrapping Google Analytic event tracking | |
| into sites through jQuery and HTML5 data attributes. | |
| This assumes that you have used the standard configuration provided | |
| by google for setting up Google Analytics and used the _gaq var for | |
| storing the tracker. | |
| Can track focus, activate, hover and click input methods but not key | |
| events to prevent spamming. | |
| License: BSD (http://silverstripe.org/bsd-license/) | |
| Author: Will Rossiter | |
| */ | |
| $.fn.trackEvent = function(args) { | |
| _gaq = _gaq || []; | |
| var category, action, label, value, self = $(this[0]); | |
| var e = function(f) { if($.isFunction(f)) return f(self); return f; } | |
| var args = $.extend({ | |
| category: function(ele) { | |
| category = $(ele).data('category'); | |
| if(!category) category = window.location.toString(); | |
| return category; | |
| }, | |
| action: function(ele) { | |
| action = $(ele).data('action'); | |
| if(!action) action = 'click'; | |
| return action; | |
| }, | |
| label: function(ele) { | |
| // optional but recommened field | |
| label = $(ele).data('label'); | |
| if(!label) label = $(ele).text(); | |
| return label; | |
| }, | |
| value: function(ele) { | |
| // optional field | |
| return $(ele).data('value'); | |
| }, | |
| }, args); | |
| var track = ['_trackEvent', e(args.category), e(args.action)]; | |
| label = e(args.label); | |
| value = parseInt(e(args.value)); | |
| if(label) track.push(label); | |
| if(value) track.push(value); | |
| try { | |
| _gaq.push(track); | |
| } catch(err) { | |
| if(window.console != undefined) { | |
| window.console.log(err); | |
| } | |
| } | |
| }; | |
| })(jQuery); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>jQuery powered ga.js event tracking</title> | |
| <script type="text/javascript"> | |
| var _gaq = _gaq || []; | |
| _gaq.push(['_setAccount', 'UA-6721336-2']); | |
| _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> | |
| <style> | |
| * { font-family: Lucida Grande, Arial } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>jQuery powered ga.js event tracking</h1> | |
| <p>For testing I recommend using <a href="http://analytics.blogspot.com/2010/08/new-tools-to-debug-your-tracking-code.html">ga_debug.js</a> instead of ga.js. <a href="https://chrome.google.com/webstore/detail/jnkmfdileelhofjcijamephohjechhna">chrome extension</a>.</p> | |
| <ul> | |
| <li><a href="index.html" class="track">Default Simple link tracked</a>.</li> | |
| <li><a href="index.html" class="track" data-category="Testing" data-label="Simple Link Track via HTML5" data-action="custom action">Simple Link Track with defined category and action</a>.</li> | |
| <li><input type="text" class="track" data-category="Testing Input" data-label="Focused on input" /></li> | |
| </ul> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> | |
| <script src="event.tracking.js"></script> | |
| <script> | |
| (function($) { | |
| $(document).ready(function() { | |
| $("a.track").click(function() { | |
| $(this).trackEvent(); | |
| return false; | |
| }); | |
| $("input.track").focus(function() { | |
| $(this).trackEvent({ | |
| label: 'Focused into input box', | |
| action: 'focus' | |
| }); | |
| }); | |
| $("input.track").blur(function() { | |
| $(this).trackEvent({ | |
| label: function(elem) { return $(elem).val(); }, | |
| action: 'leave text field' | |
| }) | |
| }); | |
| $("form#search").submit(function() { | |
| $(this).trackEvent({ | |
| category: "Search Queries", | |
| label: function(elem) { $(elem).find("input.text").val(); }, | |
| action: "Submitted Search" | |
| }); | |
| }); | |
| }) | |
| })(jQuery); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment