Measuring Site Analytics with Javascript - Sessions

These series of tutorials will explain how to measure site analytics using custom Javascript, rather than using third party analytics libraries such as Google Analytics.

• Measuring Site Analytics with Javascript - Sessions (current tutorial)
• Measuring Site Analytics with Javascript - Page Views & Bounce Rate

This tutorial explains the implementation of session analytics.

Understanding Sessions in Site Analytics

A session in site analytics represents the activity done on the website within a specified time frame, say 30 minutes.

As an example consider the below scenario for a user visiting a website. The session duration is assumed to be 30 minutes.

1. The user opens his browser and arrives on the website page. A new session starts at this time. The user needs to do some activity (browse to another page of same website, reload the current page) within the next 30 minutes before the current session is expired.
2. After 5 minutes user navigates to a second page of the same website. The session will be the same and session clock is reset to 30 minutes. There are 30 minutes remaining before the current session is expired.
3. The user browses the second page for 10 minutes. He then navigates to some other website. There are 20 minutes remaining before the current session is expired.
4. After being on the other website for 15 minutes, the user again comes back to a page on the original website. There were still 5 minutes remaining for session expiry — now session clock is again reset to 30 minutes.
5. The user goes idle for 15 minutes. After that he visits some other website. He spends 20 minutes there.
6. The user again comes back to the original website. However he is coming back there after 35 minutes, which is beyond the limit of 30 minutes. This means that the first session has expired. A new session is now created. There are again 30 minutes remaining before the second session gets expired.
7. So for the first session there were 3 page views made. The second session currently contains 1 page view.

Google Analytics uses the same time based expiration to count sessions. However it has 2 extra rules too. Read How a web session is defined in Google Analytics to know more.

Implementing Session Analytics in Code

To implement this idea in Javascript, we will create a local storage item expiry-ts that will store the expiration timestamp of current session. There is another item session-id that stores the id of the current session.

Cookies can also be used to store data, however creating and updating values is not direct. So WebStorage API is used here.

• If expiry-ts or session-id is not present, then we need to create both these items. session-id will hold a new session id. expiry-ts will hold expiration timestamp (current timestamp + 30 minutes).
• If both items are present, then expiry-ts is compared with the current timestamp. If current timestamp does not exceed expiration timestamp, it means that session is the same. We will need to reset expiry-ts to the current timestamp + 30 minutes.
• If current timestamp exceeds expiry-ts, it means that the previous session is expired. We need to create a new session-id, and update expiry-ts to current timestamp + 30 minutes.

// current timestamp in seconds
var current_ts = Math.floor(Date.now() / 1000);

// if session-id local storage item does not exist
// if expiry-ts local storage item does not exist
// if session time has expired
if(localStorage.getItem('session-id') === null || localStorage.getItem('expiry-ts') === null || current_ts > parseInt(localStorage.getItem('expiry-ts'), 10)) {
	// create a new session with a random id and store
	// random id here is a concat of rand(11111111, 99999999) and timestamp
	var session_id = [(Math.floor(Math.random() * (99999999 - 11111111 + 1)) + 11111111), Date.now()].join('');
	localStorage.setItem('session-id', session_id);
}

// set expiry to current timestamp + 30 minutes
localStorage.setItem('expiry-ts', current_ts + 1800);