Over 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:

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

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:

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.

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).

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:

1
timeTracker._setHistogramBuckets([1000, 2000, 5000, 10000, 15000, 25000]);

The final block of code should look like this:

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.

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.

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:

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:

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