Using cookies and JavaScript to create a page to page timer.

Report · Nov 22, 2010

I have long wanted to be able to measure the time it takes to get from one page to another. While reading in my JavaScript reference the other day, I came across cookies. I've long known about cookies but have never used them. The thing that looked attractive was that you can access cookies from both JavaScript and CF.

So I put together the procedures to store the "start time" (startTimeP8D) for the transition and activated it on the onUnload event of a 1^stpage. After a few rewrites I got it working. Here is the JavaScript to do that: it consists of two functions: doTimer which is the input section and setCookie, which writes to the cookie. Not the two numbered alert statements.

doTimer - results for "start" from the doTimer function called from page 1 when it unloads. (See doTimer below)

Please note that the two startTime8D values are the same immediately after they are stored.

On the 2nd page in the sequence, I run the corresponding code to determine the "end time", compute the delta and write it out to the page. It didn't all run on the first try, but it now seems to be running without a crash, which can be misleading.

second set of outputs from page 2:

Please not that while the endTimeP8D match, the startTimeP8D value no longer matches the previously stored value.

There is one major hitch in the get along which has me stymied: As you can see, when you compare the startTimeP8 in the setCookie – results above and the "startTimeP8" in the doTimer results below the startTimeP8 is not the value that I wrote to the cookie @ unload of page 1. I have checked and checked and do now see anywhere that the startTimeP8D value is being overwritten. Based upon my limited experience with JavaScript cookies, it seems to me that you get an entry for each time you set the cookie. So I would expect to see to startTimeP8D entry for each setCookie event, not a different value.

The result of the failed computation is shown on the bottom of the page. As you can see, the Total Elapsed Time is negative, which is never a good sign. The other time shown, Page build time, is the run time from the server. The whole purpose is to be able to show folks that the reason the code might be show is because of their overloaded network and not our code. We had one client whose had users running on 56k modems. It was so slow their VPN software was timing out!!! Still the had the never to blame us!!!

I am using SQLServer 2005, CF8, IE8 on W7.

I'm not married to this way of doing this so if anyone has a better/easier way of doing a "page to page timer", I'm up for it. I'd prefer to fix this one since I've been working on it for the past 3 days.

Thanks in advcance for your help.

:-}

Len, PHRED SE
.

Report · Nov 23, 2010

It is hard to tell what you are doing wrong because you didn't include the code that actually calls the example JavaScript you provided. Here is a very basic example that should do what you want using JQuery and the Cookie JQuery plugin.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
     <title>Test JavaScript Page Load Timer</title>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
     <script src="http://github.com/carhartl/jquery-cookie/raw/master/jquery.cookie.js" type="text/javascript"></script>
     <script>
          $(function(){
               var previousPageUnload = $.cookie('unloadTime');
               if(previousPageUnload) {
                    var d = new Date();
                    var loadTime = d.getTime() - previousPageUnload;
                    console.log(loadTime + 'ms');

               };
          });          
          $(window).unload(function(){
               var d = new Date();
                 $.cookie('unloadTime',d.getTime());
          });          
     </script>
</head>
<body>
     <h1>Test JavaScript Page Load Timer</h1>
</body>
</html>

In a nutshell this sets a cookie named unloadTime on window unload. When the page is loaded (actually when the document is ready in this case), it checks to see if the unloadTime cookie is set. If an unloadTime cookie is set it logs the difference between the current time and the previous page unload time stored in the cookie. Based on what you mentioned as the requirements I see no need to store the end time in a cookie. One caveat to mention, if a user navigates away from your site then comes back to your site without closing the browser you will see an inflated page load time.

Report · Nov 23, 2010

Nathan,

Thanks for the suggestion. I'll give it a go after I get some insight into jquery - don't like to blindly use things I know nothing about.

As clumbsy as it might be, my method would work if the startTime (unloadTime) cookie value didn't change between pages.

How is this jquery method going to solve the problem of the cookie value changing between pages???

:-}}}

Len

Report · Nov 23, 2010

The cookie value should not change between page loads. It is impossilbe to tell what the issue may be given we can't see how or when you are actually setting and getting the cookie value. If you post a simple, complete example (like the ones I've posted to this thread), we may be able to figure out where you are going wrong.

Report · Nov 23, 2010

Here it is with no JQuery or console logging calls using cookie utility functions found here:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
     <title>Test JavaScript Page Load Timer</title>
     <script>
          window.onload = function(){
               var previousPageUnload = getCookie('unloadTime');
               if(previousPageUnload){
                    var d = new Date();
                    var loadTime = d.getTime() - previousPageUnload;
                    alert(loadTime + 'ms');
               };
          };
                    
          window.onunload = function(){
               var d = new Date();
                 setCookie('unloadTime',d.getTime());
          };     
                    
          function setCookie(c_name,value,expiredays) {
               var exdate=new Date();
               exdate.setDate(exdate.getDate()+expiredays);
               document.cookie=c_name+ "=" + escape(value) + ((expiredays==null) ? "" : ";expires="+exdate.toUTCString());
          }
          
          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 null;
          }     
     </script>
</head>
<body>
     <h1>Test JavaScript Page Load Timer</h1>
</body>
</html>

Note that overwriting global window events like this is not a good idea, which is why I used JQuery in my earlier example. I strongly suggest you look at JQuery or one of the other JS libraries (YUI, etc.) to help with event handling. I'll leave it at that as this is getting into JavaScript development, not really on topic for a ColdFusion forum.

Adobe Community

Using cookies and JavaScript to create a page to page timer.