├── .eslintignore
├── .gitignore
├── docs
├── README.md
├── api
│ ├── README.md
│ ├── Core.md
│ └── ReactMetrics.md
├── Guides.md
└── GettingStarted.md
├── .babelrc
├── scripts
├── teardown.sh
├── setup.sh
└── sauce
│ ├── sauce_connect_block.sh
│ ├── sauce_connect_teardown.sh
│ └── sauce_connect_setup.sh
├── examples
├── redux
│ ├── basic
│ │ ├── ActionTypes.js
│ │ ├── index.html
│ │ ├── action.js
│ │ ├── counter.js
│ │ ├── metricsMiddleware.js
│ │ ├── metrics.config.js
│ │ └── app.js
│ └── index.html
├── no-router-lib
│ ├── basic
│ │ ├── home.js
│ │ ├── index.html
│ │ ├── page.js
│ │ ├── metrics.config.js
│ │ └── app.js
│ └── index.html
├── react-router
│ ├── basic
│ │ ├── home.js
│ │ ├── index.html
│ │ ├── user.js
│ │ ├── manual-page-view.js
│ │ ├── async-page-view.js
│ │ ├── metrics.config.js
│ │ └── app.js
│ ├── metricsElement
│ │ ├── home.js
│ │ ├── index.html
│ │ ├── metrics.config.js
│ │ ├── app.js
│ │ └── page.js
│ └── index.html
├── global.css
├── index.html
├── webpack.config.js
└── vendors
│ ├── GoogleAnalytics.js
│ ├── GoogleTagManager.js
│ └── AdobeTagManager.js
├── src
├── core
│ ├── utils
│ │ ├── isPromise.js
│ │ ├── attr2obj.js
│ │ └── extractApis.js
│ ├── ActionTypes.js
│ ├── createService.js
│ └── useTrackBindingPlugin.js
├── react
│ ├── findRouteComponent.js
│ ├── PropTypes.js
│ ├── locationEquals.js
│ ├── isLocationValid.js
│ ├── getRouteState.js
│ ├── exposeMetrics.js
│ ├── MetricsElement.js
│ └── metrics.js
└── index.js
├── .editorconfig
├── test
├── metricsMock.js
├── nodeUtils.js
├── execSteps.js
├── TestService.js
├── ReactMetrics
│ ├── getRouteState.spec.js
│ ├── locationEquals.spec.js
│ ├── exposeMetrics.spec.js
│ ├── willTrackPageView.spec.js
│ ├── MetricsElement.spec.js
│ └── metrics.spec.js
├── metrics.config.js
└── core
│ ├── attr2obj.spec.js
│ ├── extractApis.spec.js
│ ├── createService.spec.js
│ └── useTrackBindingPlugin.spec.js
├── karma.conf.cloud.js
├── karma.conf.ci.js
├── .eslintrc
├── .travis.yml
├── webpack.config.js
├── LICENSE
├── CONTRIBUTING.md
├── karma.conf.js
├── karma.conf.bs.js
├── package.json
├── karma.conf.sauce.js
├── CHANGELOG.md
└── README.md
/.eslintignore:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | lib/
3 | dist/
4 | coverage/
5 | npm-debug.log
6 | .DS_Store
7 | .idea
8 |
--------------------------------------------------------------------------------
/docs/README.md:
--------------------------------------------------------------------------------
1 | ## Table of Contents
2 |
3 | * [Getting Started](/docs/GettingStarted.md)
4 | * [API](/docs/api)
5 | * [Guides](/docs/Guides.md)
6 |
--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["es2015-without-strict", "stage-0", "react"],
3 | "plugins": [
4 | "transform-decorators-legacy"
5 | ]
6 | }
7 |
--------------------------------------------------------------------------------
/scripts/teardown.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 |
3 | set -e -o pipefail
4 |
5 | if [ "$USE_CLOUD" = "true" ]; then
6 | ./scripts/sauce/sauce_connect_teardown.sh
7 | fi
8 |
--------------------------------------------------------------------------------
/examples/redux/basic/ActionTypes.js:
--------------------------------------------------------------------------------
1 | export default {
2 | INCLEMENT: "INCLEMENT",
3 | DECLEMENT: "DECLEMENT",
4 | ROUTE_CHANGE: "ROUTE_CHANGE"
5 | };
6 |
--------------------------------------------------------------------------------
/src/core/utils/isPromise.js:
--------------------------------------------------------------------------------
1 | // to support Promise-like object.
2 | export default function isPromise(value) {
3 | return value && typeof value.then === "function";
4 | }
5 |
--------------------------------------------------------------------------------
/scripts/setup.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 |
3 | set -e -o pipefail
4 |
5 | if [ "$USE_CLOUD" = "true" ]; then
6 | ./scripts/sauce/sauce_connect_setup.sh
7 | ./scripts/sauce/sauce_connect_block.sh
8 | fi
9 |
--------------------------------------------------------------------------------
/examples/no-router-lib/basic/home.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | class Home extends React.Component {
4 | render() {
5 | return Home ;
6 | }
7 | }
8 |
9 | export default Home;
10 |
--------------------------------------------------------------------------------
/examples/react-router/basic/home.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | class Home extends React.Component {
4 | render() {
5 | return Home ;
6 | }
7 | }
8 |
9 | export default Home;
10 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | # editorconfig.org
2 | root = true
3 |
4 | [*]
5 | indent_style = space
6 | indent_size = 4
7 | end_of_line = lf
8 | charset = utf-8
9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 |
--------------------------------------------------------------------------------
/examples/react-router/metricsElement/home.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | class Home extends React.Component {
4 | render() {
5 | return Home ;
6 | }
7 | }
8 |
9 | export default Home;
10 |
--------------------------------------------------------------------------------
/scripts/sauce/sauce_connect_block.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 |
3 | # Wait for Connect to be ready before exiting
4 | printf "Connecting to Sauce."
5 | echo "$BROWSER_PROVIDER_READY_FILE"
6 | while [ ! -f $BROWSER_PROVIDER_READY_FILE ]; do
7 | printf "."
8 | sleep .5
9 | done
10 | echo "Connected"
11 |
--------------------------------------------------------------------------------
/src/react/findRouteComponent.js:
--------------------------------------------------------------------------------
1 | import {getMountedInstances} from "./exposeMetrics";
2 |
3 | export default function findRouteComponent() {
4 | const routes = getMountedInstances();
5 | const component = routes && routes.length > 0 && routes[routes.length - 1];
6 | return component;
7 | }
8 |
--------------------------------------------------------------------------------
/test/metricsMock.js:
--------------------------------------------------------------------------------
1 | export default {
2 | listen: () => {},
3 | setRouteState: () => {},
4 | useTrackBinding: () => {},
5 | destroy: () => {},
6 | get enabled() {
7 | return true;
8 | },
9 | api: {
10 | pageView() {},
11 | track() {}
12 | }
13 | };
14 |
--------------------------------------------------------------------------------
/examples/redux/index.html:
--------------------------------------------------------------------------------
1 |
2 | Redux Example
3 | React Router Example
3 | React Metrics Examples
3 | React Metrics Examples
6 |
11 |
--------------------------------------------------------------------------------
/karma.conf.cloud.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable camelcase */
2 | module.exports = function (config) {
3 | if (process.env.BROWSER_TEST === "bs" && process.env.BROWSER_STACK_USERNAME) {
4 | require("./karma.conf.bs.js")(config);
5 | } else if (process.env.SAUCE_USERNAME) {
6 | require("./karma.conf.sauce.js")(config);
7 | } else {
8 | process.exit(1);
9 | }
10 | };
11 |
--------------------------------------------------------------------------------
/examples/react-router/index.html:
--------------------------------------------------------------------------------
1 |
2 | React Router Example
3 | Redux Example
3 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/examples/react-router/basic/index.html:
--------------------------------------------------------------------------------
1 |
2 | React Router Example
3 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/examples/no-router-lib/basic/index.html:
--------------------------------------------------------------------------------
1 |
2 | React Router Example
3 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/examples/react-router/metricsElement/index.html:
--------------------------------------------------------------------------------
1 |
2 | React Router Example
3 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/examples/redux/basic/action.js:
--------------------------------------------------------------------------------
1 | import ActionTypes from "./ActionTypes";
2 |
3 | export function inclement(id) {
4 | return {
5 | type: ActionTypes.INCLEMENT,
6 | id
7 | };
8 | }
9 |
10 | export function declement(id) {
11 | return {
12 | type: ActionTypes.DECLEMENT,
13 | id
14 | };
15 | }
16 |
17 | export function routeChange(location) {
18 | return {
19 | type: ActionTypes.ROUTE_CHANGE,
20 | location
21 | };
22 | }
23 |
--------------------------------------------------------------------------------
/test/nodeUtils.js:
--------------------------------------------------------------------------------
1 | export function addChildToNode(node, {tagName, attrs, content}) {
2 | const child = document.createElement(tagName);
3 | if (attrs) {
4 | Object.keys(attrs).forEach(key => {
5 | child.setAttribute(key, attrs[key]);
6 | });
7 | }
8 | if (content) {
9 | child.innerHTML = content;
10 | }
11 | node.appendChild(child);
12 | return child;
13 | }
14 |
15 | export function removeChildFromNode(node) {
16 | while (node.firstChild) {
17 | node.removeChild(node.firstChild);
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/karma.conf.ci.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable camelcase */
2 | module.exports = function (config) {
3 | config.set({
4 | singleRun: true
5 | });
6 |
7 | if (process.env.USE_CLOUD === "true") {
8 | require("./karma.conf.cloud.js")(config);
9 | } else {
10 | console.log("running default test on Chrome");
11 | config.set({
12 | customLaunchers: {
13 | Chrome_CI: {
14 | base: "Chrome",
15 | flags: ["--no-sandbox"]
16 | }
17 | },
18 | browsers: ["Chrome_CI"]
19 | });
20 | }
21 | };
22 |
--------------------------------------------------------------------------------
/test/execSteps.js:
--------------------------------------------------------------------------------
1 | // borrowed from https://github.com/rackt/react-router/blob/master/modules/__tests__/execSteps.js
2 | function execSteps(steps, done) {
3 | let index = 0;
4 |
5 | return function(...args) {
6 | if (steps.length === 0) {
7 | done();
8 | } else {
9 | try {
10 | steps[index++].apply(this, args);
11 |
12 | if (index === steps.length) {
13 | done();
14 | }
15 | } catch (error) {
16 | done(error);
17 | }
18 | }
19 | };
20 | }
21 |
22 | export default execSteps;
23 |
--------------------------------------------------------------------------------
/src/react/isLocationValid.js:
--------------------------------------------------------------------------------
1 | /**
2 | * `location` is a plain object which represents the current location in browser similar to document.location.
3 | * see https://github.com/rackt/history/blob/master/docs/Location.md
4 | *
5 | * @method isLocationValid
6 | * @param location
7 | * @returns {boolean}
8 | */
9 | export default function isLocationValid(location) {
10 | return (
11 | !!location &&
12 | typeof location === "object" &&
13 | location.hasOwnProperty("pathname") &&
14 | location.hasOwnProperty("hash") &&
15 | location.hasOwnProperty("search") &&
16 | location.hasOwnProperty("state")
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/examples/react-router/basic/user.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import PropTypes from "prop-types";
3 | import {exposeMetrics} from "react-metrics"; // eslint-disable-line import/no-unresolved
4 |
5 | @exposeMetrics class User extends React.Component {
6 | static propTypes = {
7 | params: PropTypes.object
8 | };
9 |
10 | static willTrackPageView(routeState) {
11 | return routeState.params;
12 | }
13 |
14 | render() {
15 | const {id} = this.props.params;
16 | return (
17 |
18 |
User id: {id}
19 |
20 | );
21 | }
22 | }
23 | export default User;
24 |
--------------------------------------------------------------------------------
/docs/api/README.md:
--------------------------------------------------------------------------------
1 | # API
2 |
3 | ### React Metrics Exports
4 |
5 | * [metrics(config, [options])(Component)](/docs/api/ReactMetrics.md#metrics)
6 | * [exposeMetrics](/docs/api/ReactMetrics.md#exposeMetrics)
7 | * [PropTypes](/docs/api/ReactMetrics.md#PropTypes)
8 | * [createMetrics(config)](/docs/api/ReactMetrics.md#createMetrics)
9 | * [MetricsElement](/docs/api/ReactMetrics.md#MetricsElement)
10 |
11 | ### Metrics API
12 |
13 | * [listen(callback)](/docs/api/Core.md#listen)
14 | * [setRouteState(routeState)](/docs/api/Core.md#setRouteState)
15 | * [useTrackBinding([rootElement], [attributePrefix])](/docs/api/Core.md#useTrackBinding)
16 | * [destroy()](/docs/api/Core.md#destroy)
17 | * [api](/docs/api/Core.md#api)
18 |
--------------------------------------------------------------------------------
/examples/redux/basic/counter.js:
--------------------------------------------------------------------------------
1 | import ActionTypes from "./ActionTypes";
2 |
3 | export default function counter(state, action) {
4 | const {id} = action;
5 | let nextState;
6 | switch (action.type) {
7 | case ActionTypes.INCLEMENT:
8 | nextState = {
9 | ...state,
10 | [`counter${id}`]: state[`counter${id}`] + 1
11 | };
12 | return nextState;
13 | case ActionTypes.DECLEMENT:
14 | nextState = {
15 | ...state,
16 | [`counter${id}`]: state[`counter${id}`] - 1
17 | };
18 | return nextState;
19 | default:
20 | return state;
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["eslint-config-nfl", "prettier"],
3 | "env": {
4 | "mocha": true
5 | },
6 | "globals": {
7 | "expect": true,
8 | "sinon": true
9 | },
10 | "plugins": [
11 | "prettier"
12 | ],
13 | "parser": "babel-eslint",
14 | "rules": {
15 | "prettier/prettier": ["error", {
16 | "printWidth": 80,
17 | "tabWidth": 4,
18 | "singleQuote": false,
19 | "trailingComma": "none",
20 | "bracketSpacing": false,
21 | "semi": true,
22 | "useTabs": false,
23 | "parser": "babylon",
24 | "jsxBracketSameLine": false
25 | }
26 | ]
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/test/TestService.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Metrics service class for testing.
3 | * @module TestService
4 | * @class
5 | * @internal
6 | */
7 | class TestService {
8 | constructor() {
9 | this.name = "Test Service";
10 | }
11 | pageView(...args) {
12 | return this.track(...args);
13 | }
14 | /**
15 | *
16 | * @method track
17 | * @param {String} eventName
18 | * @param {Object} params
19 | * @returns {Promise}
20 | * @internal
21 | */
22 | track(eventName, params) {
23 | return new Promise(resolve => {
24 | resolve({
25 | eventName,
26 | params
27 | });
28 | });
29 | }
30 | }
31 |
32 | export default TestService;
33 |
--------------------------------------------------------------------------------
/examples/react-router/basic/manual-page-view.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import exposeMetrics from "react-metrics"; // eslint-disable-line import/no-unresolved
3 | import PropTypes from "prop-types";
4 |
5 | @exposeMetrics class ManualPageView extends React.Component {
6 | static contextTypes = {
7 | metrics: PropTypes.metrics
8 | };
9 |
10 | static propTypes = {
11 | appName: PropTypes.string
12 | };
13 |
14 | static willTrackPageView() {
15 | return false;
16 | }
17 |
18 | componentDidMount() {
19 | const {appName} = this.props;
20 | this.context.metrics.pageView({appName});
21 | }
22 |
23 | render() {
24 | return Manual Page View Example ;
25 | }
26 | }
27 |
28 | export default ManualPageView;
29 |
--------------------------------------------------------------------------------
/src/core/utils/attr2obj.js:
--------------------------------------------------------------------------------
1 | const attr2obj = (elem, prefix = "data") => {
2 | const attrs = elem.attributes;
3 | const dataAttrs = {};
4 | const rdashAlpha = /-([\da-z])/gi;
5 | const fcamelCase = (all, letter) => {
6 | return letter.toUpperCase();
7 | };
8 | const camelCase = string => {
9 | return string.replace(rdashAlpha, fcamelCase);
10 | };
11 |
12 | if (elem.nodeType === 1) {
13 | let i = attrs.length;
14 | while (i--) {
15 | const name = attrs[i].name;
16 | if (name.indexOf(`${prefix}-`) === 0) {
17 | const camelName = camelCase(name.slice(prefix.length + 1));
18 | dataAttrs[camelName] = elem.getAttribute(name);
19 | }
20 | }
21 | }
22 | return dataAttrs;
23 | };
24 |
25 | export default attr2obj;
26 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | sudo: false
3 | node_js:
4 | - "node"
5 | cache:
6 | directories:
7 | - node_modules
8 | env:
9 | global:
10 | - BROWSER_PROVIDER_READY_FILE=/tmp/sauce-connect-ready
11 | - LOGS_DIR=/tmp/react-metrics-build/logs
12 | - USE_CLOUD=false
13 | matrix:
14 | fast_finish: true
15 | include:
16 | - node_js: stable
17 | env: USE_CLOUD=true
18 | allow_failures:
19 | - env: USE_CLOUD=true
20 | before_install:
21 | - export CHROME_BIN=chromium-browser
22 | - export DISPLAY=:99.0
23 | - sh -e /etc/init.d/xvfb start
24 | before_script:
25 | - mkdir -p $LOGS_DIR
26 | - ./scripts/setup.sh
27 | script:
28 | - npm test
29 | - npm run bundlesize
30 | after_script:
31 | - ./scripts/teardown.sh
32 | after_success:
33 | - cat ./coverage/lcov.info | ./node_modules/codecov.io/bin/codecov.io.js
34 |
--------------------------------------------------------------------------------
/examples/react-router/basic/async-page-view.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import {PropTypes, exposeMetrics} from "react-metrics"; // eslint-disable-line import/no-unresolved
3 |
4 | @exposeMetrics class AsyncPageView extends React.Component {
5 | static contextTypes = {
6 | metrics: PropTypes.metrics
7 | };
8 |
9 | static willTrackPageView(routeState) {
10 | return AsyncPageView._promise.then(result => {
11 | return Object.assign(result, routeState.query);
12 | });
13 | }
14 |
15 | static _promise = new Promise(resolve => {
16 | setTimeout(() => {
17 | resolve({
18 | asyncMetrics: "asyncValue"
19 | });
20 | }, 5 * 1000);
21 | });
22 |
23 | render() {
24 | return Async Page View Example ;
25 | }
26 | }
27 |
28 | export default AsyncPageView;
29 |
--------------------------------------------------------------------------------
/src/react/getRouteState.js:
--------------------------------------------------------------------------------
1 | import locationEquals from "./locationEquals";
2 | import isLocationValid from "./isLocationValid";
3 |
4 | function mergeParam(location, params) {
5 | return Object.keys(location).reduce(
6 | (obj, key) => {
7 | obj[key] = location[key];
8 | return obj;
9 | },
10 | {params}
11 | );
12 | }
13 |
14 | export default function getRouteState(newProps, props = {}) {
15 | if (
16 | isLocationValid(newProps.location) &&
17 | !locationEquals(props.location, newProps.location)
18 | ) {
19 | // additional params for the dynamic segments of the URL if available.
20 | const {location, params} = newProps;
21 | if (location.params || !params) {
22 | return location;
23 | }
24 | const routeState = mergeParam(location, params);
25 | return routeState;
26 | }
27 | return null;
28 | }
29 |
--------------------------------------------------------------------------------
/test/ReactMetrics/getRouteState.spec.js:
--------------------------------------------------------------------------------
1 | import getRouteState from "../../src/react/getRouteState";
2 |
3 | describe("getRouteState", () => {
4 | it("should return new location when param is included", () => {
5 | const newProps = {
6 | location: {
7 | pathname: "/",
8 | hash: "",
9 | search: "",
10 | state: null
11 | },
12 | params: {
13 | param: "value"
14 | }
15 | };
16 | expect(getRouteState(newProps)).to.not.eql(newProps.location);
17 |
18 | const newProps2 = {
19 | location: {
20 | pathname: "/",
21 | hash: "",
22 | search: "",
23 | state: null,
24 | params: {
25 | param: "value"
26 | }
27 | }
28 | };
29 | expect(getRouteState(newProps2)).to.equal(newProps2.location);
30 | });
31 | });
32 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | var webpack = require("webpack");
2 | var env = process.env.NODE_ENV;
3 |
4 | var reactExternal = {
5 | root: "React",
6 | commonjs2: "react",
7 | commonjs: "react",
8 | amd: "react"
9 | };
10 |
11 | var reactDomExternal = {
12 | root: "ReactDOM",
13 | commonjs2: "react-dom",
14 | commonjs: "react-dom",
15 | amd: "react-dom"
16 | };
17 |
18 | var config = {
19 | externals: {
20 | "react": reactExternal,
21 | "react-dom": reactDomExternal
22 | },
23 | module: {
24 | loaders: [
25 | {test: /\.js$/, loaders: ["babel-loader"], exclude: /node_modules/}
26 | ]
27 | },
28 | output: {
29 | library: "ReactMetrics",
30 | libraryTarget: "umd"
31 | },
32 | plugins: [
33 | new webpack.optimize.OccurenceOrderPlugin(),
34 | new webpack.DefinePlugin({
35 | "process.env.NODE_ENV": JSON.stringify(env)
36 | })
37 | ]
38 | };
39 |
40 | module.exports = config;
41 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright (c) 2015 NFL
2 |
3 | Permission is hereby granted, free of charge, to any person obtaining a copy
4 | of this software and associated documentation files (the "Software"), to deal
5 | in the Software without restriction, including without limitation the rights
6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
7 | copies of the Software, and to permit persons to whom the Software is
8 | furnished to do so, subject to the following conditions:
9 |
10 | The above copyright notice and this permission notice shall be included in all
11 | copies or substantial portions of the Software.
12 |
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19 | SOFTWARE.
20 |
--------------------------------------------------------------------------------
/src/core/createService.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-empty */
2 | import ActionTypes from "./ActionTypes";
3 | import {aggregateApisByType} from "./utils/extractApis";
4 |
5 | const noop = function() {};
6 |
7 | function isService(obj) {
8 | const functionProps = aggregateApisByType(obj);
9 | return functionProps.length > 0;
10 | }
11 |
12 | export const defaultService = {
13 | [ActionTypes.PAGE_VIEW]: noop,
14 | [ActionTypes.TRACK]: noop
15 | };
16 |
17 | export default function createService(options = {}) {
18 | const {api} = options;
19 | let instance = defaultService;
20 | function instantiate() {
21 | const ClassType = api;
22 | return new ClassType(options);
23 | }
24 | if (typeof api === "function") {
25 | let inst;
26 | try {
27 | inst = api(options);
28 | } catch (err) {
29 | } finally {
30 | if (!inst || !isService(inst)) {
31 | inst = instantiate();
32 | }
33 | if (isService(inst)) {
34 | instance = inst;
35 | }
36 | }
37 | } else if (api && typeof api === "object" && isService(api)) {
38 | instance = api;
39 | }
40 | const name = options.name || instance.name;
41 | return {name, apis: instance};
42 | }
43 |
--------------------------------------------------------------------------------
/examples/redux/basic/metricsMiddleware.js:
--------------------------------------------------------------------------------
1 | import {createMetrics} from "react-metrics"; // eslint-disable-line import/no-unresolved
2 | import MetricsConfig from "./metrics.config";
3 | import ActionTypes from "./ActionTypes";
4 |
5 | const metrics = createMetrics({
6 | ...MetricsConfig,
7 | debug: true
8 | });
9 |
10 | export default function metricsMiddleware({getState}) {
11 | return next => action => {
12 | const returnValue = next(action);
13 | switch (action.type) {
14 | case ActionTypes.INCLEMENT:
15 | case ActionTypes.DECLEMENT:
16 | const {id} = action;
17 | const state = getState();
18 | metrics.api.track("counterClick", {
19 | id,
20 | value: state[`counter${id}`]
21 | });
22 | break;
23 | case ActionTypes.ROUTE_CHANGE:
24 | const {location} = action;
25 | const paths = location.pathname.substr(1).split("/");
26 | const routeState = location;
27 | metrics.setRouteState(routeState);
28 | metrics.api.pageView({
29 | category: !paths[0] ? "landing" : paths[0]
30 | });
31 | }
32 | return returnValue;
33 | };
34 | }
35 |
--------------------------------------------------------------------------------
/src/core/utils/extractApis.js:
--------------------------------------------------------------------------------
1 | const EXCLUDES = ["constructor"].concat(
2 | Object.getOwnPropertyNames(Object.getPrototypeOf({}))
3 | );
4 |
5 | export function filterKeysByType(obj, total = [], type = "function") {
6 | return Object.getOwnPropertyNames(obj).filter(key => {
7 | return (
8 | total.indexOf(key) === -1 &&
9 | EXCLUDES.indexOf(key) === -1 &&
10 | key.indexOf("_") !== 0 && // consider it's private
11 | obj.hasOwnProperty(key) &&
12 | typeof obj[key] === type
13 | );
14 | });
15 | }
16 |
17 | export function aggregateApisByType(obj, total = []) {
18 | const keys = [];
19 | while (obj !== null) {
20 | // eslint-disable-line no-eq-null
21 | const arr = filterKeysByType(obj, total);
22 | keys.push(...arr);
23 | obj = Object.getPrototypeOf(obj);
24 | }
25 | return keys;
26 | }
27 |
28 | // extracts lists of methods from each service object.
29 | export default function extractApis(services) {
30 | services = Array.isArray(services) ? services : [services];
31 | const apis = services.reduce((total, service) => {
32 | const obj = service.constructor === Object
33 | ? service
34 | : Object.getPrototypeOf(service);
35 | const keys = aggregateApisByType(obj, total);
36 | total.push(...keys);
37 | return total;
38 | }, []);
39 |
40 | return apis;
41 | }
42 |
--------------------------------------------------------------------------------
/examples/no-router-lib/basic/page.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import PropTypes from "prop-types";
3 |
4 | import {PropTypes as MetricsPropTypes} from "react-metrics"; // eslint-disable-line import/no-unresolved
5 |
6 | class Page extends React.Component {
7 | constructor(...args) {
8 | super(...args);
9 |
10 | this.onClick = this.onClick.bind(this);
11 | }
12 |
13 | static contextTypes = {
14 | metrics: MetricsPropTypes.metrics,
15 | appState: PropTypes.any
16 | };
17 |
18 | static propTypes = {
19 | params: PropTypes.object
20 | };
21 |
22 | onClick() {
23 | this.context.metrics.user({
24 | username: "exampleuser"
25 | });
26 | const {params} = this.props;
27 | this.context.metrics.track(
28 | "trackClick",
29 | {page: params.id},
30 | true /* this will merge page default metrics */
31 | );
32 | }
33 |
34 | render() {
35 | const {params} = this.props;
36 | return (
37 |
38 |
Page {params.id}
39 | Manual Track
40 |
45 | Declarative Track
46 |
47 |
48 | );
49 | }
50 | }
51 |
52 | export default Page;
53 |
--------------------------------------------------------------------------------
/examples/redux/basic/metrics.config.js:
--------------------------------------------------------------------------------
1 | import pkg from "../../../package.json";
2 | const config = {
3 | vendors: [
4 | {
5 | api: {
6 | name: "Test",
7 | pageView(eventName, params) {
8 | return new Promise(resolve => {
9 | setTimeout(() => {
10 | resolve({
11 | eventName,
12 | params
13 | });
14 | }, 0 * 1000);
15 | });
16 | },
17 | track(eventName, params) {
18 | return new Promise(resolve => {
19 | resolve({
20 | eventName,
21 | params
22 | });
23 | });
24 | },
25 | user(user) {
26 | return new Promise(resolve => {
27 | resolve({
28 | user
29 | });
30 | });
31 | }
32 | }
33 | }
34 | ],
35 | pageDefaults: () => {
36 | // const paths = routeState.pathname.substr(1).split("/");
37 | const timestamp = new Date();
38 | return {
39 | timestamp,
40 | build: pkg.version,
41 | siteName: "React Metrics Example"
42 | };
43 | },
44 | pageViewEvent: "pageLoad"
45 | };
46 |
47 | export default config;
48 |
--------------------------------------------------------------------------------
/examples/react-router/basic/metrics.config.js:
--------------------------------------------------------------------------------
1 | import pkg from "../../../package.json";
2 | const config = {
3 | vendors: [
4 | {
5 | api: {
6 | name: "Test",
7 | pageView(eventName, params) {
8 | return new Promise(resolve => {
9 | setTimeout(() => {
10 | resolve({
11 | eventName,
12 | params
13 | });
14 | }, 0 * 1000);
15 | });
16 | },
17 | track(eventName, params) {
18 | return new Promise(resolve => {
19 | resolve({
20 | eventName,
21 | params
22 | });
23 | });
24 | },
25 | user(user) {
26 | return new Promise(resolve => {
27 | resolve({
28 | user
29 | });
30 | });
31 | }
32 | }
33 | }
34 | ],
35 | pageDefaults: routeState => {
36 | const paths = routeState.pathname.substr(1).split("/");
37 | const timestamp = new Date();
38 | return {
39 | timestamp,
40 | build: pkg.version,
41 | siteName: "React Metrics Example",
42 | category: !paths[0] ? "landing" : paths[0]
43 | };
44 | },
45 | pageViewEvent: "pageLoad",
46 | debug: true
47 | };
48 |
49 | export default config;
50 |
--------------------------------------------------------------------------------
/examples/react-router/metricsElement/metrics.config.js:
--------------------------------------------------------------------------------
1 | import pkg from "../../../package.json";
2 | const config = {
3 | vendors: [
4 | {
5 | api: {
6 | name: "Test",
7 | pageView(eventName, params) {
8 | return new Promise(resolve => {
9 | setTimeout(() => {
10 | resolve({
11 | eventName,
12 | params
13 | });
14 | }, 0 * 1000);
15 | });
16 | },
17 | track(eventName, params) {
18 | return new Promise(resolve => {
19 | resolve({
20 | eventName,
21 | params
22 | });
23 | });
24 | },
25 | user(user) {
26 | return new Promise(resolve => {
27 | resolve({
28 | user
29 | });
30 | });
31 | }
32 | }
33 | }
34 | ],
35 | pageDefaults: routeState => {
36 | const paths = routeState.pathname.substr(1).split("/");
37 | const timestamp = new Date();
38 | return {
39 | timestamp,
40 | build: pkg.version,
41 | siteName: "React Metrics Example",
42 | category: !paths[0] ? "landing" : paths[0]
43 | };
44 | },
45 | pageViewEvent: "pageLoad",
46 | debug: true
47 | };
48 |
49 | export default config;
50 |
--------------------------------------------------------------------------------
/src/react/exposeMetrics.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from "react";
2 | import {canUseDOM} from "fbjs/lib/ExecutionEnvironment";
3 | import hoistStatics from "hoist-non-react-statics";
4 | import PropTypes from "./PropTypes";
5 |
6 | const mountedInstances = [];
7 |
8 | export function getMountedInstances() {
9 | return mountedInstances;
10 | }
11 |
12 | // convenient method for unit test
13 | export function clearMountedInstances() {
14 | mountedInstances.length = 0;
15 | }
16 |
17 | function getDisplayName(Comp) {
18 | return Comp.displayName || Comp.name || "Component";
19 | }
20 |
21 | function wrap(ComposedComponent) {
22 | class Metrics extends Component {
23 | static displayName = `Metrics(${getDisplayName(ComposedComponent)})`;
24 |
25 | // context unit test fails w/o this, why??
26 | static contextTypes = {
27 | metrics: PropTypes.metrics
28 | };
29 |
30 | componentWillMount() {
31 | if (!canUseDOM) {
32 | return;
33 | }
34 |
35 | mountedInstances.push(Metrics);
36 | }
37 |
38 | componentWillUnmount() {
39 | const index = mountedInstances.indexOf(this);
40 | mountedInstances.splice(index, 1);
41 | }
42 |
43 | render() {
44 | return
30 |
31 | Home
34 |
38 |
40 |
42 |
43 | {this.props.children &&
44 | React.cloneElement(this.props.children, {
45 | appName: App.displayName
46 | })}
47 |
404! ;
56 | }
57 | }
58 |
59 | ReactDOM.render(
60 |
61 |
62 |
68 | ,
69 | document.getElementById("example")
70 | );
71 |
--------------------------------------------------------------------------------
/examples/no-router-lib/basic/app.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable react/no-multi-comp */
2 | import React, {Component} from "react";
3 | import PropTypes from "prop-types";
4 | import ReactDOM from "react-dom";
5 | import {metrics} from "react-metrics"; // eslint-disable-line import/no-unresolved
6 | import MetricsConfig from "./metrics.config";
7 | import Home from "./home";
8 | import Page from "./page";
9 | import createHistory from "history/lib/createHashHistory";
10 |
11 | @metrics(MetricsConfig)
12 | class App extends Component {
13 | static propTypes = {
14 | history: PropTypes.object,
15 | children: PropTypes.node
16 | };
17 |
18 | render() {
19 | const createHref = this.props.history.createHref;
20 | return (
21 |
22 |
27 | {this.props.children &&
28 | React.cloneElement(this.props.children, {...this.props})}
29 |
67 | {React.createElement(this.state.routeComponent)}
68 |
69 | );
70 | }
71 | }
72 |
73 | ReactDOM.render(Page A
32 |
33 | );
34 | return (
35 |
36 |
37 |
38 |
39 |
43 | Home
44 |
45 |
46 |
47 |
48 |
49 | This span won't render
50 |
51 |
52 |
53 |
59 | Page B
60 |
61 |
62 |
63 | {this.props.children &&
64 | React.cloneElement(this.props.children, {
65 | appName: App.displayName
66 | })}
67 |
404! ;
79 | }
80 | }
81 |
82 | ReactDOM.render(
83 |
84 |
85 |
89 | ,
90 | document.getElementById("example")
91 | );
92 |
--------------------------------------------------------------------------------
/src/core/useTrackBindingPlugin.js:
--------------------------------------------------------------------------------
1 | import EventListener from "fbjs/lib/EventListener";
2 | import attr2obj from "./utils/attr2obj";
3 |
4 | function isLeftClickEvent(event) {
5 | return event.button === 0;
6 | }
7 |
8 | function isModifiedEvent(event) {
9 | return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
10 | }
11 |
12 | export class TrackBindingPlugin {
13 | constructor(
14 | {attributePrefix = "data-metrics", traverseParent = false} = {}
15 | ) {
16 | this._attributePrefix = attributePrefix;
17 | this._traverseParent = traverseParent;
18 | }
19 |
20 | listen(callback, rootElement = document.body) {
21 | if (typeof callback !== "function") {
22 | throw new Error("callback needs to be a function.");
23 | }
24 |
25 | if (rootElement && rootElement.nodeType !== 1) {
26 | throw new Error("rootElement needs to be a valid node element.");
27 | }
28 |
29 | if (this._clickHandler) {
30 | this.remove();
31 | }
32 |
33 | this._rootElement = rootElement;
34 | this._clickHandler = EventListener.listen(
35 | rootElement,
36 | "click",
37 | this._handleClick.bind(this, callback)
38 | );
39 |
40 | return {
41 | target: this,
42 | remove: this.remove.bind(this)
43 | };
44 | }
45 |
46 | remove() {
47 | if (this._clickHandler) {
48 | this._clickHandler.remove();
49 | this._clickHandler = null;
50 | }
51 | }
52 |
53 | /**
54 | * A click handler to perform custom link tracking, any element with 'metrics-*' attribute will be tracked.
55 | *
56 | * @method _handleClick
57 | * @param {Object} event
58 | * @private
59 | */
60 | _handleClick(callback, event) {
61 | if (isModifiedEvent(event) || !isLeftClickEvent(event)) {
62 | return;
63 | }
64 |
65 | let elem = event.target || event.srcElement;
66 | let dataset = this._getData(elem);
67 |
68 | if (this._traverseParent) {
69 | const rootElement = this._rootElement;
70 | while (elem !== rootElement) {
71 | elem = elem.parentElement || elem.parentNode;
72 | dataset = {...this._getData(elem), ...dataset};
73 | }
74 | }
75 |
76 | if (!Object.keys(dataset).length) {
77 | return;
78 | }
79 |
80 | const eventName = dataset && dataset.eventName;
81 | const mergePagedefaults = dataset && dataset.mergePagedefaults;
82 | delete dataset.mergePagedefaults;
83 |
84 | if (eventName) {
85 | delete dataset.eventName;
86 | callback(eventName, dataset, mergePagedefaults === "true");
87 | }
88 | }
89 |
90 | _getData(elem) {
91 | return attr2obj(elem, this._attributePrefix);
92 | }
93 | }
94 |
95 | export default function useTrackBindingPlugin({
96 | callback,
97 | rootElement,
98 | attributePrefix,
99 | traverseParent
100 | }) {
101 | const trackBindingPlugin = new TrackBindingPlugin({
102 | attributePrefix,
103 | traverseParent
104 | });
105 | return trackBindingPlugin.listen(callback, rootElement);
106 | }
107 |
--------------------------------------------------------------------------------
/examples/vendors/AdobeTagManager.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Performs the tracking calls to Adobe Tag Manager.
3 | * @module AdobeTagManager
4 | * @class
5 | * @internal
6 | */
7 | class AdobeTagManager {
8 | constructor(options = {}) {
9 | this.options = options;
10 | this.name = "Adobe Tag Manager";
11 | }
12 | /**
13 | *
14 | * @method pageView
15 | * @param {String} eventName
16 | * @param {Object} params
17 | * @returns {Promise}
18 | * @internal
19 | */
20 | pageView(...args) {
21 | return this.track(...args);
22 | }
23 | /**
24 | *
25 | * @method track
26 | * @param {String} eventName
27 | * @param {Object} params
28 | * @returns {Promise}
29 | * @internal
30 | */
31 | track(eventName, params) {
32 | return new Promise((resolve, reject) => {
33 | this._load()
34 | .then(satellite => {
35 | this._satellite = this._satellite || satellite;
36 | this._track(eventName, params);
37 | resolve({
38 | eventName,
39 | params
40 | });
41 | })
42 | .catch(error => {
43 | console.error("Omniture: Failed to load seed file", error);
44 | reject(error);
45 | });
46 | });
47 | }
48 | /**
49 | *
50 | * @method _track
51 | * @param {String} eventName
52 | * @param {Object} params
53 | * @protected
54 | */
55 | _track(eventName, params) {
56 | this._satellite.data.customVars = {};
57 | this._satellite.setVar(params);
58 | this._satellite.track(eventName);
59 | }
60 | /**
61 | *
62 | * @method _load
63 | * @protected
64 | */
65 | _load() {
66 | return (
67 | this._promise ||
68 | (this._promise = new Promise((resolve, reject) => {
69 | if (window._satellite) {
70 | resolve(window._satellite);
71 | } else {
72 | const script = document.createElement("script");
73 |
74 | script.onload = () => {
75 | this._addPageBottom();
76 | resolve(window._satellite);
77 | };
78 |
79 | script.onerror = error => {
80 | reject(error);
81 | };
82 |
83 | script.src = this.options.seedFile;
84 | document.head.appendChild(script);
85 | }
86 | }))
87 | );
88 | }
89 | /**
90 | *
91 | * @method _addPageBottom
92 | * @protected
93 | */
94 | _addPageBottom() {
95 | const body = document.body;
96 | const script = document.createElement("script");
97 | // Lets add to page so Adobe consultant knows we've added the pageBottom() call.
98 | const scriptContent = `
99 | "use strict";
100 |
101 | var _satellite = window._satellite;
102 |
103 | if (_satellite) {
104 | _satellite.pageBottom();
105 | }
106 | `;
107 |
108 | script.text = scriptContent;
109 | return body.appendChild(script);
110 | }
111 | }
112 |
113 | export default AdobeTagManager;
114 |
--------------------------------------------------------------------------------
/examples/react-router/metricsElement/page.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | import React from "react";
3 | import PropTypes from "prop-types";
4 | import {MetricsElement} from "react-metrics"; // eslint-disable-line import/no-unresolved
5 |
6 | // Note: `data-tracking` prefix is set in app.js as `attributePrefix` option
7 |
8 | class Page extends React.Component {
9 | static propTypes = {
10 | params: PropTypes.object
11 | };
12 |
13 | render() {
14 | const {params} = this.props;
15 | const listItem = Array.from("123").map(key => (
16 |
22 |
27 | ));
28 |
29 | return (
30 |
31 |
Page {params.id}
32 | {/* Ex 1: self target */}
33 |
39 | Link
40 |
41 | {/* Ex 2: render children only */}
42 |
43 |
47 |
53 |
54 | {/* Ex 3: event bubbling */}
55 |
60 |
66 | {/* Ex 4: multiple tracking items */}
67 |
71 | {listItem}
72 |
73 | {/* Ex 5: aggregate metrics data */}
74 |
75 |
90 |
91 |
96 |
97 |
64 |
65 | Home
69 | {this.props.children &&
70 | React.cloneElement(this.props.children, {
71 | ...this.props,
72 | onInclementClick: this.onInclementClick,
73 | onDeclementClick: this.onDeclementClick
74 | })}
75 |
Home ;
83 | }
84 | }
85 |
86 | class Page extends Component {
87 | static propTypes = {
88 | params: PropTypes.object,
89 | onInclementClick: PropTypes.func,
90 | onDeclementClick: PropTypes.func,
91 | counterA: PropTypes.number,
92 | counterB: PropTypes.number
93 | };
94 |
95 | render() {
96 | const {
97 | params,
98 | counterA,
99 | counterB,
100 | onInclementClick,
101 | onDeclementClick
102 | } = this.props;
103 | return (
104 |
105 |
Page {params.id}
106 |
counter A: {counterA}
107 |
counter B: {counterB}
108 |
109 | onInclementClick(params.id)}>
110 | Inclement
111 |
112 | onDeclementClick(params.id)}>
113 | Declement
114 |
115 |
116 |
123 |
124 |
125 |
126 |
129 |
130 |
131 |
Page ;
32 | }
33 | }
34 |
35 | let Metrics = exposeMetrics(Comp1);
36 |
37 | expect(Metrics.displayName).to.be.equal("Metrics(Compo1)");
38 |
39 | class Comp2 extends React.Component {
40 | render() {
41 | return Page ;
42 | }
43 | }
44 |
45 | Metrics = exposeMetrics(Comp2);
46 |
47 | expect(Metrics.displayName).to.be.equal("Metrics(Comp2)");
48 |
49 | class Comp3 extends React.Component {
50 | render() {
51 | return Page ;
52 | }
53 | }
54 |
55 | Metrics = exposeMetrics(Comp3);
56 |
57 | expect(Metrics.displayName).to.be.equal("Metrics(Comp3)");
58 |
59 | class Comp4 extends React.Component {
60 | static displayName = null;
61 |
62 | render() {
63 | return Page ;
64 | }
65 | }
66 |
67 | Metrics = exposeMetrics(Comp4);
68 |
69 | expect(Metrics.displayName).to.contains("Metrics(");
70 | });
71 |
72 | it("should provide 'willTrackPageView' static method to route handler component", done => {
73 | @metrics(MetricsConfig)
74 | class Application extends React.Component {
75 | render() {
76 | return {this.props.children}
;
77 | }
78 | }
79 |
80 | @exposeMetrics class Page extends React.Component {
81 | static displayName = "Page";
82 |
83 | static willTrackPageView() {
84 | expect(true).to.be.ok;
85 | done();
86 | }
87 |
88 | render() {
89 | return Page ;
90 | }
91 | }
92 |
93 | ReactDOM.render(
94 |
95 |
96 |
98 | ,
99 | node,
100 | function() {
101 | this.history.pushState(null, "/page/1");
102 | }
103 | );
104 | });
105 |
106 | it("should support partial application", done => {
107 | @metrics(MetricsConfig)
108 | class Application extends React.Component {
109 | render() {
110 | return {this.props.children}
;
111 | }
112 | }
113 |
114 | @exposeMetrics()
115 | class Page extends React.Component {
116 | static willTrackPageView() {
117 | expect(true).to.be.ok;
118 | done();
119 | }
120 |
121 | render() {
122 | return Page ;
123 | }
124 | }
125 |
126 | ReactDOM.render(
127 |
128 |
129 |
131 | ,
132 | node,
133 | function() {
134 | this.history.pushState(null, "/page/1");
135 | }
136 | );
137 | });
138 |
139 | it("should register itself to a registry when mounting, unregister itself from a registry when unmounting", done => {
140 | @exposeMetrics class Application extends React.Component {
141 | render() {
142 | return Application
;
143 | }
144 | }
145 |
146 | ReactDOM.render(
Application {this.props.children};
35 | }
36 | }
37 |
38 | class Page extends React.Component {
39 | static displayName = "Page";
40 |
41 | render() {
42 | return
Page {this.props.children};
43 | }
44 | }
45 |
46 | @exposeMetrics class Content extends React.Component {
47 | static displayName = "Content";
48 |
49 | static willTrackPageView() {
50 | if (willTrackPageViewCount === 0) {
51 | expect(componentWillMountCalled).to.equal(true);
52 | expect(componentDidMountCalled).to.equal(true);
53 | } else if (willTrackPageViewCount === 1) {
54 | expect(componentWillReceivePropsCalled).to.equal(true);
55 | expect(componentDidUpdateCalled).to.equal(true);
56 | done();
57 | }
58 | willTrackPageViewCount++;
59 | }
60 |
61 | componentWillMount() {
62 | componentWillMountCalled = true;
63 | }
64 |
65 | componentDidMount() {
66 | componentDidMountCalled = true;
67 | }
68 |
69 | componentWillReceiveProps() {
70 | componentWillReceivePropsCalled = true;
71 | }
72 |
73 | componentDidUpdate() {
74 | componentDidUpdateCalled = true;
75 | }
76 |
77 | render() {
78 | return Content ;
79 | }
80 | }
81 |
82 | ReactDOM.render(
83 |
84 |
85 |
86 |
88 |
89 | ,
90 | node,
91 | function() {
92 | this.history.pushState(null, "/page/content2");
93 | }
94 | );
95 | });
96 |
97 | it("cancels page view tracking when returns 'false'.", done => {
98 | @metrics(MetricsConfig)
99 | @exposeMetrics
100 | class Application extends React.Component {
101 | static displayName = "Application";
102 |
103 | static willTrackPageView() {
104 | return false;
105 | }
106 |
107 | render() {
108 | return {this.props.children}
;
109 | }
110 | }
111 |
112 | const mock = sinon.mock(metricsMock.api);
113 | const pageView = sinon.stub(
114 | Application.prototype,
115 | "_getMetrics",
116 | () => {
117 | return metricsMock;
118 | }
119 | );
120 | mock.expects("pageView").never();
121 |
122 | ReactDOM.render(
123 |
124 | ,
126 | node,
127 | () => {
128 | mock.verify();
129 | mock.restore();
130 | pageView.restore();
131 | done();
132 | }
133 | );
134 | });
135 |
136 | it("can accpets object", done => {
137 | @metrics(MetricsConfig)
138 | @exposeMetrics
139 | class Application extends React.Component {
140 | static displayName = "Application";
141 |
142 | static willTrackPageView() {
143 | return {
144 | prop1: "value1"
145 | };
146 | }
147 |
148 | render() {
149 | return {this.props.children}
;
150 | }
151 | }
152 |
153 | const pageView = sinon.stub(
154 | Application.prototype,
155 | "_getMetrics",
156 | () => {
157 | return {
158 | ...metricsMock,
159 | api: {
160 | pageView(...args) {
161 | expect(typeof args[0]).to.be.equal("object");
162 | pageView.restore();
163 | done();
164 | }
165 | }
166 | };
167 | }
168 | );
169 |
170 | ReactDOM.render(
171 |
172 | ,
174 | node
175 | );
176 | });
177 |
178 | it("receives 'routeState' object with expected props and values", done => {
179 | const state = {isModal: false};
180 |
181 | @metrics(MetricsConfig)
182 | class Application extends React.Component {
183 | static displayName = "Application";
184 |
185 | render() {
186 | return {this.props.children}
;
187 | }
188 | }
189 |
190 | @exposeMetrics class Page extends React.Component {
191 | static displayName = "Page";
192 |
193 | static willTrackPageView(routeState) {
194 | expect(routeState.pathname).to.equal("/page/123");
195 | expect(routeState.search).to.equal("?param1=value1");
196 | expect(routeState.hash).to.equal("");
197 | expect(JSON.stringify(routeState.state)).to.equal(
198 | JSON.stringify(state)
199 | );
200 | expect(JSON.stringify(routeState.params)).to.equal(
201 | JSON.stringify({id: "123"})
202 | );
203 | done();
204 | return true;
205 | }
206 |
207 | render() {
208 | return
Page {this.props.children};
209 | }
210 | }
211 |
212 | ReactDOM.render(
213 |
214 |
215 |
217 | ,
218 | node,
219 | function() {
220 | this.history.pushState(state, "/page/123?param1=value1");
221 | }
222 | );
223 | });
224 | });
225 |
--------------------------------------------------------------------------------
/test/ReactMetrics/MetricsElement.spec.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable react/no-multi-comp, max-nested-callbacks, react/prop-types, no-empty, padded-blocks */
2 | import React from "react";
3 | import PropTypes from "prop-types";
4 | import ReactDOM from "react-dom";
5 | import metrics from "../../src/react/metrics";
6 | import MetricsElement from "../../src/react/MetricsElement";
7 | import MetricsConfig from "../metrics.config";
8 | import metricsMock from "../metricsMock";
9 |
10 | describe("MetricsElement", () => {
11 | let node;
12 |
13 | // element.click() doesn't work on Travis Chrome
14 | function simulateClick(metricsElement, target) {
15 | const callback = metricsElement._handleClick.bind(metricsElement);
16 | metricsElement._trackBindingListener.target._handleClick(callback, {
17 | target,
18 | button: 0
19 | });
20 | }
21 |
22 | beforeEach(() => {
23 | node = document.createElement("div");
24 | MetricsConfig.autoTrackPageView = false;
25 | });
26 |
27 | afterEach(() => {
28 | try {
29 | ReactDOM.unmountComponentAtNode(node);
30 | } catch (err) {}
31 | });
32 |
33 | it("throws when used w/o metrics HOC", () => {
34 | class Application extends React.Component {
35 | componentDidMount() {
36 | simulateClick(this.refs.metricsElement, this.refs.img);
37 | }
38 | render() {
39 | return (
40 |
41 |
45 |
51 |
52 | );
53 | }
54 | }
55 | expect(() => {
56 | ReactDOM.render(
71 |
75 |
81 |
82 | );
83 | }
84 | }
85 |
86 | const track = sinon.stub(
87 | metricsMock.api,
88 | "track",
89 | (eventName, params) => {
90 | expect(eventName).to.equal("SomeEvent");
91 | expect(params).to.eql({value: "SomeVavlue"});
92 | track.restore();
93 | done();
94 | }
95 | );
96 | sinon.stub(Application.prototype, "_getMetrics", () => {
97 | return metricsMock;
98 | });
99 |
100 | ReactDOM.render(
117 |
118 |
124 |
125 | );
126 | }
127 | }
128 |
129 | const track = sinon.stub(
130 | metricsMock.api,
131 | "track",
132 | (eventName, params) => {
133 | expect(eventName).to.equal("SomeEvent");
134 | expect(params).to.eql({value: "SomeVavlue"});
135 | track.restore();
136 | done();
137 | }
138 | );
139 | sinon.stub(Application.prototype, "_getMetrics", () => {
140 | return metricsMock;
141 | });
142 |
143 | ReactDOM.render(
154 | {React.cloneElement(this.props.children, {
155 | ...this.props
156 | })}
157 |
158 | );
159 | }
160 | }
161 |
162 | @metrics(MetricsConfig)
163 | class Application extends React.Component {
164 | componentDidMount() {
165 | simulateClick(this.refs.metricsElement, this.refs.img);
166 | }
167 | render() {
168 | return (
169 |
175 |
176 |
182 |
183 | );
184 | }
185 | }
186 |
187 | const track = sinon.stub(
188 | metricsMock.api,
189 | "track",
190 | (eventName, params) => {
191 | expect(eventName).to.equal("SomeEvent");
192 | expect(params).to.eql({value: "SomeVavlue"});
193 | track.restore();
194 | done();
195 | }
196 | );
197 | sinon.stub(Application.prototype, "_getMetrics", () => {
198 | return metricsMock;
199 | });
200 |
201 | ReactDOM.render(
212 | {React.cloneElement(this.props.children, {
213 | ...this.props
214 | })}
215 |
216 | );
217 | }
218 | }
219 |
220 | @metrics(MetricsConfig)
221 | class Application extends React.Component {
222 | componentDidMount() {
223 | simulateClick(this.refs.metricsElement, this.refs.img);
224 | }
225 | render() {
226 | const comp = (
227 |
231 |
232 |
238 |
239 | );
240 | return
191 |
192 |
194 |
233 |
235 | ));
236 | return (
237 |
238 |
239 | {listItem}
240 |
241 |
242 | );
243 | };
244 | ```
245 |
246 | Metrics data defined in `MetricsElement` and its children will get merged.
247 |
248 | Example:
249 |
250 | ```javascript
251 |
255 |
263 |
264 |
268 |
269 | Item 1 Item 2 Item 3
273 |
275 | ```
276 |
277 | Clicking `Image 1` will send the following data to `react-metrics`:
278 |
279 | ```
280 | {
281 | eventName: "imageClick",
282 | params: {
283 | page: "page A",
284 | section: "section 1",
285 | value: "Image 1"
286 | }
287 | }
288 | ```
289 |
290 | Clicking `Item 1` in the list will send the following data to `react-metrics`:
291 |
292 | ```
293 | {
294 | eventName: "listItemClick",
295 | params: {
296 | page: "page A",
297 | section: "section 2",
298 | value: "list item 1"
299 | }
300 | }
301 | ```
302 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
144 | 0 ? "active" : ""}>
145 |
151 | Back
152 |
153 |
154 | ...
155 |
156 |
162 | Next
163 |
164 |
165 |
166 | );
167 | }
168 | }
169 | ```
170 |
171 | ### 4. Analytics Vendor Implementations
172 |
173 | `react-metrics` does not automatically supply any vendor analytics. You need to integrate with an analytics vendor to actually track something for reporting.
174 | Refer to [Vendor Examples](/examples/vendors) for Omniture, Google Analytics and other implementations.
175 |
176 | Also check out the awesome [segmentio library](https://github.com/segmentio/analytics.js) which provides a lot of third party analytics vendors.
177 |
178 | ## Advanced Usage
179 |
180 | ### Override Default Page View Tracking
181 |
182 | Use the `@exposeMetrics` decorator and `willTrackPageView()` methods on a route-handling component to override the default page view tracking behavior and `pageDefaults` data.
183 |
184 | 1. Example: disable automatic page view tracking and trigger page view tracking manually.
185 |
186 | ```javascript
187 | // PageComponent.js
188 | // Must be a "route handling" component:
189 |
190 | import {exposeMetrics, PropTypes} from "react-metrics";
191 |
192 | @exposeMetrics
193 | class PageComponent extends React.Component {
194 | static contextTypes = {
195 | metrics: PropTypes.metrics
196 | }
197 | static willTrackPageView() {
198 | // first, suppress the automatic call.
199 | return false;
200 | }
201 | componentDidMount() {
202 | const {value1, value2} = this.props;
203 | this.context.metrics.pageView({value1, value2});
204 | }
205 | render () {
206 | ...
207 | }
208 | }
209 | ```
210 |
211 | 2. Example: add custom data to automatic page view tracking.
212 |
213 | ```javascript
214 | // PageComponent.js "route-handler
215 | // A route handling component:
216 |
217 | import {exposeMetrics} from "react-metrics";
218 |
219 | @exposeMetrics
220 | class PageComponent extends React.Component {
221 | static willTrackPageView(routeState) {
222 | // return a promise that resolves to custom data.
223 | return yourPromise.then(data => {
224 | // data gets merged with `pageDefaults` object
225 | return data;
226 | });
227 | }
228 | render () {
229 | ...
230 | }
231 | }
232 | ```
233 |
234 | ### Imperative Custom Event Tracking
235 |
236 | Use `this.context.metrics.track()` to trigger custom event tracking as an alternative to [declarative custom link tracking](/docs/GettingStarted.md#declarative-vs-imperative-tracking).
237 | Define `metrics` as a `contextType` in your component and trigger custom track events using `metrics.track()`.
238 |
239 | ```javascript
240 | import {PropTypes} from "react-metrics";
241 |
242 | class YourComponent extends React.Component {
243 | static contextTypes = {
244 | metrics: PropTypes.metrics
245 | }
246 |
247 | onSomethingUpdated(value) {
248 | this.context.metrics.track("customEventName", {value});
249 | }
250 |
251 | render() {
252 | ...
253 | }
254 | }
255 | ```
256 |
257 | ### Metrics API Outside a React Component
258 |
259 | `react-metrics` provides a low level factory API; this is convenient for exposing an instance of the `metrics` API outside of a React component.
260 | Use `createMetrics` to create a `metrics` instance and expose the `metrics.api`.
261 |
262 | ```javascript
263 | // creating middleware for Redux
264 |
265 | import {createMetrics} from "react-metrics";
266 |
267 | const metrics = createMetrics(config);
268 |
269 | export default function metricsMiddleware() {
270 | return next => action => {
271 | const returnValue = next(action);
272 | switch (action.type) {
273 | case ActionTypes.ROUTE_CHANGE:
274 | const {location} = action;
275 | const paths = location.pathname.substr(1).split("/");
276 | const routeState = location;
277 | metrics.setRouteState(routeState);
278 | metrics.api.pageView({
279 | category: !paths[0] ? "landing" : paths[0]
280 | });
281 | }
282 | return returnValue;
283 | };
284 | }
285 | ```
286 |
287 | ## API, Examples, and Documentation
288 |
289 | * [API](/docs/api/) Review the `metrics` API
290 | * [Getting Started](/docs/GettingStarted.md) A more detailed Getting Started Guide
291 | * [Vendor Examples](/examples/vendors) Omniture, Google Analytics, and other analytics vendor examples.
292 | * [Docs](/docs/) Guides, API, and examples.
293 |
294 |
295 | ## To run examples:
296 |
297 | 1. Clone this repo
298 | 2. Run `npm install`
299 | 3. Run `npm run examples`
300 | 4. Point your browser to http://localhost:8080
301 |
302 | ## Contributing to this project
303 |
304 | Please take a moment to review the [guidelines for contributing](CONTRIBUTING.md).
305 |
306 | * [Pull requests](CONTRIBUTING.md#pull-requests)
307 | * [Development Process](CONTRIBUTING.md#development)
308 |
309 | ## License
310 |
311 | MIT
312 |
--------------------------------------------------------------------------------
/test/ReactMetrics/metrics.spec.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable react/no-multi-comp, max-nested-callbacks, react/prop-types, no-empty, padded-blocks, jsx-a11y/href-no-hash */
2 | import React from "react";
3 | import ReactDOM from "react-dom";
4 | import createHistory from "history/lib/createMemoryHistory";
5 | import {Router, Route} from "react-router";
6 | import execSteps from "../execSteps";
7 | import ReactTestUtils from "react-addons-test-utils";
8 | import metrics from "../../src/react/metrics";
9 | import createMetrics, {isMetrics, Metrics} from "../../src/core/createMetrics";
10 | import exposeMetrics, {
11 | clearMountedInstances
12 | } from "../../src/react/exposeMetrics";
13 | import PropTypes from "../../src/react/PropTypes";
14 | import metricsConfig from "../metrics.config";
15 | import metricsMock from "../metricsMock";
16 |
17 | describe("metrics", () => {
18 | const defaultData = metricsConfig.pageDefaults();
19 | let pageDefaultsStub;
20 | let node;
21 |
22 | before(() => {
23 | pageDefaultsStub = sinon.stub(
24 | metricsConfig,
25 | "pageDefaults",
26 | routeState => {
27 | return Object.assign({}, defaultData, {
28 | siteSection: routeState.pathname
29 | });
30 | }
31 | );
32 | });
33 |
34 | after(() => {
35 | pageDefaultsStub.restore();
36 | });
37 |
38 | beforeEach(() => {
39 | node = document.createElement("div");
40 | });
41 |
42 | afterEach(() => {
43 | try {
44 | ReactDOM.unmountComponentAtNode(node);
45 | } catch (err) {}
46 | });
47 |
48 | it("should create 'metrics' instance", () => {
49 | @metrics(metricsConfig)
50 | class Application extends React.Component {
51 | render() {
52 | return
;
53 | }
54 | }
55 |
56 | const tree = ReactTestUtils.renderIntoDocument(
;
74 | }
75 | }
76 |
77 | const tree = ReactTestUtils.renderIntoDocument(Page ;
98 | }
99 | }
100 | class Page2 extends React.Component {
101 | render() {
102 | return Page2 ;
103 | }
104 | }
105 | const TestPage = exposeMetrics(Page2);
106 |
107 | @metrics(metricsConfig)
108 | class Application extends React.Component {
109 | render() {
110 | return ;
111 | }
112 | }
113 |
114 | const stub = sinon.stub(Application.prototype, "_getMetrics", () => {
115 | return {
116 | ...metricsMock,
117 | api: metricsContext
118 | };
119 | });
120 |
121 | const tree = ReactTestUtils.renderIntoDocument({this.props.children}
;
144 | }
145 | }
146 |
147 | const pageView = sinon.stub(metricsMock.api, "pageView");
148 | const stub = sinon.stub(Application.prototype, "_getMetrics", () => {
149 | return metricsMock;
150 | });
151 |
152 | const steps = [
153 | function() {
154 | expect(pageView.calledOnce).to.be.false;
155 | this.history.pushState(null, "/page");
156 | },
157 | function() {
158 | expect(pageView.calledOnce).to.be.true;
159 | stub.restore();
160 | pageView.restore();
161 | done();
162 | }
163 | ];
164 |
165 | class Page extends React.Component {
166 | static displayName = "Page";
167 |
168 | static contextTypes = {
169 | metrics: PropTypes.metrics.isRequired
170 | };
171 |
172 | static willTrackPageView() {
173 | return false;
174 | }
175 | componentDidMount() {
176 | this.context.metrics.pageView();
177 | }
178 |
179 | render() {
180 | return
Page ;
181 | }
182 | }
183 |
184 | const execNextStep = execSteps(steps, done);
185 |
186 | ReactDOM.render(
187 |
188 |
189 |
191 | ,
192 | node,
193 | execNextStep
194 | );
195 | });
196 |
197 | it("should not throw invariant error when `enabled` is set to false in metrics config and pageView is not defined.", done => {
198 | @metrics(metricsConfig)
199 | class Application extends React.Component {
200 | static displayName = "Application";
201 |
202 | render() {
203 | return
Appication ;
204 | }
205 | }
206 |
207 | sinon.stub(Application.prototype, "_getMetrics", () => {
208 | return {
209 | ...metricsMock,
210 | enabled: false,
211 | api: {}
212 | };
213 | });
214 |
215 | expect(() => {
216 | ReactDOM.render(
217 |
218 | ,
220 | node,
221 | done
222 | );
223 | }).to.not.throw();
224 | });
225 |
226 | it("should not use track binding when 'useTrackBinding' is set to false.", done => {
227 | const stub = sinon.stub(Metrics.prototype, "_handleClick");
228 | const metricsInstance = new Metrics(metricsConfig);
229 | @metrics(metricsInstance, {useTrackBinding: false})
230 | class Application extends React.Component {
231 | static displayName = "Application";
232 | componentDidMount() {
233 | // make sure click happens after binding is done.
234 | setTimeout(() => {
235 | this.refs.link.click();
236 | stub.should.have.callCount(0);
237 | stub.reset();
238 | done();
239 | }, 0);
240 | }
241 | render() {
242 | return (
243 |
250 | );
251 | }
252 | }
253 |
254 | ReactDOM.render(
Appication ;
275 | }
276 | }
277 |
278 | expect(() => {
279 | ReactDOM.render(
280 |
281 | ,
283 | node
284 | );
285 | }).to.throw(/'pageView' api needs to be defined/);
286 | });
287 |
288 | it("should be able to manually track page view with custom page view event name.", done => {
289 | const customPageViewRule = "customPageLoad";
290 | const customData = {
291 | pageName: "I",
292 | content: "J"
293 | };
294 |
295 | @metrics(metricsConfig)
296 | @exposeMetrics
297 | class Application extends React.Component {
298 | static displayName = "Application";
299 |
300 | static contextTypes = {
301 | metrics: PropTypes.metrics.isRequired
302 | };
303 |
304 | static willTrackPageView() {
305 | return false;
306 | }
307 |
308 | componentDidMount() {
309 | this.context.metrics.pageView(customPageViewRule, customData);
310 | }
311 |
312 | render() {
313 | return
;
314 | }
315 | }
316 |
317 | const stub = sinon.stub(Application.prototype, "_getMetrics", () => {
318 | return {
319 | api: {
320 | pageView(...args) {
321 | expect(args[0]).to.be.equal(customPageViewRule);
322 | expect(args[1]).to.be.equal(customData);
323 | stub.restore();
324 | done();
325 | }
326 | }
327 | };
328 | });
329 |
330 | ReactDOM.render(
;
359 | }
360 | }
361 |
362 | const stub = sinon.stub(Application.prototype, "_getMetrics", () => {
363 | return {
364 | api: {
365 | track(...args) {
366 | expect(args[0]).to.be.equal(trackId);
367 | expect(args[1]).to.be.equal(customData);
368 | stub.restore();
369 | done();
370 | }
371 | }
372 | };
373 | });
374 |
375 | ReactDOM.render(
120 |
121 | ...
122 |
123 |
124 | ), document.getElementById("root"));
125 | ```
126 |
127 | You can check out the example implementation using React Router [here](/examples/react-router).
128 |
129 | ### Page View Tracking
130 |
131 | `react-metrics` will automatically detects route change and fires page view call for you.
132 |
133 | Define the metrics you want to track across the pages in the `pageDefaults` option
134 |
135 | Example:
136 |
137 | ```javascript
138 | export default metrics({
139 | vendors: [{
140 | name: ...,
141 | api: {
142 | ...
143 | }
144 | }],
145 | pageViewEvent: "MyPageViewEvent",
146 | pageDefaults: (routeState) => {
147 | const paths = routeState.pathname.substr(1).split("/");
148 | return {
149 | category: !paths[0] ? "landing" : paths[0]
150 | timestamp: Date.now(),
151 | ...
152 | };
153 | }
154 | })(Application);
155 | ```
156 |
157 | `pageDefaults` gets called every time the page view tracking happens. It receives [`routeState`](/docs/Guides.md#routeState) which is convenient to send route specific information.
158 |
159 | If you want to include metrics data which is fetched from remote location upon the route change, you can define static `willTrackPageView` method in your route handler component which becomes available when you wrap your component with `exposeMetrics`. Then `willTrackPageView` gets called when auto page view is about to be fired.
160 |
161 | ```javascript
162 | import {exposeMetrics} from "react-metrics";
163 |
164 | @exposeMetrics
165 | class PageComponent extends React.Component {
166 | static willTrackPageView(routeState) {
167 | return yourPromise.then(data => {
168 | // this gets merged with the data returned by `pageDefaults`
169 | return data;
170 | });
171 | }
172 | render () {
173 | ...
174 | }
175 | }
176 | ```
177 |
178 | You can disable the automatic page view tracking and instead manually track page views by using `this.context.metrics.pageView()`
179 |
180 | ```javascript
181 | import {exposeMetrics, PropTypes} from "react-metrics";
182 |
183 | @exposeMetrics
184 | class PageComponent extends React.Component {
185 | static contextTypes = {
186 | metrics: PropTypes.metrics
187 | }
188 | static willTrackPageView() {
189 | // first, suppress the automatic call.
190 | return false;
191 | }
192 | componentDidMount() {
193 | const {value1, value2} = this.props;
194 | this.context.metrics.pageView({value1, value2});
195 | }
196 | render () {
197 | ...
198 | }
199 | }
200 | ```
201 |
202 | ### Custom Link Tracking
203 |
204 | #### Declarative vs Imperative tracking
205 |
206 | There are 2 ways to call `track` api from your component.
207 |
208 | 1. **Declarative** by adding the attributes `data-metrics-event-name` and `data-metrics-*` to a html element. `data-metrics-event-name` is the event name used for the metrics vendor.
209 |
210 | **Note:** `YourComponent` need to be in the child tree of the wrapped component so that the click event is bubbled up to the wrapped component's root node.
211 |
212 | Example:
213 |
214 | ```javascript
215 | class PaginationComponent extends React.Component {
216 | render() {
217 | const {commentId, totalPage, currentPage} = this.props;
218 | return (
219 |
240 | );
241 | }
242 | }
243 | ```
244 |
245 | In a case where the element you are tracking is not the click target, you can use [`MetricsElement`](/docs/api/ReactMetrics.md#MetricsElement).
246 | If you use [`MetricsElement`](/docs/api/ReactMetrics.md#MetricsElement) for all declarative tracking, we recommend turning off default track-binding by passing `useTrackBinding: false` in the [`metrics`](/docs/api/ReactMetrics.md#metrics) options.
247 |
248 | Example:
249 |
250 | ```javascript
251 | import {MetricsElement} from "react-metrics";
252 |
253 | class PaginationComponent extends React.Component {
254 | render() {
255 | const {commentId, totalPage, currentPage} = this.props;
256 | return (
257 |
258 | 0 ? "active" : ""}>
259 |
264 | Back
265 |
266 |
267 | ...
268 |
269 |
274 | Next
275 |
276 |
277 |
278 | );
279 | }
280 | }
281 | ```
282 |
283 | If you set `{prefix}-merge-pagedefaults="true"` to the declarative tracking, the custom link tracking metrics will get merged with `pageDefaults` metrics.
284 |
285 | 2. **Imperative** by calling the API explicitly. To do this, define `metrics` context as one of `contextTypes` in your child component. This allows you to call the `track` API. You can pass either an Object or a Promise as a second argument. It's your responsibility to implement the `track` API in your service, otherwise calling the API simply throws an error.
286 |
287 | Example:
288 |
289 | ```javascript
290 | import {PropTypes} from "react-metrics";
291 |
292 | class YourComponent extends React.Component {
293 | static contextTypes = {
294 | metrics: PropTypes.metrics
295 | }
296 |
297 | onSomethingUpdated(value) {
298 | this.context.metrics.track("customEventName", {value});
299 | }
300 |
301 | render() {
302 | ...
303 | }
304 | }
305 | ```
306 |
307 | ### Using your metrics vendor
308 |
309 | To send tracking to your metrics vendor, you can create your own service class with API methods.
310 |
311 | ```javascript
312 | class YourApiClass {
313 | pageView(eventName, params) {
314 | // your page view tracking logic here.
315 | }
316 | track(eventName, params) {
317 | // your custom link tracking logic here.
318 | }
319 | }
320 | ```
321 |
322 | or just as a plain object
323 |
324 | ```javascript
325 | const YourApiObject = {
326 | pageView: function (eventName, params) {
327 | // your page view tracking logic here.
328 | },
329 | track: function (eventName, params) {
330 | // your custom link tracking logic here.
331 | }
332 | }
333 | ```
334 |
335 | You don't have to return anything in your API, but if you do, it will be included as `response` in the tracking event payload.
336 | `react-metrics` will determine the success of the request in the form of `Promise`, so if you don't return anything, which `react-metrics` receives as `undefined` and convert it to `Promise.resolve(undefined)`, the request will be treated as success.
337 |
338 | If you need any initialization steps before `pageView` or `track` is called, we recommend you use a promise for lazy initialization.
339 |
340 | Example:
341 |
342 | ```javascript
343 | class YourApiClass {
344 | pageView(eventName, params) {
345 | return new Promise((resolve, reject) => {
346 | this.loadScript()
347 | .then(globalVendorObject => {
348 | const result = globalVendorObject.track(eventName, params);
349 | if (result) {
350 | resolve({
351 | eventName,
352 | params
353 | });
354 | } else {
355 | reject(new Error("tracking request failed"));
356 | }
357 | })
358 | .catch(err => {
359 | reject(err);
360 | });
361 | });
362 | }
363 | track(eventName, params) {
364 | // your custom link tracking logic here.
365 | }
366 | loadScript() {
367 | return this._promise || (this._promise = new Promise((resolve, reject) => {
368 | if (window.globalVendorObject) {
369 | resolve(window.globalVendorObject);
370 | } else {
371 | const script = document.createElement("script");
372 |
373 | script.onload = () => {
374 | resolve(window.globalVendorObject);
375 | };
376 |
377 | script.onerror = error => {
378 | reject(error);
379 | };
380 |
381 | script.src = "//some.vendor.com/lib.js";
382 | document.head.appendChild(script);
383 | }
384 | }));
385 | }
386 | }
387 | ```
388 |
389 | More complete example [here](/examples/vendors/AdobeTagManager.js).
390 |
391 | Then pass the class definition or an object to the `vendor.api`. You can also pass an instance of your service class if you want to pass some constructor arguments.
392 | You can define the name of the service which will be included in the response for each tracking request in `vendor.name`.
393 |
394 | ```javascript
395 | class Application extends React.Component {
396 | render() {
397 | return (
398 | {this.props.children}
399 | );
400 | }
401 | }
402 | export default metrics({
403 | vendors: [{
404 | name: "Your Metrics Service Name",
405 | api: new YourApiClass(options)
406 | }],
407 | pageDefaults: ...
408 | })(Application);
409 | ```
410 |
411 | ### Tracking custom metrics
412 |
413 | You can define any API method in your service and you can call it from context object.
414 | Let's say if your service defines `setUser` method which stores user identity, or `videoMileStone` method to track video consumption
415 |
416 | ```javascript
417 | const YourApiObject = {
418 | pageView: function (eventName, params) {
419 | ...
420 | },
421 | track: function (eventName, params) {
422 | ...
423 | },
424 | setUser: function (user) {
425 | // sends or store user information
426 | },
427 | videoMileStone: function(milestone) {
428 | // sends video consumption
429 | }
430 | }
431 | ```
432 |
433 | Then you can call them from your component.
434 |
435 | ```javascript
436 | import {PropTypes} from "react-metrics";
437 |
438 | class PageComponent extends React.Component {
439 | static contextTypes = {
440 | metrics: PropTypes.metrics
441 | }
442 |
443 | onSetUser(user) {
444 | this.context.metrics.setUser(user);
445 | }
446 |
447 | onVideoPlaybackTimeChange(time) {
448 | if (...) {
449 | ...
450 | this.context.metrics.videoMileStone({videoId, milestone, time});
451 | }
452 | }
453 |
454 | render () {
455 | ...
456 | }
457 | }
458 | ```
459 |
460 | ### How about using metrics outside of React Component?
461 |
462 | Yes, you can send metrics outside of React Component. Please see [here](/docs/api/ReactMetrics.md#createMetrics).
463 |
--------------------------------------------------------------------------------
2 |
3 | # React Metrics
4 |
5 | [](https://www.npmjs.org/package/react-metrics)
6 | [](https://travis-ci.org/nfl/react-metrics)
7 | [](https://david-dm.org/nfl/react-metrics)
8 | [](https://codecov.io/github/nfl/react-metrics?branch=master)
9 | [](CONTRIBUTING.md#pull-requests)
10 |
11 | An analytics module for [React](https://github.com/facebook/react).
12 |
13 | ## Requirements
14 |
15 | * React 0.14+
16 |
17 | ## Browser Requirements
18 |
19 | * IE10+
20 |
21 | ## Features
22 |
23 | * Unobtrusive feature injection through a root application component.
24 | * Supports page view tracking.
25 | * Supports both imperative and declarative custom link tracking.
26 | * Provides a custom event tracking API.
27 | * Supports multiple simultaneous analytics vendor tracking.
28 |
29 | ## Installation
30 |
31 | ```
32 | $ npm install --save react-metrics
33 | ```
34 |
35 | React Metrics depends on [Promise](https://promisesaplus.com/) to be available in browser. If your application support the browser which doesn't support Promise, please include the polyfill.
36 |
37 | ## Getting Started
38 |
39 | ### 1. Configure Metrics
40 |
41 | Refer to the [docs](/docs/) for more information on [configuration](/docs/api/ReactMetrics.md#config).
42 |
43 | ```javascript
44 | // Application.js
45 | import {metrics} from "react-metrics";
46 |
47 | const config = {
48 | vendors: [{
49 | name: "Google Analytics",
50 | api: new GoogleAnalytics({
51 | trackingId: "UA-********-*"
52 | })
53 | }],
54 | pageViewEvent: "pageLoad",
55 | pageDefaults: () => {
56 | return {
57 | siteName: "My Web Site",
58 | ...
59 | };
60 | }
61 | }
62 | ```
63 |
64 | ### 2. Wrap Application Level Component
65 |
66 | Compose your top level application component with `metrics` in order to provide `metrics` to all components and automatically enable page view tracking.
67 |
68 | ```javascript
69 | // Application.js
70 | class Application extends React.Component {
71 | render() {
72 | return (
73 | {this.props.children}
74 | );
75 | }
76 | }
77 | export default metrics(config)(Application);
78 | ```
79 |
80 | Alternatively, if your development environment supports ES7, use the [@decorator](http://babeljs.io/docs/plugins/syntax-decorators/) syntax instead:
81 |
82 | ```javascript
83 | // Application.js
84 | @metrics(config)
85 | class Application extends React.Component {
86 | render() {
87 | return (
88 | {this.props.children}
89 | );
90 | }
91 | }
92 | ```
93 |
94 | Your application will now automatically trigger page view tracking.
95 |
96 | ### 3. Add Custom Link Tracking
97 |
98 | a. Use `data-` attributes to enable custom link tracking on your DOM elements.
99 |
100 | ```javascript
101 | // PaginationComponent.js
102 | class PaginationComponent extends React.Component {
103 | render() {
104 | const {commentId, totalPage, currentPage} = this.props;
105 | return (
106 |