nfl/react-metrics

$ npm install --save react-metrics

// Application.js
import {metrics} from "react-metrics";

const config = {
    vendors: [{
        name: "Google Analytics",
        api: new GoogleAnalytics({
            trackingId: "UA-********-*"
        })
    }],
    pageViewEvent: "pageLoad",
    pageDefaults: () => {
        return {
            siteName: "My Web Site",
            ...
        };
    }
}

// Application.js
class Application extends React.Component {
    render() {
        return (
            {this.props.children}
        );
    }
}
export default metrics(config)(Application);

// Application.js
@metrics(config)
class Application extends React.Component {
    render() {
        return (
            {this.props.children}
        );
    }
}

// PaginationComponent.js
class PaginationComponent extends React.Component {
    render() {
        const {commentId, totalPage, currentPage} = this.props;
        return (
            <ul>
                <li className={currentPage > 0 ? "active" : ""}>
                    <a
                        href="#"
                        data-metrics-event-name="commentPageClick"
                        data-metrics-comment-id={commentId}
                        data-metrics-page-num={currentPage - 1}>
                        Back
                    </a>
                </li>
                <li>...</li>
                <li className={currentPage < totalPage - 1 ? "active" : ""}>
                    <a
                        href="#"
                        data-metrics-event-name="commentPageClick"
                        data-metrics-comment-id={commentId}
                        data-metrics-page-num={currentPage + 1}>
                        Next
                    </a>
                </li>
            </ul>
        );
    }
}

import {MetricsElement} from "react-metrics";
// PaginationComponent.js
class PaginationComponent extends React.Component {
    render() {
        const {commentId, totalPage, currentPage} = this.props;
        return (
            <ul>
                <li className={currentPage > 0 ? "active" : ""}>
                    <MetricsElement
                        element="a"
                        href="#"
                        data-metrics-event-name="commentPageClick"
                        data-metrics-comment-id={commentId}
                        data-metrics-page-num={currentPage - 1}>
                        <span className="button">Back</span>
                    </MetricsElement>
                </li>
                <li>...</li>
                <li className={currentPage < totalPage - 1 ? "active" : ""}>
                    <MetricsElement
                        element="a"
                        href="#"
                        data-metrics-event-name="commentPageClick"
                        data-metrics-comment-id={commentId}
                        data-metrics-page-num={currentPage + 1}>
                        <span className="button">Next</span>
                    </MetricsElement>
                </li>
            </ul>
        );
    }
}

// PageComponent.js
// Must be a "route handling" component: <Route path="my-page" component={PageComponent}/>

import {exposeMetrics, PropTypes} from "react-metrics";

@exposeMetrics
class PageComponent extends React.Component {
    static contextTypes = {
        metrics: PropTypes.metrics
    }
    static willTrackPageView() {
        // first, suppress the automatic call.
        return false;
    }
    componentDidMount() {
        const {value1, value2} = this.props;
        this.context.metrics.pageView({value1, value2});
    }
    render () {
        ...
    }
}

// PageComponent.js "route-handler
// A route handling component: <Route path="my-page" component={PageComponent}/>

import {exposeMetrics} from "react-metrics";

@exposeMetrics
class PageComponent extends React.Component {
    static willTrackPageView(routeState) {
        // return a promise that resolves to custom data.
        return yourPromise.then(data => {
            // data gets merged with `pageDefaults` object
            return data;
        });
    }
    render () {
        ...
    }
}

import {PropTypes} from "react-metrics";

class YourComponent extends React.Component {
    static contextTypes = {
        metrics: PropTypes.metrics
    }

    onSomethingUpdated(value) {
        this.context.metrics.track("customEventName", {value});
    }

    render() {
        ...
    }
}

// creating middleware for Redux

import {createMetrics} from "react-metrics";

const metrics = createMetrics(config);

export default function metricsMiddleware() {
    return next => action => {
        const returnValue = next(action);
        switch (action.type) {
            case ActionTypes.ROUTE_CHANGE:
                const {location} = action;
                const paths = location.pathname.substr(1).split("/");
                const routeState = location;
                metrics.setRouteState(routeState);
                metrics.api.pageView({
                    category: !paths[0] ? "landing" : paths[0]
                });
        }
        return returnValue;
    };
}