Client Side Session in Mixpanel

Many analytics tools make use of a session identifier which is essentially a unique token that can be used to uniquely identify an end-user’s session in any application.

On the web, sessions are challenging to track, because there is no guarantee that the browser will notify javascript when the connection is terminated.

However, this should not stop us from doing our best to approximate the user’s session with a very low margin of error, based on some rules of our own design.

This article details how you can use vanilla javascript in combination with the Mixpanel Javascript library to add unique and flexible session ID’s to every single event you send to Mixpanel with minimal configuration.

Summary

We’re going to build a mp_session_config object with an arbitrary timeout (30 minutes in the example).

This object’s methods will take care of getting, setting, and checking whether a new session id needs to be created.

When successfully integrated, you will see two new properties on every single Mixpanel event, a session ID (which looks like this: dd19d734-9d9a-9dc6-e110-eaa0835b297b) and a last event time property (which looks like this: 1544464992558)

If you do not wish to see any of these properties in the Mixpanel interface, you may use Lexicon to hide them.

You can copy-paste the configuration below, the comments should explain how it works.

Configuration

const mp_session_config = {
    //thirty minutes in milliseconds
    timeout: 1800000,

    //safe client-side function for generating session_id
    //from: https://stackoverflow.com/a/105074
    get_Session_id: function() {
        function s4() {
            return Math.floor((1 + Math.random()) * 0x10000)
                .toString(16)
                .substring(1);
        }
        return s4()+s4()+'-'+s4()+'-'+s4()+'-'+s4()+'-'+s4()+s4()+s4();
    },

    //set a new session id
    set_Session_id: function() {
        mixpanel.register({
            "session ID": mp_session_config.get_Session_id()
        });
    },

    //check for a new session id
    check_Session_id: function() {
        // check #1 do they have a session already?
        if (!mixpanel.get_property("last event time")) {
            mp_session_config.set_Session_id();
        }

        if (!mixpanel.get_property("session ID")) {
            mp_session_config.set_Session_id();
        }

        //check #2 did the last session exceed the timeout?
        if (Date.now() - mixpanel.get_property("last event time") > mp_session_config.timeout) {
            mp_session_config.set_Session_id();
        }
    }
}

Implementation

The best time to check for a session is after the Mixpanel JS library had loaded; you can achieve this by passing a second argument to .init() which is a configuration object. This object accepts a loaded key whose value is a callback which will be run after Mixpanel is loaded.

We’ll check for our session after Mixpanel has loaded. Then we’re going to add a patch to make sure that the session is checked before every subsequent track() call. This ensures our code will work on Single Page Applications (where there is no expected page refresh).

mixpanel.init("your-project-token", {
    loaded: function(mixpanel) {
        //mixpanel has loaded

        //check for a session_id ... if any of the checks fail set a new session id
        mp_session_config.check_Session_id();

        //monkey patch to make sure that mixpanel.track() always checks for a session id
            const originalTrack = mixpanel.track;
            mixpanel.track = function() {
                // console.log('session checked');
                mp_session_config.check_Session_id();
                mixpanel.register({"last event time": Date.now()});
                originalTrack.apply(mixpanel, arguments);
            }      


        // now write your own mixpanel tracking code, listeners, etc…

    }});

That’s it! If you see this in Mixpanel then it's working correctly:

Screen_Shot_2019-01-18_at_11.01.54_AM.png

Is this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.