Awesome

react-i13n-segment

Segment plugin for react-i13n

Features

• Integrate react-i13n to provide instrumentation approach using Segment.
• 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-segment

Usage

You will need to create a instance of react-i13n-segment 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-segment plugin functionalities.

var reactI13nSegment = require('react-i13n-segment');
var setupI13n = require('react-i13n').setupI13n;

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

// Suppose that Application is your top level component, use setupI13n with this plugin
Application = setupI13n(Application, {}, [reactI13nSegment.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 Segment

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 segment.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 segment.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 segment.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 Segment 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 });