feat: google analytics refactor

newrelic · Oct 29, 2020 · 10f9a8b · 10f9a8b
1 parent 7ff9bd3
commit 10f9a8b
Show file tree

Hide file tree

Showing 6 changed files with 1,312 additions and 108 deletions.
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -160,5 +160,18 @@ module.exports = {
       },
     },
     'gatsby-plugin-meta-redirect',
+    {
+      resolve: 'gatsby-plugin-gdpr-tracking',
+      options: {
+        debug: true,
+        googleAnalytics: {
+          trackingId: 'UA-3047412-33',
+          autoStart: false,
+          anonymize: true,
+          controlCookieName: 'newrelic-gdpr-consent',
+        },
+        environments: ['production'],
+      },
+    },
   ],
 };
diff --git a/gatsby-ssr.js b/gatsby-ssr.js
@@ -54,23 +54,5 @@ const onPreRenderHTML = ({
   ]);
 };
 
-const onRenderBody = ({ setHeadComponents }) => {
-  if (process.env.NODE_ENV !== `production`) {
-    return null;
-  }
-  // Pre-connect to google analytics
-  return setHeadComponents([
-    <link
-      rel="preconnect"
-      key="preconnect-google-analytics"
-      href="https://www.google-analytics.com"
-    />,
-    <link
-      rel="dns-prefetch"
-      key="dns-prefetch-google-analytics"
-      href="https://www.google-analytics.com"
-    />,
-  ]);
-};
 
-export { onPreRenderHTML, onRenderBody, wrapPageElement };
+export { onPreRenderHTML, wrapPageElement };
diff --git a/package.json b/package.json
@@ -16,8 +16,6 @@
     "gatsby": "^2.24.85",
     "gatsby-image": "^2.4.20",
     "gatsby-plugin-emotion": "^4.3.12",
-    "gatsby-plugin-google-analytics": "^2.3.15",
-    "gatsby-plugin-google-tagmanager": "^2.3.14",
     "gatsby-plugin-layout": "^1.3.12",
     "gatsby-plugin-manifest": "^2.4.33",
     "gatsby-plugin-mdx": "^1.2.43",
@@ -70,10 +68,12 @@
     "eslint-plugin-jsx-a11y": "^6.3.1",
     "eslint-plugin-markdown": "^1.0.2",
     "eslint-plugin-react-hooks": "^4.2.0",
+    "gatsby-plugin-gdpr-tracking": "^1.2.2",
     "husky": "^4.2.5",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.0.1",
     "jest-emotion": "^10.0.32",
+    "npm": "^6.14.8",
     "patch-package": "^6.2.2",
     "prettier": "2.0.4",
     "react-test-renderer": "^16.13.1"

diff --git a/src/components/CookieApprovalDialog.js b/src/components/CookieApprovalDialog.js
@@ -12,10 +12,10 @@ const CookieApprovalDialog = ({ className, setCookieConsent }) => {
   const [isCookieSet, setIsCookieSet] = useState(true);
 
   useEffect(() => {
-    setIsCookieSet(Cookies.get(gdprConsentCookieName) !== undefined);
+    setIsCookieSet(Cookies.get(gdprConsentCookieName));
   }, []);
 
-  function writeCookie(answer) {
+  const writeCookie = (answer) => {
     const currentEnvironment =
       process.env.ENV || process.env.NODE_ENV || 'development';
     const options = { expires: 365 /* days */ };
@@ -25,8 +25,9 @@ const CookieApprovalDialog = ({ className, setCookieConsent }) => {
 
     Cookies.set(gdprConsentCookieName, String(!!answer), options);
     setIsCookieSet(true);
+
     answer && setCookieConsent(true);
-  }
+  };
 
   if (isCookieSet) {
     return null;

diff --git a/src/layouts/MainLayout.js b/src/layouts/MainLayout.js
@@ -1,8 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { css } from '@emotion/core';
-
-import { Helmet } from 'react-helmet';
 import { GlobalHeader } from '@newrelic/gatsby-theme-newrelic';
 import { graphql, useStaticQuery } from 'gatsby';
 import Cookies from 'js-cookie';
@@ -15,7 +13,6 @@ import usePageContext from '../hooks/usePageContext';
 import useResizeObserver from '../hooks/useResizeObserver';
 import { useLocation } from '@reach/router';
 
-const gaTrackingId = 'UA-3047412-33';
 const gdprConsentCookieName = 'newrelic-gdpr-consent';
 
 const MainLayout = ({ children }) => {
@@ -47,15 +44,17 @@ const MainLayout = ({ children }) => {
     ? null
     : `${siteMetadata.repository}/blob/main/${fileRelativePath}`;
 
-  useEffect(() => {
-    const consentValue = Cookies.get(gdprConsentCookieName) === 'true';
-    consentValue && setCookieConsent(true);
-  }, []);
-
   useEffect(() => {
     setIsMobileNavOpen(false);
   }, [location.pathname]);
 
+  useEffect(() => {
+    const consentValue = Cookies.get(gdprConsentCookieName) === 'true';
+    setCookieConsent(consentValue);
+
+    consentValue && window.trackGoogleAnalytics();
+  }, [cookieConsent]);
+
   return (
     <div
       css={css`
@@ -67,20 +66,6 @@ const MainLayout = ({ children }) => {
         grid-template-rows: auto 1fr;
       `}
     >
-      <Helmet>
-        {cookieConsent ? (
-          <script>
-            {`(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-          (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-          })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
-
-          ga('create', '${gaTrackingId}', 'auto');
-          ga('set', 'anonymizeIp', true);
-          ga('send', 'pageview');`}
-          </script>
-        ) : null}
-      </Helmet>
       <div
         ref={headerRef}
         css={css`