Wednesday, June 2nd, 2010

How To Track Elapsed Time (or Time to Complete) in Google Analytics Using TimeTracker [TUTORIAL]

by Glenn Gabe

Tracking elapsed time in Google Analytics via Time TrackerOver the past few years, conversion optimization has become an incredibly important service that I provide for my clients. Sometimes in order to improve conversion, there are times that I need to analyze a multi-step process that occurs on one page. A good example of this would be an elaborate form that visitors need to fill out (without linking to additional pages). Or, I might be tracking a multi-step process that spans several pages, but want to know more about each specific step. If you run into situations like these, then it might not be sufficient to simply track how many people converted. You might want to analyze how long it’s taking for those visitors to complete a certain process (in order to identify obstacles along the way). This is when using tracking functionality like TimeTracker in Google Analytics can come in very handy.

What is TimeTracker in Google Analytics?
TimeTracker extends event tracking in Google Analytics and enables you to track elapsed time, or Time to Complete. I’ve found that many people aren’t familiar with TimeTracker, don’t use it much, or don’t know how to properly set it up. So, I’ve decided to write this tutorial to walk you step by step through the process of setting it up. Then I’ll quickly show you how you can check the event tracking reporting for TimeTracker in Google Analytics.

For our purposes, TimeTracker will enable us to trigger the start of a process (like clicking a button, entering text, or selecting a checkbox). We will start a timer at that point. Then it enables you to trigger the end of that process (again by some action taken by the user). At the end of the process, we will stop the timer, record the elapsed time, and then communicate with Google Analytics to track the result as an event (via Event Tracking).

Let’s get started. Open up your html editor of choice and get ready to use TimeTracker.

1. Define What You Are Going to Track
For this tutorial, I’m going to keep the process and form simple so you can clearly understand how to use TimeTracker. I’ll show you how to start the timer with the first click of a form element and then how to stop the timer and send the data to Google Analytics when users click the submit button. Again, this will be a basic setup so you can easily follow along. You will probably want to write some custom logic for your own projects, based on the specific process you are going to track.

2. Adding The Form Elements
We’ll start by adding a simple html form to your webpage. In your form, add a group of radio buttons to enable users to select their age. Since this is the first form element, we’ll start the timer via TimeTracker when someone clicks a radio button. After adding the radio buttons, you can add several additional form elements, based on what you need to track. I won’t cover how to add the additional form elements, since they don’t impact TimeTracker. Basically, they can be standard html form elements (text boxes, dropdowns, checkboxes, etc.) At the end of our form, we’ll add a submit button for users to complete the process. The submit button will first stop the timer and then send the data to Google Analytics via Event Tracking. We’ll complete this via a custom JavaScript function that we’ll write later in the tutorial. Don’t worry, it’s a simple JavaScript function. :)

Radio Buttons Will Start Our Timer:
Time Tracker Form Elements

First, add your form, the radio buttons, and your submit button: We will add the TimeTracker code later in the tutorial.

 HTML |  copy code |? 
1
<form name="frmTrackTime">
2
    	<input name="rb1" value="18-24" type="radio">18-24<br />
3
        <input name="rb1" value="25-40" type="radio">25-40<br />
4
 
5
        <!—add more form elements here-->
6
 
7
         <input type="submit" id="btnTrack" value="Submit!" />
8
</form>

3. Download the JavaScript (or link to it from your code)
The TimeTracker JavaScript code can be found on the Google Code page for extending event tracking. You can either link to that code directly from your page or you can include the code in your own JavaScript file. I included the code in my own file by copying and pasting the JavaScript code into a new text file and saving it locally as “time-tracker.js”. Note, you will also need your typical Google Analytics snippet included in the page.

Click the TimeTracker() Title to Access the JavaScript Code:
Time Tracker Google Code

4. Add the JavaScript code to your webpage
In order to add the code to your webpage, simply include the following line of code in the head of your html document.

 HTML |  copy code |? 
1
<script type="text/javascript" src="http://yourdomain.com/time-tracker.js"></script>

Note, make sure you enter the actual location of the JavaScript file on your server and that you reference the correct file name. Replace “yourdomain.com” with your own domain.

