An Example of Mixpanel inside a SPA

exampleSPAimplementations.js

//an example of Mixpanel implemented in a frameworkless SPA
//docs: https://developer.mixpanel.com/docs/javascript
//by AK

const app = {
    init: function() {
        console.log("app init!");
        this.cacheDOM();
        this.bindEvents();
        this.authUser().then((user) => {
            //identify the user to Mixpanel
            mixpanel.identify(user.uuid);

            //make a user profiles
            mixpanel.people.set({
                $name: user.name,
                uuid: user.uuid,
                $email: user.email,
                role: user.userType
            });
        });
        this.getAppData().then(() => {
            this.render();
            //tell mixpanel the page loaded
            mixpanel.track("app loaded");

            //pass the app state to mixpanel
            //these params are available to every subsquent .track() call
            //they can be updated whenever we need
            mixpanel.register({
                "current theme": app.storage.theme,
                "# of foos": app.DOM.foos.length,
                "something about bar": [app.DOM.bar[0], app.DOM.bar[1], app.DOM.bar[1]],
                "dont forget qux" : getQuxState()
            });

            //tell mixpanel to start a session; increment total # of sessions
            mixpanel.track("Session Start");
            mixpanel.people.increment("# of sessions");

            //time the session, tell mixpanel the duration
            mixpanel.time_event("Session End");
            window.onbeforeunload = function() {
                mixpanel.track("Session End");
            };
        });
    }
    //presumably a really great app would follow!
};