fix: ensure GA tracking if cookie bar is disabled

konstantinmuenster · Nov 5, 2023 · 8de6ee9 · 8de6ee9
1 parent 612358e
commit 8de6ee9
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 2 deletions.
diff --git a/gatsby-theme-portfolio-minimal/gatsby-browser.js b/gatsby-theme-portfolio-minimal/gatsby-browser.js
@@ -1,5 +1,7 @@
 require('./src/globalStyles/prism.css');
 
+const Cookies = require('js-cookie');
+
 exports.onRouteUpdate = ({ location, prevLocation }) => {
     if (location && location.state) location.state.referrer = prevLocation ? prevLocation.pathname : null;
 
@@ -17,3 +19,11 @@ exports.onRouteUpdate = ({ location, prevLocation }) => {
         }, 750);
     }
 };
+
+exports.onClientEntry = (_, options) => {
+    if (options.googleAnalytics) {
+        Cookies.set('portfolio-minimal-ga-configured', true, { expires: 365 });
+    } else {
+        Cookies.remove('portfolio-minimal-ga-configured');
+    }
+};
diff --git a/gatsby-theme-portfolio-minimal/package.json b/gatsby-theme-portfolio-minimal/package.json
@@ -23,6 +23,7 @@
         "react-dom": "^18"
     },
     "devDependencies": {
+        "@types/js-cookie": "^3.0.5",
         "@types/node": "^18.11.9",
         "@types/react": "^18.0.25",
         "@types/react-dom": "^18.0.8",
@@ -66,6 +67,7 @@
         "gatsby-transformer-json": "^5.0.0",
         "gatsby-transformer-remark": "^6.0.0",
         "gatsby-transformer-sharp": "^5.0.0",
+        "js-cookie": "^3.0.5",
         "mini-svg-data-uri": "^1.4.4",
         "normalize.css": "^8.0.1",
         "prismjs": "^1.29.0",

diff --git a/gatsby-theme-portfolio-minimal/src/components/CookieBar/index.tsx b/gatsby-theme-portfolio-minimal/src/components/CookieBar/index.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import CookieConsent from 'react-cookie-consent';
+import Cookies from 'js-cookie';
 import { initializeAndTrack } from 'gatsby-plugin-gdpr-cookies';
 import { useLocation } from '@reach/router';
 import { Animation } from '../Animation';
@@ -26,3 +27,25 @@ export function CookieBar(): React.ReactElement {
         </Animation>
     );
 }
+
+export function EnsureActivatedTrackingCookie() {
+    const location = useLocation();
+
+    React.useEffect(() => {
+        const configured = Cookies.get('portfolio-minimal-ga-configured');
+        const enabled = Cookies.get('gatsby-gdpr-google-analytics');
+
+        if (configured !== 'true') return;
+        if (configured === 'true' && enabled === 'true') return;
+
+        try {
+            Cookies.set('gatsby-gdpr-google-analytics', 'true');
+            initializeAndTrack(location);
+        } catch {
+            Cookies.remove('gatsby-gdpr-google-analytics');
+            console.warn('Could not initialize Google Analytics');
+        }
+    }, []);
+
+    return null;
+}
diff --git a/gatsby-theme-portfolio-minimal/src/components/Layout/index.tsx b/gatsby-theme-portfolio-minimal/src/components/Layout/index.tsx
@@ -9,7 +9,7 @@ import { Theme, useGlobalState } from '../../context';
 import { SplashScreen } from '../SplashScreen';
 import { Footer } from '../Footer';
 import { Header } from '../Header';
-import { CookieBar } from '../CookieBar';
+import { CookieBar, EnsureActivatedTrackingCookie } from '../CookieBar';
 import * as classes from './style.module.css';
 
 interface LayoutProps {
@@ -49,7 +49,7 @@ export function Layout(props: LayoutProps): React.ReactElement {
                 <Header />
                 <main>{props.children}</main>
                 <Footer />
-                {props.useCookieBar && <CookieBar />}
+                {props.useCookieBar ? <CookieBar /> : <EnsureActivatedTrackingCookie />}
             </div>
         </>
     );

diff --git a/yarn.lock b/yarn.lock
@@ -2454,6 +2454,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/js-cookie@^3.0.5":
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/@types/js-cookie/-/js-cookie-3.0.5.tgz#5eba4033a4f17fb2b29d975892694315194eca33"
+  integrity sha512-dtLshqoiGRDHbHueIT9sjkd2F4tW1qPSX2xKAQK8p1e6pM+Z913GM1shv7dOqqasEMYbC5zEaClJomQe8OtQLA==
+
 "@types/json-schema@*", "@types/json-schema@^7.0.4", "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.7", "@types/json-schema@^7.0.8", "@types/json-schema@^7.0.9":
   version "7.0.11"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3"
@@ -8395,6 +8400,11 @@ js-cookie@^2.2.1:
   resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-2.2.1.tgz#69e106dc5d5806894562902aa5baec3744e9b2b8"
   integrity sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==
 
+js-cookie@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-3.0.5.tgz#0b7e2fd0c01552c58ba86e0841f94dc2557dcdbc"
+  integrity sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==
+
 js-sdsl@^4.1.4:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/js-sdsl/-/js-sdsl-4.3.0.tgz#aeefe32a451f7af88425b11fdb5f58c90ae1d711"