Home

Awesome

react-i13n-segment

Segment plugin for react-i13n

npm version Build Status

Features

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

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 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 });