react-with-analytics

0.0.5 • Public • Published

react-with-analytics

npm version

Install

yarn add react-ga react-with-analytics

Usage

Initialize

import { initAnalytics } from 'react-with-analytics';
 
initAnalytics('UA-00000000-0');

Track pages, users and events

import { trackPage, trackUser, trackEvent } from 'react-with-analytics';
 
// you can use these anywhere in your app
trackPage('/home');
trackUser('@username');
trackEvent('Editing', 'Deleted Component', 'Game Widget'); // category, action, label

With react-router

import React from 'react';
 
import {
  BrowserRouter,
  Link,
  Route,
  Switch,
  withRouter
} from 'react-router-dom';
 
import withAnalytics, { initAnalytics } from 'react-with-analytics';
 
initAnalytics('UA-00000000-0');
 
const Home = () => (
  <div>
    HOME <Link to="/about">ABOUT</Link>
  </div>
);
 
const About = () => (
  <div>
    ABOUT <Link to="/">HOME</Link>
  </div>
);
 
const Root = () => (
  <Switch>
    <Route exact path="/" component={Home} />
    <Route path="/about" component={About} />
  </Switch>
);
 
// you should only use `withAnalytics` once to warp your whole app
const App = withRouter(withAnalytics(Root));
 
const AppWithRouter = () => (
  <BrowserRouter>
    <App />
  </BrowserRouter>
);
 
export default AppWithRouter;

With pagify-it

import React from 'react';
 
import Router, { Link } from 'pagify-it';
 
import { initAnalytics, trackPage } from 'react-with-analytics';
 
initAnalytics('UA-00000000-0');
 
const Home = () => (
  <div>
    HOME <Link to="/about">ABOUT</Link>
  </div>
);
 
const About = () => (
  <div>
    ABOUT <Link to="/">HOME</Link>
  </div>
);
 
const routes = {
  '/': Home,
  '/about': About
};
 
const App = () => <Router {...{ routes }} onChange={path => trackPage(path)} />;
 
export default App;

Readme

Keywords

none

Package Sidebar

Install

npm i react-with-analytics

Weekly Downloads

11

Version

0.0.5

License

MIT

Unpacked Size

9.85 kB

Total Files

7

Last publish

Collaborators

  • sonaye