Skip to content
Better analytics. Better data.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
main
website
.eslintrc.js
.gitignore
.npmignore
.nvmrc
CHANGELOG.md
Readme.md
commitlint.config.js
cz-config.js
lerna.json
package.json
yarn.lock

Readme.md

An analytics module for React that enables aggregating data properties in your events.

Features

  • Unobtrusive feature injection through a root application component.
  • Supports page view tracking.
  • Supports imperative custom link tracking.
    • To do: Support declarative custom link tracking
  • Provides a custom event tracking API.
  • Supports multiple simultaneous analytics vendor tracking.

Installation

$ npm install --save react-merge-metrics
$ yarn add react-merge-metrics

Getting Started

1. Configure Metrics

// App.js
import packageJson from 'src/package.json'

export default function App() {
  
  return (
    <MetricsProvider
      analytics={{
        track: (name, props) => {/*...*/},
        page: (name, props) => {/*...*/}
      }}
      properties={{
        version: packageJson.version,
      }}
    >
      {/*...The rest of your app*/}
    </MetricsProvider>
  )
}

3. Track Page Views

export default function Home() {
  return (
    <PageView 
      ready={initialized}
      name="Homepage Viewed"
      properties={{
        // ...additionalProperties
      }}
    >
      {/*The rest of your home page...*/}    
    </PageView>
  )
}                  

4. Custom Event Tracking

export default function connectMetrics(Navbar({metrics}) {
  
  const {
    analytics,
    properties
  } = metrics
  
  const logout = () => {
    analytics.track('User Logged Out', {
      ...properties,
      /* Any additional properties */
    })
    
    // The rest of your logout logic ...
  }
  

})                

Analytics Vendor Implementations

react-metrics does not automatically supply any vendor analytics. You need to integrate with an analytics vendor to actually track something for reporting.

Example

Refer to the website for further documentation. It uses react-merge-metrics to console.log pageviews.

Refer to the website source code to see how it's implemented.

You can’t perform that action at this time.