Building the Realtime User Experience

Customized Analytics

The paid realtime analytics services are useful to get an overview of what is happening on a website in realtime. However, the applications that we’ve been building so far have not been limited to the web browser. In order to properly figure out the current status of our applications, we’re going to need to build a custom solution that can handle tracking the different types of actions our users take. In this section we’ll build a simple analytics application that can track users as they navigate a website, but also tracks any other arbitrary action that happens outside of a web browser.

Sending Tracking Pings with JavaScript

For the web-browser-based part of collecting these analytics, we’re going to use a simple JavaScript-based implementation. The JavaScript file that we build can be hosted either on the same machine as the main web application or somewhere else entirely. Once this JavaScript is ready, we’ll include it from each page of the site and run a function to start tracking user actions. To get started, create a file called realtime-analytics.js and insert the following code:

var Analytics = { uid: 0, start_time: 0, last_activity: 0, ping_url: "{{ ping_url }}", start: function() { Analytics.start_time = new Date().getTime(); Analytics.last_activity = Analytics.start_time; // ensure we have a user ID Analytics.setupUID(); // setup the event listeners var updateLastActivity = function() { Analytics.last_activity = new Date().getTime(); }; window.addEventListener('click', ...