sgpl/bundles/ga.js

import IS_BROWSER from '../helpers/is-browser'
import { createSelector, HAS_DEBUG_FLAG } from 'redux-bundler'

const valid = ['eventCategory', 'eventAction', 'eventLabel', 'eventValue']
const isValidateEvent = obj => Object.keys(obj).every(valid.includes)

export default (gaId, prefix = '') => {
  // set up GA
  const ga = window.ga = function () {
    ga.q.push(arguments)
  }
  ga.q = []
  ga.l = Date.now()
  ga('create', gaId, 'auto')

  return {
    name: 'googleAnalytics',
    selectAnalyticsData: createSelector(
      'selectRouteInfo',
      ({pattern, url, params}) => ({
        pageName: `${prefix}${pattern}`,
        meta: Object.assign({}, params, {url})
      })
    ),
    init: (store) => {
      let data
      store.subscribe(() => {
        const result = store.selectAnalyticsData()
        if (result !== data) {
          window.ga('set', 'page', result.pageName, result.meta)
          window.ga('send', 'pageview')
          data = result
        }
      })
    },
    getMiddleware: () => {
      return ({getState}) => next => action => {
        if (IS_BROWSER && action.ga) {
          if (HAS_DEBUG_FLAG) {
            if (!isValidateEvent(action.ga)) {
              console.error('GA event data', action.ga)
            } else {
              console.log('GA event:', action.ga)
            }
          }
          window.ga('send', 'event', action.ga)
        }
        next(action)
      }
    }
  }
}