Mixpanel 2.2 within an AMD structured web-app - e.g. require.js

Question

I\'m attempting to make use of Mixpanel event tracking in a single page site based on Backbone.js and require.js.

Looking at the snippet that Mixpanel provide for cut-an

Answer 1

Following solution works for mixpanel api 2.2

add mixpanel with following shim -

path : {
    'mixpanel' : '//cdn.mxpnl.com/libs/mixpanel-2.2.min'
}

shim : {
    'mixpanel' : {
        exports : 'mixpanel'
    },
}

and use following requirejs module instead of the the snippet given by mixpanel -

define('mixpanel-snippet', [], function(){
    var b = window.mixpanel || [];
    if (!b.__SV) {
        var i, g;
        window.mixpanel = b;
        b._i = [];
        b.init = function (a, e, d) {
            function f(b, h) {
                var a = h.split(".");
                2 == a.length && (b = b[a[0]], h = a[1]);
                b[h] = function () {
                    b.push([h].concat(Array.prototype.slice.call(arguments, 0)))
                }
            }
            var c = b;
            "undefined" !==
            typeof d ? c = b[d] = [] : d = "mixpanel";
            c.people = c.people || [];
            c.toString = function (b) {
                var a = "mixpanel";
                "mixpanel" !== d && (a += "." + d);
                b || (a += " (stub)");
                return a
            };
            c.people.toString = function () {
                return c.toString(1) + ".people (stub)"
            };
            i = "disable track track_pageview track_links track_forms register register_once alias unregister identify name_tag set_config people.set people.set_once people.increment people.append people.track_charge people.clear_charges people.delete_user".split(" ");
            for (g = 0; g < i.length; g++)
                f(c, i[g]);
            b._i.push([a, e, d])
        };
        b.__SV = 1.2
    }
    b.init("YOUR TOKEN");
    require(['mixpanel'], function(mixpanel){});

    return b;
});

I simply took the snippet from mixpanel, removed the async mixpanel load and wrapped it in a requirejs module definition.

Change "YOUR TOKEN" at the bottom of the module.

Example use with a require call --

require([
    'mixpanel-snippet',
], function (mixpanel) {
        mixpanel.track("Landing Page with AMD SHIM");
});

EDIT: The second one is the right answer after a little modification. the way mixpanel script works is it needs the init call in the snippet to happen before the actual mixpanel load. the trick is to require mixpanel after the init call.i have edited the 2nd answer and removed the first one and here's the gist

EDIT: Answer to comment from @johanandren Requirejs follows AMD principle and the order in which scripts will load is not fixed. In case you need to load mixpanel before using mixpanel-snippet, following hack can be used.

//at the end of mixpanel-snippet code mentioned above force the script to block until mixpanel is loaded

b.init("YOUR TOKEN");
var wait = true;
require(['mixpanel'], function(mixpanel){wait = false;});
while(wait){}
return b;

** it violates the Async load features of AMD, forces the script to block plus even in vanila mixpanel snippet the load is async and availability for initial api calls is not guaranteed