react-i13n-mixpanel

Mixpanel plugin for react-i13n

Features

• Integrate react-i13n to provide instrumentation approach using Mixpanel.
• react-i13n handles the beaconing management and handle the click events, this plugin provides event handlers to handle these events.

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

• Integrate page tracking,

Click Event

• Integrate track method
• Define the keys in i13nModel:
  • action - The eventName of the interaction, default set as click.
  • category - The category of the interaction, default set as all.
  • label - The label of the interaction, default set as ''.
  • value - The value of the interaction, default set as 0.
  • nonInteraction - The nonInteraction of the interaction, default set as false.
  • The all i13nModel will be send as properties to Mixpanel

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.