Merge pull request #23 from smooth-code/enable-ga-in-dev-mode

feat(google-analytics): enable google analytics in dev mode

Author: gregberge

packages/smooth-plugin-google-analytics/src/smooth-browser.js

@@ -1,34 +1,34 @@
 /* eslint-env browser */
 export function onRouteUpdate({ location }) {
   // Don't track while developing.
-  if (process.env.NODE_ENV === 'production' && typeof ga === 'function') {
-    if (
-      location &&
-      typeof window.excludeGAPaths !== 'undefined' &&
-      window.excludeGAPaths.some(rx => rx.test(location.pathname))
-    ) {
-      return
-    }
+  if (typeof ga !== 'function') return
 
-    // wrap inside a timeout to make sure react-helmet is done with it's changes (https://github.com/gatsbyjs/gatsby/issues/9139)
-    // reactHelmet is using requestAnimationFrame so we should use it too: https://github.com/nfl/react-helmet/blob/5.2.0/src/HelmetUtils.js#L296-L299
-    const sendPageView = () => {
-      window.ga('set', {
-        page: location
-          ? location.pathname + location.search + location.hash
-          : undefined,
-        title: document.title,
-      })
-      window.ga('send', 'pageview')
-    }
+  if (
+    location &&
+    typeof window.excludeGAPaths !== 'undefined' &&
+    window.excludeGAPaths.some(rx => rx.test(location.pathname))
+  ) {
+    return
+  }
+
+  // wrap inside a timeout to make sure react-helmet is done with it's changes (https://github.com/gatsbyjs/gatsby/issues/9139)
+  // reactHelmet is using requestAnimationFrame so we should use it too: https://github.com/nfl/react-helmet/blob/5.2.0/src/HelmetUtils.js#L296-L299
+  function sendPageView() {
+    window.ga('set', {
+      page: location
+        ? location.pathname + location.search + location.hash
+        : undefined,
+      title: document.title,
+    })
+    window.ga('send', 'pageview')
+  }
 
-    if ('requestAnimationFrame' in window) {
-      requestAnimationFrame(() => {
-        requestAnimationFrame(sendPageView)
-      })
-    } else {
-      // simulate 2 rAF calls
-      setTimeout(sendPageView, 32)
-    }
+  if ('requestAnimationFrame' in window) {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(sendPageView)
+    })
+  } else {
+    // simulate 2 rAF calls
+    setTimeout(sendPageView, 32)
   }
 }

packages/smooth-plugin-google-analytics/src/smooth-node.js

@@ -20,10 +20,6 @@ exports.onRenderBody = (
   { setHeadComponents, setPostBodyComponents },
   options,
 ) => {
-  if (process.env.NODE_ENV !== 'production') {
-    return null
-  }
-
   // Lighthouse recommends pre-connecting to google analytics
   setHeadComponents([
     <link
@@ -78,13 +74,19 @@ exports.onRenderBody = (
     })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
   }
   if (typeof ga === "function") {
+    
     ga('create', '${options.trackingId}', '${
           typeof options.cookieDomain === `string`
             ? options.cookieDomain
             : `auto`
         }', ${
           typeof options.name === `string` ? `'${options.name}', ` : ``
         }${JSON.stringify(gaCreateOptions)});
+      ${
+        process.env.NODE_ENV !== 'production'
+          ? `ga('set', 'sendHitTask', null);`
+          : ''
+      }
       ${
         typeof options.anonymize !== `undefined` && options.anonymize === true
           ? `ga('set', 'anonymizeIp', true);`

packages/smooth/src/router/HiddenRouter.js

@@ -42,6 +42,7 @@ export function HiddenRouter({ children }) {
   const { history } = useRouter()
   const hiddenHistory = useHiddenHistory()
   const promises = useRef([])
+  const timeoutRef = useRef()
 
   const flush = useCallback(() => {
     if (promises.current.length || !hiddenHistory.state) return
@@ -60,7 +61,8 @@ export function HiddenRouter({ children }) {
         }
         // 65ms is 4 frames, pretty invisible when we change page
         // it ensures that React have time to start a new request for an example
-        setTimeout(() => flush(), 65)
+        clearTimeout(timeoutRef.current)
+        timeoutRef.current = setTimeout(() => flush(), 65)
       })
       promises.current.push(promise)
     },