5. Create Your TimeTracker Object
You will need to create a TimeTracker object in your JavaScript code, which we will end up calling from our form elements in order to start and stop the timer. The code will also send the data to Google Analytics (via Event Tracking). Add the following code below the code you entered earlier (where you referenced the TimeTracker JavaScript file).

 Javascript |  copy code |? 
1
2
<script type="text/javascript">  
3
     var timeTracker = new TimeTracker();     
4
</script>  
5

6. Customize the JavaScript (Histogram for Time Intervals)
There is an optional array you can specify when you create the TimeTrakcer object. It’s called setHistogramBuckets() and it enables you to set the time intervals that get passed to Google Analytics (when the event is sent and tracked via Google Analytics). For example, you can specify the time intervals (the buckets of time) that Google Analytics will drop users into (based on how long they spent completing the process you are tracking). If you leave this empty, TimeTrakcer has default time intervals (which might not fit well, given your specific form or process).

The default buckets will start at 100 milliseconds and go up to 5000 milliseconds. In case you are wondering, there are 1000 milliseconds in one second. I highly recommend setting the time intervals, based on the specific process you are tracking. For example, if you think the process could take up to three minutes, then you would set up intervals leading up to three minutes. Three minutes is 180 seconds, or 180,000 milliseconds. For our purposes, we’ll set six intervals starting at one second and that go up to 25 seconds. If it takes someone more than 25 seconds, you’ll see it recorded as 25000+ in your reporting (so they won’t be left out). Here is the code you should add right below the code you added above (where you created your TimeTracker object). Note, add this code within the script tags you already coded earlier.

Specify your own time intervals via the setHistogramBuckets() function:

 Javascript |  copy code |? 
1
timeTracker._setHistogramBuckets([1000, 2000, 5000, 10000, 15000, 25000]);

The final block of code should look like this:

 Javascript |  copy code |? 
1
<script type="text/javascript" src="http://yourdomain.com/time-tracker.js"></script>
2
<script type="text/javascript">  
3
     var timeTracker = new TimeTracker();     
4
     timeTracker._setHistogramBuckets([1000, 2000, 5000, 10000, 15000, 25000]);
5
</script>  

7. Add JavaScript to Start Your Timer
Now that you have your form elements in place and you’ve included the necessary JavaScript code, you’re ready to start your timer. In the first form element (the radio button), add a call to TimeTracker to start the timer.

 HTML |  copy code |? 
1
<input name="rb1" value="18-24" type="radio" onclick="timeTracker._recordStartTime();”>18-24<br /> 

Note, you should also add this code to the other radio button that is part of the group. This is because we don’t know which button the user will click (based on their age). We want to start the timer if they click either radio button.

8. Add JavaScript to Stop The Timer and Send The Data
Similar to what we completed above, you are now going to add code to the submit button to stop the timer. Then you’re going to send that data to Google Analytics via event tracking. In order to streamline this process, I created a simple JavaScript function that both stops the timer and then sends the data to Google Analytics as an event. I named this function completeTracker() and included it in the head of my html document. Let’s first add the code to the submit button.

 HTML |  copy code |? 
1
<input type="submit" id="btnTrack" value="Submit Answers" onclick="completeTracker();" />
2

Now here is the code for the JavaScript function called completeTracker(). Add this code to the head of your html document:

 Javascript |  copy code |? 
1
function completeTracker() {
2
	timeTracker._recordEndTime();
3
	timeTracker._track(pageTracker, undefined, 'Lead From Page X');
4
}

The code explained:
The first line simply stops recording the time. The second line sends the data to Google Analytics via event tracking. The first parameter is your pageTracker object, which is created via your standard Google Analytics code snippet. The second parameter is optional and will enable you to customize the category of the event in your reporting. Categories are essentially the top-level name of an event in your reporting. The third parameter is also optional and will enable you to customize the label that is reported in event tracking. I added a label called “Lead From Page X”, so you could identify where the event was triggered. You would obviously want to replace X with the actual page name that contained your form. You can read my post about Event Tracking in Google Analytics to learn more about the various parameters involved with tracking events.

