Making a User Behavior Tracking App w/ Javascript (P1)

#javascript #tutorial #webdev

Welcome! This post has an associated video if you're more inclined to follow along with the actual coding process. Let's outline some general information about the project so you can see if it's something your interested in.

Goal:
To create an application/script that tracks a user's behavior while interacting with an online form.

Purpose:
To detect if any parts of a form take longer to fill out or multiple tries in an effort to determine if there are areas in our forms that could be made clearer.

Applications:
My company works tangentially alongside the healthcare field. Many of our applications have multi-page intake forms that request data/information about clients. With healthcare being as complex as it is, often times there can be miscommunications or unclear directions about which forms need which information. If we could detect where our users are having trouble filling out our forms, we would then be empowered to go in and update the form to make it easier on our users!

Code:
In this first post (and video), we start off with some very simple event listeners. The four events we listen for are

When these events fire, we simply record the relative time at which the event occurred so we can later cross compare between related events. In our case, we are using the performance interface, which stores functionality typically used to acquire performance related information about a user's session. Contained within this interface is the now() function that returns the milliseconds that have gone by since the start of the session. Given that we only care about the length of time a user spends interacting with input elements, this works well for our purposes. It is important to note, the performance.now() function rounds the value to the nearest millisecond, but that is more than accurate enough for our use case.

Here is what our starter code looks like:

const HAWK = (() => {
    let _data = {};

    const _trackTextInput = (elementId) => {
        const _d = document;

        _data[elementId] = {};
        _data[elementId].focusBlur = [[],[]]; // index0 arr = focus
        _data[elementId].mouseOver = [[],[]];

        _d.getElementById(elementId).addEventListener('focus', 
        () => {
                _data[elementId].focusBlur[0].push(performance.now());
        });

        _d.getElementById(elementId).addEventListener('blur', 
        () => {
            _data[elementId].focusBlur[1].push(performance.now());
        });

        _d.getElementById(elementId).addEventListener('mouseover', 
        () => {
            _data[elementId].mouseOver[0].push(performance.now());
        });

        _d.getElementById(elementId).addEventListener('mouseleave', 
        () => {
            _data[elementId].mouseOver[1].push(performance.now());
        });
    };

    const _results = () => {
        console.log(_data);
    };

    // =================================================================
    return {
        trackTextInput(elementId) {
            _trackTextInput(elementId);
        },
        results() {
            _results()
        }
    };
})();

The name 'HAWK' doesn't stand for anything. I just thought it sounded like a fun name to go with for this project. I realize now that it probably sounds a little menacing, but that's not the intent! Haha.

Helpful Resources:

If you're unfamiliar with immediately invoked function expressions (IIFE's), I found this post to be incredibly helpful.
If you'd like to read up on the performance interface and all that it has to offer, MDN is always a great go to.