Civic uk: Accept/reject behaviour

common/services/app/civic-uk/index.ts → common/services/app/civic-uk.ts

@@ -15,12 +15,20 @@ export const getAnalyticsConsentState = (
   const consentCookie = cookies.CookieControl;
 
   // Ensures this returns true for regular users
-  // that don't have the "Cookie works" toggle on/have defined the consent cookie
-  if (isCookiesWorkToggleOn && consentCookie !== undefined) {
-    const civicUKCookie: CivicUKCookie = JSON.parse(
-      decodeURIComponent(consentCookie)
-    );
-    return civicUKCookie.optionalCookies?.analytics === 'accepted';
+  // that don't have the "Cookie works" toggle on
+  if (isCookiesWorkToggleOn) {
+    // If the feature flag is ON and consent has been defined,
+    // return its value
+    if (consentCookie !== undefined) {
+      const civicUKCookie: CivicUKCookie = JSON.parse(
+        decodeURIComponent(consentCookie)
+      );
+
+      return civicUKCookie.optionalCookies?.analytics === 'accepted';
+    } else {
+      // If the feature flag is ON but consent has yet to be defined
+      return false;
+    }
   } else {
     return true;
   }

common/services/app/google-analytics.tsx

@@ -11,13 +11,14 @@ type Props = {
   data: {
     toggles?: Toggles;
   };
+  hasAnalyticsConsent: boolean;
 };
 
 // We send toggles as an event parameter to GA4 so we can determine the condition in which a particular event took place.
 // GA4 now limits event parameter values to 100 characters: https://support.google.com/analytics/answer/9267744?hl=en
 // So instead of sending the whole toggles JSON blob, we only look at the "test" typed toggles and send a concatenated string made of the toggles' name
 // , preceeded with a! if its value is false.
-function createToggleString(toggles: Toggles | undefined): string | null {
+function createABToggleString(toggles: Toggles | undefined): string | null {
   const testToggles = toggles
     ? Object.keys(toggles).reduce((acc, key) => {
         if (toggles?.[key].type === 'test') {
@@ -42,18 +43,40 @@ function createToggleString(toggles: Toggles | undefined): string | null {
     : null;
 }
 
-export const Ga4DataLayer: FunctionComponent<Props> = ({ data }) => {
-  const toggleString = createToggleString(data.toggles);
+export const Ga4DataLayer: FunctionComponent<Props> = ({
+  data,
+  hasAnalyticsConsent,
+}) => {
+  const abTestsToggleString = createABToggleString(data.toggles);
 
-  return toggleString ? (
+  return data.toggles?.cookiesWork?.value || abTestsToggleString ? (
     <script
       dangerouslySetInnerHTML={{
         __html: `
-        window.dataLayer = window.dataLayer || [];
-        window.dataLayer.push({
-          toggles: '${toggleString}'
-        });
-        `,
+            window.dataLayer = window.dataLayer || [];
+
+            ${
+              data.toggles?.cookiesWork?.value
+                ? `function gtag(){window.dataLayer.push(arguments);}
+
+              gtag('consent', 'default', {
+                'analytics_storage': ${
+                  hasAnalyticsConsent ? '"granted"' : '"denied"'
+                },
+                'ad_storage': 'denied',
+                'ad_user_data': 'denied',
+                'ad_personalization': 'denied'
+              });`
+                : ``
+            }
+
+            ${
+              abTestsToggleString &&
+              `window.dataLayer.push({
+                toggles: '${abTestsToggleString}'
+              });`
+            }
+          `,
       }}
     />
   ) : null;

common/services/app/civic-uk/scripts.tsx → common/views/components/ConsentAndScripts/ConsentAndScripts.CivicUK.tsx

@@ -70,11 +70,11 @@ const CivicUK = () => (
                   '__utmv',
                 ],
                 onAccept: function () {
-                  const event = new CustomEvent('analyticsConsentChange', {});
+                  const event = new CustomEvent('analyticsConsentChanged', { detail: { consent: 'granted' }});
                   window.dispatchEvent(event);
                 },
                 onRevoke: function () {
-                  const event = new CustomEvent('analyticsConsentChange', {});
+                  const event = new CustomEvent('analyticsConsentChanged', { detail: { consent: 'denied' } });
                   window.dispatchEvent(event);
                 },
               },

common/views/components/ConsentAndScripts/index.tsx

@@ -0,0 +1,50 @@
+import Head from 'next/head';
+import { useEffect, useState } from 'react';
+import CivicUK from './ConsentAndScripts.CivicUK';
+import { getAnalyticsConsentState } from '@weco/common/services/app/civic-uk';
+
+const ConsentAndScripts = ({ segmentSnippet }: { segmentSnippet: string }) => {
+  const [consentState, setConsentState] = useState(false);
+
+  const onAnalyticsConsentChanged = (
+    event: CustomEvent<{ consent: 'granted' | 'denied' }>
+  ) => {
+    // Toggle rendering of scripts
+    setConsentState(event.detail.consent === 'granted');
+
+    // Update datalayer config with consent value
+    gtag('consent', 'update', {
+      analytics_storage: event.detail.consent,
+    });
+  };
+
+  useEffect(() => {
+    setConsentState(getAnalyticsConsentState());
+
+    window.addEventListener(
+      'analyticsConsentChanged',
+      onAnalyticsConsentChanged
+    );
+
+    return () => {
+      window.removeEventListener(
+        'analyticsConsentChanged',
+        onAnalyticsConsentChanged
+      );
+    };
+  }, []);
+
+  return (
+    <>
+      {consentState && (
+        <Head>
+          <script dangerouslySetInnerHTML={{ __html: segmentSnippet }} />
+        </Head>
+      )}
+
+      <CivicUK />
+    </>
+  );
+};
+
+export default ConsentAndScripts;

common/views/components/Footer/Footer.Nav.tsx

@@ -120,6 +120,7 @@ const FooterNav = ({
           <li>
             <Buttons
               variant="ButtonSolid"
+              dataGtmTrigger="consent_test_btn"
               text="Cookie preference centre"
               clickHandler={() => {
                 window.CookieControl.open();

common/views/components/PageLayout/PageLayout.tsx

@@ -162,14 +162,22 @@ const PageLayoutComponent: FunctionComponent<Props> = ({
     <>
       <Head>
         <title>{fullTitle}</title>
-        <meta name="description" content={description} />
+        <meta key="metadescription" name="description" content={description} />
         <link rel="canonical" href={absoluteUrl} />
         {/* meta elements need to be contained as direct children of the Head element, so don't componentise the following */}
-        <meta property="og:site_name" content="Wellcome Collection" />
-        <meta property="og:type" content={openGraphType} />
-        <meta property="og:title" content={title} />
-        <meta property="og:description" content={description} />
-        <meta property="og:url" content={absoluteUrl} />
+        <meta
+          key="og:sitename"
+          property="og:site_name"
+          content="Wellcome Collection"
+        />
+        <meta key="og:type" property="og:type" content={openGraphType} />
+        <meta key="og:title" property="og:title" content={title} />
+        <meta
+          key="og:description"
+          property="og:description"
+          content={description}
+        />
+        <meta key="og:url" property="og:url" content={absoluteUrl} />
         <meta
           key="og:image"
           property="og:image"
@@ -207,9 +215,21 @@ const PageLayoutComponent: FunctionComponent<Props> = ({
           content={description}
         />
         <meta key="twitter:image" name="twitter:image" content={imageUrl} />
-        <meta name="twitter:image:alt" content={imageAltText} />
-        <meta httpEquiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta
+          key="twitter:image:alt"
+          name="twitter:image:alt"
+          content={imageAltText}
+        />
+        <meta
+          key="httpEquiv"
+          httpEquiv="X-UA-Compatible"
+          content="IE=edge,chrome=1"
+        />
+        <meta
+          key="viewport"
+          name="viewport"
+          content="width=device-width, initial-scale=1"
+        />
         <link
           rel="apple-touch-icon"
           sizes="180x180"

common/views/pages/_app.tsx

@@ -1,3 +1,4 @@
+import { NextPage } from 'next';
 import { AppProps } from 'next/app';
 import React, { useEffect, FunctionComponent, ReactElement } from 'react';
 import { ThemeProvider } from 'styled-components';
@@ -22,9 +23,10 @@ import { AppErrorProps } from '@weco/common/services/app';
 import usePrismicPreview from '@weco/common/services/app/usePrismicPreview';
 import useMaintainPageHeight from '@weco/common/services/app/useMaintainPageHeight';
 import { GaDimensions } from '@weco/common/services/app/google-analytics';
-import { NextPage } from 'next';
 import { deserialiseProps } from '@weco/common/utils/json';
 import { SearchContextProvider } from '@weco/common/views/components/SearchContext/SearchContext';
+import ConsentAndScripts from '@weco/common/views/components/ConsentAndScripts';
+import { renderSegmentSnippet } from './_document';
 
 // Error pages can't send anything via the data fetching methods as
 // the page needs to be rendered as soon as the error happens.
@@ -83,23 +85,10 @@ const WecoApp: FunctionComponent<WecoAppProps> = ({
 
   const serverData = isServerDataSet ? pageProps.serverData : defaultServerData;
 
-  const onAnalyticsConsentChange = () => {
-    // Have popup that says "Your cookie settings have been saved"
-  };
-
   useMaintainPageHeight();
-  useEffect(() => {
-    document.documentElement.classList.add('enhanced');
-  }, []);
 
   useEffect(() => {
-    window.addEventListener('analyticsConsentChange', onAnalyticsConsentChange);
-    return () => {
-      window.removeEventListener(
-        'analyticsConsentChange',
-        onAnalyticsConsentChange
-      );
-    };
+    document.documentElement.classList.add('enhanced');
   }, []);
 
   useEffect(() => {
@@ -133,6 +122,13 @@ const WecoApp: FunctionComponent<WecoAppProps> = ({
                     isFontsLoaded={useIsFontsLoaded()}
                   />
                   <LoadingIndicator />
+
+                  {pageProps.serverData?.toggles?.cookiesWork?.value && (
+                    <ConsentAndScripts
+                      segmentSnippet={renderSegmentSnippet()}
+                    />
+                  )}
+
                   {!pageProps.err &&
                     getLayout(<Component {...deserialiseProps(pageProps)} />)}
                   {pageProps.err && (

common/views/pages/_document.tsx

@@ -15,14 +15,13 @@ import {
   GoogleTagManager,
   GaDimensions,
 } from '@weco/common/services/app/google-analytics';
-import CivicUK from '@weco/common/services/app/civic-uk/scripts';
 
 const {
   ANALYTICS_WRITE_KEY = '78Czn5jNSaMSVrBq2J9K4yJjWxh6fyRI',
   NODE_ENV = 'development',
 } = process.env;
 
-function renderSegmentSnippet() {
+export function renderSegmentSnippet() {
   const opts = {
     apiKey: ANALYTICS_WRITE_KEY,
     page: false,
@@ -79,22 +78,26 @@ class WecoDoc extends Document<DocumentInitialPropsWithTogglesAndGa> {
     return (
       <Html lang="en">
         <Head>
-          {this.props.toggles?.cookiesWork?.value && <CivicUK />}
+          <>
+            {/* Adding toggles etc. to the datalayer so they are available to events in Google Tag Manager */}
+            <Ga4DataLayer
+              hasAnalyticsConsent={this.props.hasAnalyticsConsent}
+              data={{
+                toggles: this.props.toggles,
+              }}
+            />
 
-          {this.props.hasAnalyticsConsent && (
-            <>
-              {/* Adding toggles etc. to the datalayer so they are available to events in Google Tag Manager */}
-              <Ga4DataLayer
-                data={{
-                  toggles: this.props.toggles,
-                }}
-              />
-              <GoogleTagManager />
+            {/* Removing/readding this script on consent changes causes issues with meta tag duplicates
+            https://github.com/wellcomecollection/wellcomecollection.org/pull/10685#discussion_r1516298683 
+            Let's keep an eye on this issue and consider moving it next to the Segment script when it's fixed */}
+            <GoogleTagManager />
+
+            {!this.props.toggles?.cookiesWork?.value && (
               <script
                 dangerouslySetInnerHTML={{ __html: renderSegmentSnippet() }}
               />
-            </>
-          )}
+            )}
+          </>
         </Head>
         <body>
           <div id="top">