9. Upload and Test
When you upload your files, make sure you include both the html file and the external JavaScript file. Also, make sure you are referencing the external JavaScript file correctly or your code will not work. For example, did you upload the JavaScript file to the same directory, a code-only directory, etc? Make any necessary changes in your html code if the JavaScript file isn’t placed in the same directory as the webpage containing your form. If you are all set, then click away. I recommend going through the form numerous times from separate browsers and separate systems. Remember, the first radio button triggers the timer and the submit button stops the timer and then passes the data to Google Analytics via event tracking.

10. Wait and Check Reporting
You will probably need to wait a few hours before you can view the reporting in Google Analytics. After which, you can access the Content tab and then click “Event Tracking”. If you click the Categories tab, you should see a TimeTracker category. If you click that category, you should see the various times listed. These are the time intervals that we set using setHistogramBuckets(). If you click each time interval, you will see the specific form or page that triggered the event. For our purposes, all the events were triggered via one form and page. However, that might not be the case if you have multiple forms running on your site.

TimeTracker Events in Google Analytics:
Time Tracker Reporting in Google Analytics

Congratulations! You have just successfully tracked elapsed time (or Time to Complete) in Google Analytics. My hope is that you’re thinking of many more ways to use this functionality in your own projects. I recommend brainstorming several ideas for using TimeTracker to see the potential impact on conversion. I would start small and then increase the complexity of each project as you get more comfortable. As you can see, it’s relatively easy to set up and can provide insight into how long it takes visitors to complete certain processes on your site.

By the way, it just took you 10:42 to complete this tutorial. Just kidding. :)

GG

11 Responses to “How To Track Elapsed Time (or Time to Complete) in Google Analytics Using TimeTracker [TUTORIAL]”

  1. [...] bietet Google Analytics von Haus aus nur wenige Informationen. Glenn Gabe zeigt in seinem Artikel How To Track Elapsed Time (or Time to Complete) in Google Analytics Using TimeTracker wie man mit Hilfe des event tracking in Google Analytics die Dauer eines Prozess trackt und in [...]

  2. Qais says:

    very valuable article, this is what I am looking for!. Thanks Glenn!

  3. Michel says:

    Nice article Glenn. You mention in the first paragraph tracking a multi-step process that spans several pages; is this feasible with the TimeTracker() wrapper? Or does changing pages break the continuity of the measurements?

    I was asked to measure elapsed time between someone putting something in a shopping basket all the way to getting a buy confirmation, with multiple pages in between. Ideally we’d like to measure the time spent on each page in between as well. Feasible?

    • Glenn Gabe says:

      Thanks Michel. I’m glad you found my post helpful. I’ve always used TimeTracker on single pages to track how users interact with a process they are completing. For your situation, you might want to combine TimeTracker for completion time (on each page), and then use GA’s other time metrics to understand the total time to convert. It’s not perfect, since the final page will have a time of 0:00 if they simply exit the site at that point. But, it would give you more data with regard to time both in-process and then between pages. I hope that helps.

      GG

  4. Alla says:

    Hi Glenn

    Does this function work only during one visit? What if user starts the process during first visit and completes during the next one? is it possible to track it somehow?

    Many thanks,
    Alla

    • Glenn Gabe says:

      Alla, this can be used for tracking session-based processes. The timer will get wiped out when a user closes the browser window. I hope that helps.

      GG

  5. david says:

    I like your work and try to implement it. i have one question,with this scenario

    I have a form to be filled in my web application and this form has different steps before hitting the submit button. like

    enter name

    enter value 1

    enter value 2.

    enter value 3

    ….

    and finally submit

    and I want to calculate the time taken from step 1 to 2 from 2 to 3 …and finally to submit

    Best Regards

  6. Glenn Gabe says:

    Thanks David. I’m glad my post was helpful.

    This could work for the scenario you listed above (if each step is on the same page). You can start to learn how long it takes between steps, and then get an overall feel for the entire process (time-wise). Let me know how it works for you.

    GG

  7. david says:

    I am still enjoying your code

    but I have one question. I would like to give an action name rather than those time intervals.

    how can i dod this ?

    thanx again

    • Glenn Gabe says:

      David, the setHistogramBuckets() function takes numbers as arguments. You should try out adding actions in quotes, but I’m not sure that will work. The function will probably fail. Let me know how it works out for you.

      GG