From 137c2f8d56939a76f60d6aca400be79c0313cf02 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-theme-portfolio-minimal/package.json | 2 ++ .../src/components/CookieBar/index.tsx | 17 +++++++++++++++++ .../src/components/Layout/index.tsx | 4 ++-- yarn.lock | 10 ++++++++++ 4 files changed, 31 insertions(+), 2 deletions(-) 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..8d92df1 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,19 @@ export function CookieBar(): React.ReactElement { ); } + +export function EnsureActivatedTrackingCookie() { + const location = useLocation(); + + React.useEffect(() => { + const cookie = Cookies.get('gatsby-gdpr-google-analytics'); + if (cookie === 'true') return; + + try { + Cookies.set('gatsby-gdpr-google-analytics', 'true'); + initializeAndTrack(location); + } catch {} + }, []); + + 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}