diff --git a/app/src/views/RootLayout/i18n.json b/app/src/views/RootLayout/i18n.json index ffac8a4194..29de117986 100644 --- a/app/src/views/RootLayout/i18n.json +++ b/app/src/views/RootLayout/i18n.json @@ -7,6 +7,7 @@ "environmentTextTesting": "Testing Site", "cookiesBannerDescription": "By entering this website, you consent to the use of technologies, such as cookies and analytics. These will be used to analyse traffic to the website, allowing us to understand visitor preferences and improve our services", "cookiesBannerLearnMore": "Learn more", - "cookiesBannerIAccept": "I Accept" + "cookiesBannerIAccept": "I Accept", + "cookiesReject": "Reject" } -} \ No newline at end of file +} diff --git a/app/src/views/RootLayout/index.tsx b/app/src/views/RootLayout/index.tsx index 8f595da69e..f53a9194ea 100644 --- a/app/src/views/RootLayout/index.tsx +++ b/app/src/views/RootLayout/index.tsx @@ -52,6 +52,11 @@ import { import i18n from './i18n.json'; import styles from './styles.module.css'; +interface CustomWindow extends Window { + gtag?: (...args: any[]) => void; + dataLayer?: any[]; +} + // eslint-disable-next-line import/prefer-default-export export function Component() { const { state } = useNavigation(); @@ -66,17 +71,70 @@ export function Component() { const [languagePending, setLanguagePending] = useState(false); - // FIXME: To be made functional after the implications of cookie rejections are finalized const [ isCookiesBannerVisible, { setFalse: hideCookiesBanner }, - ] = useBooleanState(false); + ] = useBooleanState(true); + + const loadGoogleAnalytics = useCallback(() => { + const consent = JSON.parse(sessionStorage.getItem('cookie-consent') || '{}'); + + if (isAuthenticated || consent.analytics) { + const win = window as CustomWindow; + + if (!win.gtag) { + const script = document.createElement('script'); + script.src = 'https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXX-X'; + script.async = true; + document.head.appendChild(script); + + win.dataLayer = win.dataLayer || []; + win.gtag = (...args) => win.dataLayer!.push(args); + } + + win.gtag('js', new Date()); + // TODO Add Google Analytics ID + win.gtag('config', 'UA-XXXXXXX-X', { anonymize_ip: true }); + } + }, [isAuthenticated]); + + const handleAccept = useCallback(() => { + const consent = { analytics: true }; + sessionStorage.setItem('cookie-consent', JSON.stringify(consent)); + + loadGoogleAnalytics(); + + hideCookiesBanner(); + }, [ + hideCookiesBanner, + loadGoogleAnalytics, + ]); + + const handleReject = useCallback(() => { + sessionStorage.setItem('cookie-consent', JSON.stringify({ analytics: false })); + + const gaScript = document.querySelector('script[src*="googletagmanager.com/gtag/js"]'); + if (gaScript) { + gaScript.remove(); + } + + // TODO: Add Google Analytics ID + window['ga-disable-UA-XXXXXXX-X'] = true; - const handleClick = useCallback(() => { - // FIXME: Add cookies permission to session storage hideCookiesBanner(); }, [hideCookiesBanner]); + useEffect(() => { + const savedConsent = JSON.parse(sessionStorage.getItem('cookie-consent') || '{}'); + + if (isAuthenticated || savedConsent.analytics) { + loadGoogleAnalytics(); + } + }, [ + isAuthenticated, + loadGoogleAnalytics, + ]); + const { currentLanguage, setStrings, @@ -436,39 +494,44 @@ export function Component() { - {(isCookiesBannerVisible || environment !== 'production') && ( + {!isAuthenticated && isCookiesBannerVisible && userSkip && (
- {isCookiesBannerVisible && ( - - - )} - spacing="comfortable" - actions={( - <> - - {strings.cookiesBannerLearnMore} - - - - )} - /> - - )} + + + )} + spacing="comfortable" + actions={( + <> + + {strings.cookiesBannerLearnMore} + + + + + )} + /> + {environment !== 'production' && (
{/* NOTE: We are not translating alpha server names */}