Home

How to record a users time on site


Stop loosing visitors! Time on site is one of the most useful metrics. Google website optimizer(GWO) makes it easy to test which design elements yield the highest conversion rate. You can use GWO to see if users spend a certain amount of time on a page, but you can't see which design combinations result in the most time spent on your site or a particular page. To record the time spent on your site you need to:
  1. Use javascript to record the time spent on a page.
  2. Use ajax to send that time to a server-side script the very instance the user leaves that page.
  3. Use a server-side script (like php or asp) to record that result.
To get the time spent on a page you need to use the onbeforeunload event which triggers as soon as the user navigates away from the page. The code to get just the time on a page would look like this: 
<script type="text/javascript">
    var startTime = new Date();        //Start the clock!
    window.onbeforeunload = function()        //When the user leaves the page(closes the window/tab, clicks a link)...
    {
        var endTime = new Date();        //Get the current time.
        var timeSpent=(endTime - startTime);        //Find out how long it's been.
        alert(timeSpent);        //Pop up a window with the time spent in microseconds.
    }
</script>
To send that time back to the server you need to make an ajax call with synchronous set to true so that the server doesn't sever the connection when the user actually leaves the page.

<script type="text/javascript">
    var startTime = new Date();        //Start the clock!
    window.onbeforeunload = function()        //When the user leaves the page(closes the window/tab, clicks a link)...
    {
        var endTime = new Date();        //Get the current time.
        var timeSpent = (endTime - startTime);        //Find out how long it's been.
        var xmlhttp;        //Make a variable for a new ajax request.
        if (window.XMLHttpRequest)        //If it's a decent browser...
        {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();        //Open a new ajax request.
        }
        else        //If it's a bad browser...
        {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");        //Open a different type of ajax call.
        }
        var url = "http://anything.com/time.php?time="+timeSpent;        //Send the time on the page to a php script of your choosing.
        xmlhttp.open("GET",url,false);        //The false at the end tells ajax to use a synchronous call which wont be severed by the user leaving.
        xmlhttp.send(null);        //Send the request and don't wait for a response.
    }
</script>
The php code that takes the time and stores it in the database looks something like this:
<?php
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Cache-Control: no-cache");
include("./connect.php");        //Connect to the database.
mysql_query("INSERT INTO  `your_table_name` (`time`) VALUES ('".$_GET["time"]."');");        //Add them to the db.
?>
In addition to the time spent on a page I also send which version of the page it is as well as the users current session id so I can track their time spent on my site this visit.
Share/Bookmark