Do you want to know how long a user has spent on your website? Here's how!
The Data
For each page a user visits, you'll need to store the following data:
user_id
: a way to uniquely identify your userpage
: the page the user visited; for example/index.html
opened_at
: the time the user opened the pagelast_checkin
: the last time we recorded the user on that page
The Process
We're going to have two major actions:
- When the user first visits the page, we'll execute some Javascript to create a new data point on the server.
- At some regular interval (let's say every 10 seconds), we'll update the
last_checkin
data on the server.
The Endpoints
Let's assume that we're using the REST endpoint /data
. We'll have POST /data
to create a new datapoint and PUT /data/:id
to update the last_checkin
of that datapoint.
Of course, you would need to build this route on your server yourself, and store the data that is sent to it. Perhaps a subsequent blog post will cover how that can be achieved.
The Javascript
In the pages you want to track, you can include the following Javascript. The example uses fetch
, which you will need to polyfill for full browser compatibility.
(function () {
var checkInInterval = 10000; // check in every 10 seconds
var userId = 1; // you'll need to figure out how you get the user id
var data = {
user_id: userId,
page: window.location.pathname,
opened_at: Date.now()
};
// create a new datapoint on the server
fetch('/data', {
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
method: 'POST',
body: JSON.stringify(data)
}).then(function (res) { return res.json() }).then(function (data) {
setInterval(function () {
// check in
data.last_checkin = Date.now();
fetch('/data/' + data.id, {
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
method: 'PUT',
body: JSON.stringify(data)
});
}, checkInInterval);
})
})();
Hope this helps with your tracking needs! Of course, the easier shortcut is to use something like Google Analytics which will do it out of the box for you.