Bart Simons

website

A 1 post collection


Interactive website tracking with NodeJS - Proof of Concept

 •  Filed under node.js, node, interactive, website, tracking

Interactive website tracking is the future! Why do you want to aggregate static data if you can make your data dynamic? This mindset motivated me to make a small interesting proof of concept to show off the capabilities of dynamic tracking.

The development stack

I decided to make my small app in JavaScript, both for the server and client. Data transfer had to be effective, modern and bandwidth-effective, so I chose websockets over legacy AJAX technology.

I used this bootstrap form as an example:

<form>  
    <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
    <div class="form-group">
        <label for="exampleInputFile">File input</label>
        <input type="file" id="exampleInputFile">
        <p class="help-block">Example block-level help text here.</p>
    </div>
    <div class="checkbox">
        <label>
        <input type="checkbox"> Check me out
        </label>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>  

And the page has this client-side code:

$(document).ready(function()
{
    new Fingerprint2().get(function(result, components)
    {
        var sessionidentifier = "ID"+Date.now().toString()

        const socket = new WebSocket("ws://formstream:8080")

        var interval = 750

        var eventarray = []

        setInterval(function()
        {
            if (eventarray.length != 0)
            {
                socket.send(JSON.stringify(eventarray))
                eventarray = []
            }
        }, interval)

        $('form').on("click textInput", function(e)
        {
            var eventroot = {}
            eventroot['session'] = sessionidentifier
            eventroot['event'] = e.type
            eventroot['id'] = e.target.id
            eventroot['value'] = e.target.value
            eventroot['timestamp'] = Date.now()
            eventarray.push(eventroot)
        })
    })
})

As shown in the code sample above, I used fingerprintjs2 to create a unique browser identifier. This identifier can not be used as a personal identifier, but rather a unique anonymous identifier that matches your 'specific browser'. After a fingerprint has been generated, the script continues to run a continuous loop defined as an interval, which can be set to your desired value in a variable.

A UNIX epoch timestamp is generated for every event taking place, linked to that is every bit of event information that matters:

  • The event itself
  • The DOM object ID
  • The object's value

All this information is stored inside a JSON object. Once an event takes place, the JSON object gets pushed to the eventarray array.

Once the script reaches the end of an interval, the JSON objects stored in the eventarray get stringified and pushed to the websocket server but only in the case where there are more than 0 JSON objects available in the array, just to prevent the script from sending empty data on every interval.

The server application
var ws = require('nodejs-websocket')

var server = ws.createServer(function (conn)  
{
        console.log("NEW CONNECTION!")
        conn.on("text", function (str)
        {
                console.log(str)
        })
        conn.on("close", function (code, reason)
        {
                console.log("CONNECTION CLOSED.")
        })
}).listen(8080)

The server application is quite simple, it runs on NodeJS and only requires the nodejs-websocket dependency. No big deal, as it only functions as a console application that prints the received data from the client.

Server-sided console output

Remember that this is just a proof-of-concept that just captures form events. In reality you could capture any possible event and put it in a server side database. I hope that this article was informative enough for you, stay tuned for more 👍🏽