The advantages of using Google Event Tracking are widely documented.
Usually, you add even tracking via onclick events, such as:
|
1 2 |
<a href="http://www.facebook.com/" onclick="_gaq.push(['_trackEvent', 'External', 'Click', 'facebook.com']);">Facebook.com</a> <a href="http://www.google.co.uk/" onclick="_gaq.push(['_trackEvent', 'External', 'Click', 'google.co.uk']);">Google.co.uk</a> |
If you want to quickly update a set of tracking actions, or you want to add multiple events to one link, code quickly becomes cumbersome.
Improve with jQuery
Using jQuery, you can organize your event tracking, making sure all the code is one place — usually in an external JavaScript file — rather than littered throughout your HTML. This increases code maintenance overheads and also increases deployment speed.
So, lets take one of the examples above, and jQuery it.
|
1 |
<a href="http://www.facebook.com/" onclick="_gaq.push(['_trackEvent', 'External', 'Click', 'facebook.com']);">Facebook.com</a> |
would become:
|
1 2 3 4 5 6 7 8 9 10 |
<a href="http://www.facebook.com/" id="link_facebook">Facebook.com</a> <script type="text/javascript"> $(document).ready(function(){ $('#link_facebook').click(function(){ _gaq.push(['_trackEvent', 'External', 'Click', 'facebook.com']); }); }); </script> |
What we’ve done here, is created an onclick function that will execute on $(document).ready – this is the jQuery code for the moment that the DOM is loaded. The function we’ve created is bound to the click event of the link (ID is referenced). We can bunch a lot of these up here and keep all the code together.
This is a fairly simple example, but what if you had a lot of items on one page? Using our example of external links, they may all share at least two things in common, the category and the action. So how about we give them all a class, and use the ID instead as a label?
|
1 2 3 4 5 6 7 8 9 10 |
<a href="http://www.facebook.com/" id="Facebook" class="external">Facebook.com</a> <a href="http://www.google.com/" id="Google" class="external">Google.com</a> <script type="text/javascript"> $(document).ready(function(){ $('a.external').click(function(){ _gaq.push(['_trackEvent', 'External', 'Click', $(this).attr('id')]); }); }); </script> |
This way, all the links have an “External” category and a “Click” action.
You could also extend this to track other events on click, or even fire off other functions when something is interacted with.
Image Credit: Paul.White
Comment or tweet @douglasradburn