@grove/react-i13n-ga

    0.2.0 • Public • Published

    react-i13n-ga

    Google Analytics plugin for react-i13n

    npm version Build Status

    Features

    Install

    npm install react-i13n-ga
    

    Usage

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

    var reactI13nGoogleAnalytics = require('react-i13n-ga');
    var setupI13n = require('react-i13n').setupI13n;
    var reactI13nGoogleAnalytics = new ReactI13nGoogleAnalytics([your tracking id]); // create reactI13nGoogleAnalytics instance with your tracking id
    // Suppose that Application is your top level component, use setupI13n with this plugin
    Application = setupI13n(Application, {}, [reactI13nGoogleAnalytics.getPlugin()]);

    Pageview Event

    var ReactI13n = require('react-i13n').ReactI13n;
     
    // fire pageview at whatever you want, typically we do it at componentDidMount
    ReactI13n.getInstance().execute('pageview', {
        page: [page url], // get the page url, or keep empty to let google analytics handle it
        title: [page title] // get the page title, or keep empty to let google analytics handle it
    });

    Click Event

    • Integrate event tracking
    • Define the keys in i13nModel:
      • category - Typically the object that was interacted with, default set as all.
      • action - The type of interaction, default set as click.
      • label - Useful for categorizing events, default set as the value of i13nNode.getText.
      • value - Values must be non-negative. Useful to pass counts (e.g. 4 times).

    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 ga('send', 'event', 'foo', 'click', '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 ga('send', 'event', 'foo', 'click', '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 ga('send', 'event', 'foo', 'click', 'Foo');
        ...
    </Foo>

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

     
    var createI13nNode = require('react-i13n').createI13nNode;
    var I13nAnchor = require('react-i13n').createI13nNode;
    var Foo = React.createClass({
        ...
        render: function () {
            return (
                // all the links inside Foo will apply category=foo as their i13n model
                <I13nAnchor href="/foo">...</I13nAnchor>
                <I13nAnchor href="/bar">...</I13nAnchor>
                <I13nAnchor href="/baz">...</I13nAnchor>
            );
        }
    });
     
    Foo = createI13nNode(Foo, {
        isLeafNode: false,
        bindClickEvent: false,
        follow: false
    });
     
    // in template
    <Foo i13nModel={{category: 'foo'}} />

    Install

    npm i @grove/react-i13n-ga

    DownloadsWeekly Downloads

    4

    Version

    0.2.0

    License

    MIT

    Last publish

    Collaborators

    • avatar
    • avatar