Google Analytics

Description

A react component that uses an event emitter with React-GA to connect to Google Analytics.

Props

• location - (Object, Required) - Location of the browser.
• isEnvironment - (Boolean, Required) - Specify what environmen is being used to determine if the component should connect to Google Analytics. Useful to avoid using it in development.
• id - (String, Required) - The Google Analytics ID.
• emitter - (Object, Required) - The event emitter to use.
• modalviewEventName (String, Optional) - The event name to use for modalviews.
• pageviewEventName - (String, Optional) - The event name to use for the pageviews.
• eventEventName - (String, Optional) - The event name to use for the events.
• timingEventName - (String, Optional) - The event name to use for the timings.

Usage

import React from "react"
import PropTypes from "prop-types"
import { withRouter } from "react-router"

import emitter from "../events"

// NOTE: ENVIRONMENT_NAME is a global variable via webpack.DefinePlugin
// NOTE: GOOGLE_ANALYTICS_ID is served via dotenv-webpack

function Layout({ location }) {
    return (
        <div>
            <GoogleAnalytics
                isEnvironment={ENVIRONMENT_NAME === "production"}
                id={process.env.GOOGLE_ANALYTICS_ID}
                emitter={emitter}
                location={location}
            />
            <div>Page</div>
        </div>
    )
}

Layout.propTypes = {
    location: PropTypes.object.isRequired
}

const LayoutWithRouter = withRouter(Layout)

export default LayoutWithRouter