feat(gatsby-plugin-google-analytics): Add pageTransitionDelay option

packages/gatsby-plugin-google-analytics/README.md

@@ -24,6 +24,8 @@ module.exports = {
         respectDNT: true,
         // Avoids sending pageview hits from custom paths
         exclude: ["/preview/**", "/do-not-track/me/too/"],
+        // Delays sending pageview hits on route update (in milliseconds)
+        pageTransitionDelay: 0,
         // Enables Google Optimize using your container Id
         optimizeId: "YOUR_GOOGLE_OPTIMIZE_TRACKING_ID",
         // Enables Google Optimize Experiment ID
@@ -102,6 +104,10 @@ If you enable this optional option, Google Analytics will not be loaded at all f
 
 If you need to exclude any path from the tracking system, you can add it (one or more) to this optional array as glob expressions.
 
+### `pageTransitionDelay`
+
+If your site uses any custom transitions on route update (e.g. [`gatsby-plugin-transition-link`](https://www.gatsbyjs.org/blog/2018-12-04-per-link-gatsby-page-transitions-with-transitionlink/)), then you can delay processing the page view event until the new page is mounted.
+
 ### `optimizeId`
 
 If you need to use Google Optimize for A/B testing, you can add this optional Optimize container id to allow Google Optimize to load the correct test parameters for your site.

packages/gatsby-plugin-google-analytics/src/__tests__/gatsby-browser.js

@@ -1,8 +1,6 @@
 import { onRouteUpdate } from "../gatsby-browser"
 import { Minimatch } from "minimatch"
 
-jest.useFakeTimers()
-
 describe(`gatsby-plugin-google-analytics`, () => {
   describe(`gatsby-browser`, () => {
     describe(`onRouteUpdate`, () => {
@@ -29,12 +27,17 @@ describe(`gatsby-plugin-google-analytics`, () => {
         })
 
         beforeEach(() => {
+          jest.useFakeTimers()
           window.ga = jest.fn()
           window.requestAnimationFrame = jest.fn(cb => {
             cb()
           })
         })
 
+        afterEach(() => {
+          jest.resetAllMocks()
+        })
+
         it(`does not send page view when ga is undefined`, () => {
           delete window.ga
 
@@ -72,6 +75,15 @@ describe(`gatsby-plugin-google-analytics`, () => {
           expect(setTimeout).toHaveBeenCalledTimes(1)
           expect(window.ga).toHaveBeenCalledTimes(2)
         })
+
+        it(`uses setTimeout when pageTransitionDelay is set`, () => {
+          onRouteUpdate({}, { pageTransitionDelay: 1000 })
+
+          jest.runAllTimers()
+
+          expect(setTimeout).toHaveBeenCalledTimes(1)
+          expect(window.ga).toHaveBeenCalledTimes(2)
+        })
       })
     })
   })

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

@@ -1,4 +1,4 @@
-export const onRouteUpdate = ({ location }) => {
+export const onRouteUpdate = ({ location }, pluginOptions = {}) => {
   if (process.env.NODE_ENV !== `production` || typeof ga !== `function`) {
     return null
   }
@@ -20,13 +20,14 @@ export const onRouteUpdate = ({ location }) => {
     window.ga(`send`, `pageview`)
   }
 
-  if (`requestAnimationFrame` in window) {
+  const delay = pluginOptions.pageTransitionDelay
+  if (delay || !(`requestAnimationFrame` in window)) {
+    // minimum delay to simulate a pair of requestAnimationFrame calls
+    setTimeout(sendPageView, Math.min(32, delay))
+  } else {
     requestAnimationFrame(() => {
       requestAnimationFrame(sendPageView)
     })
-  } else {
-    // simulate 2 rAF calls
-    setTimeout(sendPageView, 32)
   }
 
   return null