Published first on UX Collective on Oct 18, 2019

A critical aspect of analyzing the customer journey is timing. Timing is critical to analyze customer conversion funnel. If there are complicated steps within a page for a user to complete, they will take longer. As GA users, we’re often focused on the number of users that fall out of the funnel, but rarely do we look at the time taken.

Let us look at why a timing variable is essential for tracking user behavior.

Why Timing Tracking?

Each node in the line corresponds to time-gap between each step, on an average, i.e., it took, on average, 2:15 for a user to move from step 1 to step 2 of the checkout. The final step is the time to complete payment.
As evident in the above graph, we see that there is a substantial increase in time when a user moves from Step 3 to Step 4, indicating that there are elements in Step 3 that are time-consuming, even for logged-in users. And there are significant timing increases for a logged-in user over guest users to complete payment. All this can be seen without looking at the UI!

Looking at the distribution of the timing variable for payment completion, we see a significant trend, pointing towards a long tail for logged-in users:

Note: Normalize your data to avoid biases in the distribution of Guest v/s Logged-In users.

Timing also helps in creating a benchmark for comparisons between various checkout designs.

How do you implement a timing variable?

We’ll use Google Tag Manager to implement the timing variables here. Timing variables are essentially Google Analytics events that capture time between various events. Here is the logical flow:

We start by checking for a cookie that holds the timing variable. If the page is a part of a funnel step, fire a GA event with the time difference as the Event Label. Update the cookie time with the current time.

This flow assumes a linear flow of user (there are back and forths between pages in a funnel and those will show up in your report). Note that this is for delta flow calculations (Step 1 to Step 2) and not the total time to Step 1, the total time to Step 2, etc. I prefer holding the following KPIs:

1. Timing between steps
2. Time to purchase
3. Time to complete payment
4. Time to complete sign-up
5. Time to add to basket (1st, 2nd, 3rd, etc)

Resulting in a few extra cookies 🙂

The code

First we need our cookie getter and setter:

function setCookie(name, value, timeInSeconds) {
    document.cookie = name + "=" + value + "; expires=" + timeInSeconds + "; path=/";
}function getCookie(c_name) {
    if (document.cookie.length > 0) {
        c_start = document.cookie.indexOf(c_name + "=");
        if (c_start != -1) {
            c_start = c_start + c_name.length + 1;
            c_end = document.cookie.indexOf(";", c_start);
            if (c_end == -1) {
                c_end = document.cookie.length;
            }
            return unescape(document.cookie.substring(c_start, c_end));
        }
    }
    return "";
}

I won’t go into the description of the functions, and neither should you. They work as their name and definition suggests.

Next, we need to initialize our cookie:

var date = new Date();
var now = Date.now();
date.setMinutes(date.getMinutes()+30);//set a timestamp cookie for start of checkout
if(!getCookie("checkoutTimeVar")){ //if the cookie doesn't exist
    setCookie("checkoutTimeVar",now,date.toUTCString());
}
else{ 
//cookie exists. User has returned within 30 mins. Quick check to ensure the user isn't back within 15 mins of settingvar x = getCookie("checkoutTimeVar");
    if((now - x) > (15 * 60 * 1000)) { 
//our cookie is older than 15 mins
//reset the cookie because the user has restarted the journey
        setCookie("checkoutTimeVar",now,date.toUTCString());
    }}

This sets a cookie for 30 mins expiry, matching with your GA session time out. There are 15 mins check to ensure that the user is within the transaction journey. I added that check based on experience — users who take more than 15 mins to complete their journey steps have mentally moved away from the checkout experience.

Next, at every funnel step, fire a GTM Tag that essentially does this:

var date = new Date();
  var now = Date.now();
  date.setMinutes(date.getMinutes()+30);//set a timestamp cookie for start of checkout
  if(!getCookie("checkoutTimeVar")){ //if the cookie doesn't exist
    setCookie("checkoutTimeVar",now,date.toUTCString());
    setCookie("loggedInGA","1",date.toUTCString());   
  }else{
    var startCheckout = getCookie("checkoutTimeVar");
    var timeDiff = Math.round((now - checkoutTimeVar*1)/1000);    
    ga("create", "YOUR GA ID","auto");
    ga('send', 'event', "CheckoutTimings", "[Step Definition]", timeDiff.toString());
  }

This fires the time difference for each step. [Step definition] — contains the event action that has taken place.

And there you have it! You’re ready to get timing insights into your funnel!

From here, you should export this information into Google Data Studio — use Google Sheets with GA connector to transform your data before you go into visualization. Automate it for weekly reporting. If you’re using Power BI, you can use the anomaly detection API to alert you if the time taken goes up higher than 2 Standard deviations.

I will cover this in a future post.

Google Analytics with Google Tag Manager provides a really powerful avenue for Product managers to get actionable insights. As PMs, we have to learn to use GA to our customers’ benefit. Capturing information like this will help us get one step closer!

Thank you for reading!