Merge pull request #10897 from wellcomecollection/tidy-consent-helpers

Cookies: pass marketing consent value to `serverData` and `gtag`
wellcomecollection · May 31, 2024 · 12df1ad · 12df1ad
2 parents 2d26808 + 3e52306
commit 12df1ad
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 16 deletions.
diff --git a/common/server-data/__mocks__/index.ts b/common/server-data/__mocks__/index.ts
@@ -22,6 +22,9 @@ export async function getServerData(): Promise<ServerData> {
       popupDialog: emptyPopupDialog(),
       collectionVenues: emptyPrismicQuery<CollectionVenuePrismicDocument>(),
     },
-    hasAnalyticsConsent: false,
+    consentStatus: {
+      analytics: false,
+      marketing: false,
+    },
   };
 }
diff --git a/common/server-data/index.ts b/common/server-data/index.ts
@@ -133,9 +133,12 @@ export const getServerData = async (
     toggles[enableToggle].value = true;
   }
 
-  const hasAnalyticsConsent = getConsentState('analytics', context);
+  const consentStatus = {
+    analytics: getConsentState('analytics', context),
+    marketing: getConsentState('marketing', context),
+  };
 
-  const serverData = { toggles, prismic, hasAnalyticsConsent };
+  const serverData = { toggles, prismic, consentStatus };
 
   return simplifyServerData(serverData);
 };
diff --git a/common/server-data/types.ts b/common/server-data/types.ts
@@ -13,19 +13,27 @@ import {
 export type ServerData = {
   toggles: Toggles;
   prismic: PrismicData;
-  hasAnalyticsConsent: boolean;
+  consentStatus: ConsentStatusProps;
 };
 
 export type SimplifiedServerData = {
   toggles: Toggles;
   prismic: SimplifiedPrismicData;
-  hasAnalyticsConsent: boolean;
+  consentStatus: ConsentStatusProps;
+};
+
+export type ConsentStatusProps = {
+  analytics: boolean;
+  marketing: boolean;
 };
 
 export const defaultServerData: SimplifiedServerData = {
   toggles: {},
   prismic: prismicDefaultValue,
-  hasAnalyticsConsent: false,
+  consentStatus: {
+    analytics: false,
+    marketing: false,
+  },
 };
 
 /**

diff --git a/common/services/app/google-analytics.tsx b/common/services/app/google-analytics.tsx
@@ -1,5 +1,6 @@
 import { FunctionComponent } from 'react';
 import { Toggles } from '@weco/toggles';
+import { ConsentStatusProps } from '@weco/common/server-data/types';
 
 export type GaDimensions = {
   partOf: string[];
@@ -11,7 +12,7 @@ type Props = {
   data: {
     toggles?: Toggles;
   };
-  hasAnalyticsConsent: boolean;
+  consentStatus: ConsentStatusProps;
 };
 
 // We send toggles as an event parameter to GA4 so we can determine the condition in which a particular event took place.
@@ -45,7 +46,7 @@ function createABToggleString(toggles: Toggles | undefined): string | null {
 
 export const Ga4DataLayer: FunctionComponent<Props> = ({
   data,
-  hasAnalyticsConsent,
+  consentStatus,
 }) => {
   const abTestsToggleString = createABToggleString(data.toggles);
 
@@ -61,11 +62,17 @@ export const Ga4DataLayer: FunctionComponent<Props> = ({
               
               gtag('consent', 'default', {
                 'analytics_storage': ${
-                  hasAnalyticsConsent ? '"granted"' : '"denied"'
+                  consentStatus.analytics ? '"granted"' : '"denied"'
+                },
+                'ad_storage': ${
+                  consentStatus.marketing ? '"granted"' : '"denied"'
+                },
+                'ad_user_data':  ${
+                  consentStatus.marketing ? '"granted"' : '"denied"'
+                },
+                'ad_personalization':  ${
+                  consentStatus.marketing ? '"granted"' : '"denied"'
                 },
-                'ad_storage': 'denied',
-                'ad_user_data': 'denied',
-                'ad_personalization': 'denied'
               });`
                 : ``
             }

diff --git a/common/views/pages/_document.tsx b/common/views/pages/_document.tsx
@@ -15,6 +15,7 @@ import {
   GoogleTagManager,
   GaDimensions,
 } from '@weco/common/services/app/google-analytics';
+import { ConsentStatusProps } from '@weco/common/server-data/types';
 
 // Don't attempt to destructure the process object
 // https://github.com/vercel/next.js/pull/20869/files
@@ -38,7 +39,7 @@ export function renderSegmentSnippet() {
 type DocumentInitialPropsWithTogglesAndGa = DocumentInitialProps & {
   toggles: Toggles;
   gaDimensions?: GaDimensions;
-  hasAnalyticsConsent: boolean;
+  consentStatus: ConsentStatusProps;
 };
 class WecoDoc extends Document<DocumentInitialPropsWithTogglesAndGa> {
   static async getInitialProps(
@@ -62,7 +63,7 @@ class WecoDoc extends Document<DocumentInitialPropsWithTogglesAndGa> {
         ...initialProps,
         toggles: pageProps.serverData?.toggles,
         gaDimensions: pageProps.gaDimensions,
-        hasAnalyticsConsent: pageProps.serverData?.hasAnalyticsConsent,
+        consentStatus: pageProps.serverData?.consentStatus,
         styles: (
           <>
             {initialProps.styles}
@@ -79,15 +80,15 @@ class WecoDoc extends Document<DocumentInitialPropsWithTogglesAndGa> {
     const cookiesWork = this.props.toggles?.cookiesWork?.value;
 
     const shouldRenderAnalytics =
-      !cookiesWork || (cookiesWork && this.props.hasAnalyticsConsent);
+      !cookiesWork || (cookiesWork && this.props.consentStatus.analytics);
 
     return (
       <Html lang="en">
         <Head>
           <>
             {/* Adding toggles etc. to the datalayer so they are available to events in Google Tag Manager */}
             <Ga4DataLayer
-              hasAnalyticsConsent={this.props.hasAnalyticsConsent}
+              consentStatus={this.props.consentStatus}
               data={{ toggles: this.props.toggles }}
             />