Pragmatic Code
Google analytics can track user events on a web page. This article shows a code snippet which automates the insertion of tracking code. Instead of adding tracking codes manually one tag at a time, we bind the code to the click event automatically. We opt not to make use of the plugins for libs such as jQuery or for applications such as WordPress so as to have full control over the process.Since multiple interactions can take place on a single page, it is essential to add tracking codes to log user interactions. Tracking codes are also needed to track clicks on links to external sites.
JsUri is the most robust library to parse URIs since a parsing function is sadly not included in javascript implementations (only a trick).
This is how we implemented it on our Data Big Bang blog to track clicks to other sites:
<!-- Inside <head> -->
<script type='text/javascript' src='http://www.databigbang.com/js/jquery-1.7.min.js?ver=1.7.0'></script>
<script type='text/javascript' src='http://www.databigbang.com/js/jsuri-1.1.1.min.js?ver=1.1.1'></script>
<!-- After <body> -->
<script type="text/javascript">
// Track click on hyperlinks to external sites
$(document).ready(function() {
$('a').click(function(event) {
var target = event.target;
var uri = new Uri(target);
if(uri.host() != 'www.databigbang.com' && uri.host() != 'blog.databigbang.com') {
//alert('Match!'); // Only for debugging
_gaq.push(['_trackEvent', 'UI', 'Click', target.toString(), 0, true]);
}
});
});
</script>
Indeed this is how we configure WordPress to get the libs automatically: edit the functions.php under the theme folder.
if( !is_admin()) {
wp_deregister_script('jquery');
# Avoid retrieving jquery libs from ajax.googleapis.com since Google domains can be blocked in countries like China.
# wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false, "1.7.0");
wp_register_script('jquery', ('http://www.databigbang.com/js/jquery-1.7.min.js'), false, '1.7.0');
wp_enqueue_script('jquery');
wp_deregister_script('jsuri');
wp_register_script('jsuri', ("http://www.databigbang.com/js/jsuri-1.1.1.min.js"), false, "1.1.1");
wp_enqueue_script('jsuri');
}
This is how we implemented it on our secure coupon codes generator site to track clicks on a rich web application.
<!-- Inside <head> -->
<script type='text/javascript' src='http://www.databigbang.com/js/jquery-1.7.min.js?ver=1.7.0'></script>
<script type='text/javascript' src='http://www.databigbang.com/js/jsuri-1.1.1.min.js?ver=1.1.1'></script>
<!-- After <body> -->
$(document).ready(function() {
// Add Event Trackers
$('a').click(function(event) {
var target = event.target;
var uri = new Uri(target.href);
if(uri.host() == 'www.securecouponcodes.com') {
//alert('match link');
_gaq.push(['_trackEvent', 'UI', 'Click', target.href, 0, true]);
}
});
$('button').click(function(event) {
var target = event.target;
//alert('match button');
_gaq.push(['_trackEvent', 'UI', 'Click', target.innerText, 0, true]);
});
});