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 = ;var setupI13n = setupI13n; var reactI13nSegment = your token; // create reactI13nSegment instance with your token// orvar 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 pluginApplication = ;
Pageview Event
- Integrate page tracking,
Click Event
- Integrate track method
- Define the keys in
i13nModel
:action
- The eventName of the interaction, default set asclick
.category
- The category of the interaction, default set asall
.label
- The label of the interaction, default set as''
.value
- The value of the interaction, default set as0
.nonInteraction
- The nonInteraction of the interaction, default set asfalse
.- 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 = 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 = createI13nNode;var Foo = React; Foo = ; // 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 = I13nMixin;var Foo = React; // 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;ReactI13n;ReactI13n;ReactI13n;