Increase Page Views with jQuery Tabs and Google Analytics

If you’re not in e-commerce, I’m sure most of you have seen a decrease in website traffic, due to the holidays.  By now, most web developers use Google Analytics to monitor traffic, keywords and other metrics.  With a combination of Analytics and Webmaster Tools, I’ve been able to increase my web traffic significantly.

One thing I noticed however, was when I started implementing jQuery Tabs into a website, I noticed that my overall traffic was decreasing slightly, and I began to wonder which pages were being viewed most.  Turns out, with the help of a coworker and asynchronous code from Google, we’ve been able to track “tab views”.

I present.. the code:

$(document).ready(function () {
  if ($("#tabs").length != 0){
    $("#tabs").bind("tabsselect",function(event,ui) {
      _gaq.push(['_trackPageview', window.location.pathname + '/' + ui.tab.innerHTML]);
    });
  }
});

With this code, it will check to see if you have tabs, and if you’ve selected a tab, it feeds another page view into Google.

The output you will see in Google will be similar to: www.yourpage.com/about, with individual records for each tab title on the current page.

Filed Under:

  • javascript
  •  
  • google analytics