From 8de6ee9e24845f526194fa1539d3761aeee58daa Mon Sep 17 00:00:00 2001 From: Konstantin Date: Sat, 4 Nov 2023 18:39:55 +0100 Subject: [PATCH] fix: ensure GA tracking if cookie bar is disabled --- .../gatsby-browser.js | 10 ++++++++ gatsby-theme-portfolio-minimal/package.json | 2 ++ .../src/components/CookieBar/index.tsx | 23 +++++++++++++++++++ .../src/components/Layout/index.tsx | 4 ++-- yarn.lock | 10 ++++++++ 5 files changed, 47 insertions(+), 2 deletions(-) diff --git a/gatsby-theme-portfolio-minimal/gatsby-browser.js b/gatsby-theme-portfolio-minimal/gatsby-browser.js index 56e43c8..443cf09 100644 --- 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 index 792214f..906b857 100644 --- 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 index 5857ddb..27af2c4 100644 --- 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 { ); } + +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 index ced4e09..be81da1 100644 --- 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 {
{props.children}