Remove GTM version of cookie banner and repurpose COOKIE_BANNER featu…

…re flag to control the banner
HedvigInsurance · Sep 19, 2024 · 735bc68 · 735bc68
1 parent d676acb
commit 735bc68
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 62 deletions.
diff --git a/apps/store/src/appComponents/StoreLayout.tsx b/apps/store/src/appComponents/StoreLayout.tsx
@@ -57,7 +57,7 @@ export async function StoreLayout({ locale, children }: StoreLayoutProps) {
             </ShopSessionTrackingProvider>
           </CompanyReviewsMetadataProvider>
         </ProductMetadataProvider>
-        {Features.enabled('COOKIE_BANNER_INP_IMPROVEMENT') && <CookieConsent />}
+        {Features.enabled('COOKIE_BANNER') && <CookieConsent />}
       </ShopSessionProvider>
       <SpeedInsights />
     </RootLayout>

diff --git a/apps/store/src/components/GTMLoader.tsx b/apps/store/src/components/GTMLoader.tsx
@@ -1,5 +1,5 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
-import { GTMAppScript, gtmGtag } from '@/services/gtm'
+import { useCallback, useRef } from 'react'
+import { gtmGtag } from '@/services/gtm'
 
 export type OneTrustApi = {
   OnConsentChanged: (callback: () => void) => void
@@ -9,60 +9,6 @@ export type OneTrustApi = {
   SetAlertBoxClosed: () => void
 }
 
-export function GTMLoader() {
-  // Optimization: start loading GTM after cookie consent has been given. Fixes negative effects of preloading GTM
-  // - lots of GTM activity triggered immediately on consent, sync -> bad INP
-  // - GTM resources taking network brandwidth on initial load when they have no chance to be useful yet
-  const isConsentReady = useIsConsentReady()
-  if (!isConsentReady) return null
-
-  return <GTMAppScript />
-}
-
-// Potential optimization - don't load GTM if user only consented to required cookies
-export function useIsConsentReady() {
-  const [isConsentReady, setIsConsentReady] = useState(false)
-  const calledRef = useRef(false)
-  const saveConsent = useCallback(() => {
-    // Double invoke in dev mode is harmful, prevent it
-    if (calledRef.current) return
-
-    const activeGroups = (window as any).OnetrustActiveGroups
-    if (typeof activeGroups !== 'string') {
-      console.warn('Failed to read window.OnetrustActiveGroups')
-      return
-    }
-    const consentGroups = {
-      required: 'granted',
-      performance: activeGroups.includes(',C0002,') ? 'granted' : 'denied',
-      functional: activeGroups.includes(',C0003,') ? 'granted' : 'denied',
-      targeting: activeGroups.includes(',C0004,') ? 'granted' : 'denied',
-      social: activeGroups.includes(',C0005,') ? 'granted' : 'denied',
-    }
-    gtmGtag('consent', 'update', {
-      ad_storage: consentGroups.targeting,
-      ad_user_data: consentGroups.targeting,
-      ad_personalization: consentGroups.targeting,
-      analytics_storage: consentGroups.performance,
-      personalization_storage: consentGroups.required,
-      functionality_storage: consentGroups.required,
-      security_storage: consentGroups.required,
-    })
-    setIsConsentReady(true)
-  }, [])
-  useEffect(() => {
-    ;(window as any).OptanonWrapper = function () {
-      const OneTrust = (window as any).OneTrust as OneTrustApi
-      if (OneTrust.IsAlertBoxClosed()) {
-        saveConsent()
-      } else {
-        OneTrust.OnConsentChanged(saveConsent)
-      }
-    }
-  }, [saveConsent])
-  return isConsentReady
-}
-
 export function useSaveConsent() {
   const calledRef = useRef(false)
   const saveConsent = useCallback(() => {

diff --git a/apps/store/src/pages/_app.tsx b/apps/store/src/pages/_app.tsx
@@ -12,7 +12,6 @@ import { BankIdDialogDynamic } from '@/components/BankIdDialog/BankIdDialogDynam
 import { ContactUs } from '@/components/ContactUs/ContactUs'
 import { CookieConsent } from '@/components/CookieConsent/CookieConsent'
 import { GlobalBannerDynamic } from '@/components/GlobalBanner/GlobalBannerDynamic'
-import { GTMLoader } from '@/components/GTMLoader'
 import { GlobalLinkStyles } from '@/components/RichText/RichText.styles'
 import { usePublishWidgetInitEvent } from '@/features/widget/usePublishWidgetInitEvent'
 import { useApollo } from '@/services/apollo/client'
@@ -95,8 +94,7 @@ const MyApp = ({ Component, pageProps }: AppPropsWithLayout) => {
       <Head>
         <meta key="viewport" name="viewport" content="width=device-width, initial-scale=1" />
       </Head>
-      {Features.enabled('COOKIE_BANNER') && <GTMLoader />}
-      {Features.enabled('COOKIE_BANNER_INP_IMPROVEMENT') && <CookieConsent />}
+      {Features.enabled('COOKIE_BANNER') && <CookieConsent />}
       <GlobalLinkStyles />
       <OneTrustStyles />
       <PageTransitionProgressBar />

diff --git a/apps/store/src/utils/Features.ts b/apps/store/src/utils/Features.ts
@@ -8,8 +8,6 @@ export const Features = {
 
 const config = {
   COOKIE_BANNER: process.env.NEXT_PUBLIC_FEATURE_COOKIE_BANNER === 'true',
-  COOKIE_BANNER_INP_IMPROVEMENT:
-    process.env.NEXT_PUBLIC_FEATURE_COOKIE_BANNER_INP_IMPROVEMENT === 'true',
   INSURELY: process.env.NEXT_PUBLIC_FEATURE_INSURELY === 'true',
   SAS_PARTNERSHIP: process.env.NEXT_PUBLIC_FEATURE_SAS_PARTNERSHIP === 'true',
   INSURELY_CAR: process.env.NEXT_PUBLIC_FEATURE_INSURELY_CAR === 'true',