Skip to content

Update cookie consent response #1772

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 1 commit into
base: develop
Choose a base branch
from
Draft

Update cookie consent response #1772

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions app/src/views/RootLayout/i18n.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
}
135 changes: 99 additions & 36 deletions app/src/views/RootLayout/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,11 @@
import i18n from './i18n.json';
import styles from './styles.module.css';

interface CustomWindow extends Window {
gtag?: (...args: any[]) => void;

Check failure on line 56 in app/src/views/RootLayout/index.tsx

View workflow job for this annotation

GitHub Actions / Lint JS 

Unexpected any. Specify a different type
dataLayer?: any[];

Check failure on line 57 in app/src/views/RootLayout/index.tsx

View workflow job for this annotation

GitHub Actions / Lint JS 

Unexpected any. Specify a different type
}

// eslint-disable-next-line import/prefer-default-export
export function Component() {
const { state } = useNavigation();
Expand All @@ -66,17 +71,70 @@

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]);
Comment on lines +79 to +99
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we don't need this, also this function is flawed.
Some of it are,

  1. The TAG should be the actual google analytics tag. i, e. the placeholder tag doesn't work.
  2. We should use GA4 tags.
  3. This loading is already handled by the plugin that installs google analytics


const handleAccept = useCallback(() => {
const consent = { analytics: true };
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could just use a boolean here

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();
}
Comment on lines +116 to +119
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we don't need to remove the script all-together. we should just update the consent.


// TODO: Add Google Analytics ID
window['ga-disable-UA-XXXXXXX-X'] = true;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

how does this work?


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,
Expand Down Expand Up @@ -436,39 +494,44 @@
</div>
<GlobalFooter className={styles.footer} />
<AlertContainer />
{(isCookiesBannerVisible || environment !== 'production') && (
{!isAuthenticated && isCookiesBannerVisible && userSkip && (
<div className={styles.bannersContainer}>
{isCookiesBannerVisible && (
<PageContainer className={styles.cookiesBanner}>
<Container
withoutWrapInHeading
headingDescription={strings.cookiesBannerDescription}
icons={(
<AlertInformationLineIcon
className={styles.alertInfoIcon}
/>
)}
spacing="comfortable"
actions={(
<>
<Link
to="cookiePolicy"
variant="tertiary"
>
{strings.cookiesBannerLearnMore}
</Link>
<Button
name={undefined}
variant="primary"
onClick={handleClick}
>
{strings.cookiesBannerIAccept}
</Button>
</>
)}
/>
</PageContainer>
)}
<PageContainer className={styles.cookiesBanner}>
<Container
withoutWrapInHeading
headingDescription={strings.cookiesBannerDescription}
icons={(
<AlertInformationLineIcon
className={styles.alertInfoIcon}
/>
)}
spacing="comfortable"
actions={(
<>
<Link
to="cookiePolicy"
variant="tertiary"
>
{strings.cookiesBannerLearnMore}
</Link>
<Button
name={undefined}
variant="primary"
onClick={handleReject}
>
{strings.cookiesReject}
</Button>
<Button
name={undefined}
variant="primary"
onClick={handleAccept}
>
{strings.cookiesBannerIAccept}
</Button>
</>
)}
/>
</PageContainer>
{environment !== 'production' && (
<div className={styles.environmentBanner}>
{/* NOTE: We are not translating alpha server names */}
Expand Down
Loading