Home

Awesome

react-i13n-mixpanel

Mixpanel plugin for react-i13n

npm version Build Status

Features

Install

npm install react-i13n-mixpanel

Usage

You will need to create a instance of react-i13n-mixpanel first, then use getPlugin to get the plugin object, then pass it into setupI13n provided by react-i13n, then it will help to decorate your Top Level Component with i13n react-i13n-mixpanel plugin functionalities.

var reactI13nMixpanel = require('react-i13n-mixpanel');
var setupI13n = require('react-i13n').setupI13n;

var reactI13nMixpanel = new ReactI13nMixpanel([your token]); // create reactI13nMixpanel instance with your token
// or
var reactI13nMixpanel = new ReactI13nMixpanel({
    token: [mandatory, your token],
    config: [optional, Mixpanel config by default "{}"],
    name: [optional, customized instance name]
}); // create reactI13nMixpanel instance with config object

// Suppose that Application is your top level component, use setupI13n with this plugin
Application = setupI13n(Application, {}, [reactI13nMixpanel.getPlugin()]);

Pageview Event

Click Event

You can integrate I13nAnchor provided by react-i13n to track the normal links.

var I13nAnchor = require('react-i13n').I13nAnchor;

// in template, will fire event beacon as mixpanel.track('click', {'category': 'foo', 'action': 'click', label: 'Foo'});
<I13nAnchor i13nModel={{category: 'foo', action: 'click'}}>Foo</I13nAnchor>

You can also integrate integrate createI13nNode or I13nMixin to get your custom component be tracked


var createI13nNode = require('react-i13n').createI13nNode;
var Foo = React.createClass({
    ...
});

Foo = createI13nNode(Foo, {
    isLeafNode: true,
    bindClickEvent: true,
    follow: false
});

// in template
<Foo i13nModel={{category: 'foo', action: 'click', label: 'Foo'}}>
    // if Foo is clicked, it will fire event beacon as mixpanel.track('click', {'category': 'foo', 'action': 'click', label: 'Foo'});
    ...
</Foo>

var I13nMixin = require('react-i13n').I13nMixin;
var Foo = React.createClass({
    mixins: [I13nMixin],
    // you can set the default props or pass them as props when you are using Foo
    getDefaultProps: {
        isLeafNode: true,
        bindClickEvent: true,
        follow: false
    }
    ...
});

// in template
<Foo i13nModel={{category: 'foo', action: 'click', label: 'Foo'}}>
    // if Foo is clicked, it will fire event beacon as mixpanel.track('click', {'category': 'foo', 'action': 'click', label: 'Foo'});
    ...
</Foo>

For better instrumentation integration, you can leverage the inherit architecture, e.g., create a parent and define the category with default tracker, or specify tracker, so that all the links inside will apply it.

Tracker Settings

You can also use the following methods to set properties of Mixpanel like Super properties or User properties.

var userId = 'aa4ebd41203df5b8639e9fe48d4c6c7de7c4b053';
var dimension1 = 'administrator';
ReactI13n.getInstance().execute('setUsername', { userId: userId });
ReactI13n.getInstance().execute('setSuperProperties', { dimension1: dimension1 });
ReactI13n.getInstance().execute('setUserProperties', { dimension1: dimension1 });
ReactI13n.getInstance().execute('setUserPropertiesOnce', { dimension1: dimension1 });