Frontend Analytics

analytics.js

// Google Analytics
class GoogleAnalytics {
  constructor() {
    this.ga = typeof window.ga === 'function' ? window.ga : () => null;
  }

  pageView = (params) => {
    setTimeout(() => this.ga('send', params, window.location.pathname));
  }
  event = (params) => {
    const eventParams = { ...params, hitType: 'event' };
    setTimeout(() => this.ga('send', eventParams));
  }
}

// Heap Analytics
class Heap {
  constructor() {
    this.track = window.heap ? window.heap.track : () => null;
  }

  pageView = (params) => {
    setTimeout(() => this.track(params, { url: window.location.pathname }));
  }

  event = (params) => {
    setTimeout(() => this.track('event', params));
  }
}


const sendAnalytics = (params = {}) => {
  const ga = new GoogleAnalytics();
  const heap = new Heap();
  if (typeof params === 'string' && params === 'pageview') {
    ga.pageView(params);
    heap.pageView(params);
  } else {
    ga.event(params);
    heap.event(params);
  }
};

export default sendAnalytics;

event_track.js

import analytics from 'config/analytics';

// Action tracking example
export const endorsementSkip = () =>
  (dispatch) => {
    dispatch(endorsementSkipStart());
    analytics({ eventCategory: 'Endorsements', eventAction: 'Skipped' });
    apiClient.post('/my/endorsements/skip')
      .then(
        (data) => dispatch(endorsementSkipSuccess(data)),
        (error) => dispatch(endorsementSkipFailure(error))
      );
};

index.js

import { BrowserRouter } from 'react-router-dom';
import analytics from 'config/analytics';

class Application extends PureComponent {

  onRouteChange = (currentProps, nextProps) => {
    if (!nextProps || (currentProps.location.pathname !== nextProps.location.pathname)) {
      analytics('pageview');
    }
  }
  
  render() {
    // ...
  }
}