fix: don't initialize|track GA events in development

Author: asapzacy

src/config/analytics.js

@@ -1,5 +1,4 @@
 const ReactGA = require('react-ga')
-ReactGA.initialize('UA-86342987-2')
 
 export const logPageView = () => {
   ReactGA.set({ page: window.location.pathname })

src/containers/Main/MainContainer.js

@@ -8,35 +8,31 @@ import { logPageView } from 'config/analytics'
 import s from './Main.scss'
 
 class MainContainer extends Component {
-  constructor() {
-    super()
-    this.state = {
-      screenWidth: 0,
-      menuHeight: 0,
-      isMenuOpen: false
-    }
-    this.triggerMenu = this.triggerMenu.bind(this)
-    this.hideMenu = this.hideMenu.bind(this)
-    this.getScreenWidth = this.getScreenWidth.bind(this)
+  state = {
+    screenWidth: 0,
+    menuHeight: 0,
+    isMenuOpen: false
   }
 
   componentDidMount() {
     /* eslint-disable-next-line */
-    console.log('asappppppppppp')
+    console.log('asap', process.env.NODE_ENV, Date.now())
     this.loadFonts()
     this.getScreenWidth()
     window.addEventListener('resize', this.getScreenWidth)
   }
 
   componentDidUpdate() {
-    logPageView()
+    if (process.env.NODE_ENV === 'production') {
+      logPageView()
+    }
   }
 
   componentWillUnmount() {
     window.removeEventListener('resize', this.getScreenWidth)
   }
 
-  loadFonts() {
+  loadFonts = () => {
     WebFont.load({
       google: { families: ['Comfortaa:300,400,700'] },
       active() {
@@ -46,7 +42,7 @@ class MainContainer extends Component {
     })
   }
 
-  getScreenWidth() {
+  getScreenWidth = () => {
     this.setState({ screenWidth: window.innerWidth }, () => {
       const header = document.querySelector('header')
       const navHeight = header.querySelector('nav').scrollHeight
@@ -63,7 +59,8 @@ class MainContainer extends Component {
       }
     })
   }
-  triggerMenu() {
+
+  triggerMenu = () => {
     const header = document.querySelector('header')
     const navHeight = header.querySelector('nav').scrollHeight
     if (this.state.isMenuOpen) {
@@ -76,7 +73,8 @@ class MainContainer extends Component {
       menuHeight: !this.state.isMenuOpen ? navHeight : 0
     })
   }
-  hideMenu(event) {
+
+  hideMenu = event => {
     let el = event.target || event.srcElement
     while (el) {
       if (el.nodeName === 'A') {
@@ -86,11 +84,13 @@ class MainContainer extends Component {
       el = el.parentNode
     }
   }
+
   render() {
     const { isMenuOpen, menuHeight } = this.state
     const appHeight = {
       height: isMenuOpen ? `calc(100% + ${menuHeight / 2}px)` : '100%'
     }
+
     return (
       <div className={s.outerContainer} style={appHeight}>
         <Header triggerMenu={this.triggerMenu} {...this.state} />

src/index.js

@@ -2,6 +2,7 @@ import React from 'react'
 import { render } from 'react-dom'
 import { BrowserRouter as Router } from 'react-router-dom'
 import { AppContainer } from 'react-hot-loader'
+import ReactGA from 'react-ga'
 import * as Sentry from '@sentry/browser'
 
 import { MainContainer as Root } from 'containers'
@@ -12,6 +13,7 @@ if (process.env.NODE_ENV === 'production') {
   Sentry.init({
     dsn: 'https://66e8a28472ba439eabfa9cb013eaa1b4@sentry.io/1540454'
   })
+  ReactGA.initialize('UA-86342987-2')
 }
 
 const renderApp = Root => {