Vineet Manohar's blog

This article shows how to use Google Analytics API to track and chart your website performance. This seems like a very intuitive feature that Google Analytics should have but due to the nature of javascript tracking, tracking response time is not possible. However, if you were using an apache stats tools calculating this would be trivial. This article is an attempt to fill the gap between the two.

Recently Google Analytics released an event API to let websites elegantly track end user interactions. Previously, to capture these interactions you had to create a pseudo page in order to use their pageTracker API.

Here is a sample event API call:

pageTracker._trackEvent("Category name",
                        "Action", "Label", 122);

An event has 4 attributes:

• Category – the 2-3 word summary of what you’re trying to capture
• Action – think of this as the sub-category
• Label – often identifies a unique resource, e.g. the current URL, video id
• Value – a numerical value associated with this event

Though the fourth parameter (“value”) is optional, however it is the most important one in my opinion since it is numerical and therefore it lets us chart the associated events on a graph.

Once you understand the power of the “value” parameter, charting your performance seems trivial. Add an event call to the end of each UI page in your application. Here’s a sample of how the call would look like:

<!-- performance tracking -->
<script type="text/javascript">
  pageTracker._trackEvent("Response time", "search results",
                          "/search?q=hello+world", 27);
</script>

The event category here is “Response time”, the action or sub-category is “search results” which in my case is a sub-section of the website. The label is the request URI. The value is the time taken to generate this page in milliseconds.

You can calculate the URI in a language/platform specific manner. For example, in Java you can use the following code:

uri = httpRequest.getRequestURI() +
      (httpRequest.getQueryString() != null
      ? "?" + httpRequest.getQueryString() : "");

To calculate the time taken to generate the page, record the start time when you receive the request and the end time when the response is ready and subtract the start time from the end time. In Java, you can use servlet filter to accomplish this easily. You can use similar techniques in other languages/frameworks.

    public void doFilter(ServletRequest request, ServletResponse response,
      FilterChain chain) throws java.io.IOException, ServletException {
            // record start time here
            Date startTime = new Date();
        try {
            chain.doFilter(request, response);
        } finally {
            // record end time here
            Date endTime = new Date();
            request.setAttribute("RESPONSE_TIME",
                                  endTime.getTime() - startTime.getTime());
        }
    }

Finally on the last line of each UI page (typically your footer page).

	pageTracker._trackEvent("Response time",
                                "<sub section name of the website>",
                                "<%=uri%>",
                                "<%=request.getAttribute("RESPONSE_TIME")%>");

Once you have add this to all your pages, go ahead and deploy your code to your website. Once users start hitting your website, this code will populate event data into your Google Analytics account. Once enough data has been accumulated, you can login to your analytics account and chart your website response time in milliseconds. Its simple:

1. Login to your analytics acount
2. Goto ‘Content’ sub-menu on the left
3. Goto ‘Contents -> Event Tracking’ sub-sub-menu (at the time of writing, not all analytics account have Event tracking enabled, in which case you may or may not see this option in your account).
4. Goto ‘Content -> Event Tracking -> Categories’. You will see your category ‘Response time’ listed as one of the categories. Click on ‘Response time’.
5. Change the Chart type to ‘Avg. value’.
6. Change to “Views:” at the bottom to “details” view (usually the last option).
7. Click on the ‘Add to Dashboard’ button at the top. This add your website performance (response time in milliseconds) to your Dashboard!
8. You can also set a daily email of this view to your email address by using the ‘Email’ button.

This technique lets you analyze your website performance over a period of time. Note that this tells you the actual performance of what the end users are seeing, not the crawlers. This is particularly useful if you are using a hosting service as it lets you measure the variance in service provided by your host over a period of time given the same code base.

You can extend the same idea to track your page load time by putting a javascript start time at the beginning of page and and end time in the onload method and create a second category called ‘Page load time’. This approach worked for me, and I hope it works for you too!

Related posts:

1. Google introduces Page Speed
2. What is Google Wave: in plain simple English in 2 minutes
3. Writing Java Hello World for Google app engine
4. What is Google Buzz?