♻️ Allow siteimprove script before consent #2729

web/lib/hooks/useConsentState.ts

@@ -1,8 +1,8 @@
 import { useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
-import { Flags } from '../../common/helpers/datasetHelpers'
 import { CookieType } from '../../types'
 import { checkCookieConsent } from '../../common/helpers/checkCookieConsent'
+import { useProd } from './useProd'
 
 //COOKIEBOT
 declare global {
@@ -15,6 +15,7 @@ declare global {
 function useConsentState(consentType: CookieType[], callback: () => void, cleanup?: () => void) {
   const [consent, changeConsent] = useState<boolean>(false)
   const router = useRouter()
+  const enableConsentLogic = useProd()
 
   useEffect(() => {
     const manageCookies = () => {
@@ -30,15 +31,12 @@ function useConsentState(consentType: CookieType[], callback: () => void, cleanu
 
   useEffect(() => {
     // Disable Radix.equinor.com due to SiteImprove (possibly) collecting wrong data
-    const host = window?.location.origin
-    const isLocalHost = host.includes('localhost')
-    const enableConsentLogic = !isLocalHost && (Flags.IS_DEV || !host.includes('radix.equinor.com'))
     if (enableConsentLogic && consent) {
       callback()
       return () => {
         if (cleanup) cleanup()
       }
     }
-  }, [router.asPath, consent, callback, cleanup])
+  }, [router.asPath, consent, callback, cleanup, enableConsentLogic])
 }
 export default useConsentState

web/lib/hooks/useProd.ts

@@ -0,0 +1,14 @@
+import { Flags } from '../../common/helpers/datasetHelpers'
+import { useEffect, useState } from 'react'
+
+export function useProd() {
+  const [isProd, setIsProd] = useState(false)
+
+  useEffect(() => {
+    const host = window?.location.origin
+    const isLocalHost = host.includes('localhost')
+    setIsProd(!isLocalHost && (Flags.IS_DEV || !host.includes('radix.equinor.com')))
+  }, [])
+
+  return isProd
+}

web/pages/_app.tsx

@@ -11,7 +11,6 @@ import Script from 'next/script'
 import { ErrorBoundary } from 'react-error-boundary'
 import { ErrorFallback } from '../pageComponents/pageTemplates/ErrorFallback'
 import useConsentState from '../lib/hooks/useConsentState'
-import { loadSiteImproveScript, cleanUpSiteImproveScript } from '../pageComponents/SiteImprove'
 import { enableDynatrace, disableDynatrace } from '../pageComponents/Dynatrace'
 import { SWRConfig } from 'swr'
 
@@ -21,6 +20,7 @@ import { SWRConfig } from 'swr'
 import { PreviewContextProvider } from '../lib/contexts/PreviewContext'
 import { defaultLanguage } from '../languages'
 import { default as NextLink } from 'next/link'
+import { useProd } from '../lib/hooks/useProd'
 
 /**
  * TODO:
@@ -69,6 +69,7 @@ function MyApp({ Component, pageProps }: CustomAppProps): JSX.Element {
   const router = useRouter()
   const getLayout = Component.getLayout || ((page: ReactNode): ReactNode => page)
   const IS_LIVE = process.env.NODE_ENV !== 'development'
+  const isProd = useProd()
 
   useEffect(() => {
     if (!GTM_ID) return
@@ -92,12 +93,10 @@ function MyApp({ Component, pageProps }: CustomAppProps): JSX.Element {
   }, [router.asPath])
 
   const enableStatisticsCookies = () => {
-    loadSiteImproveScript()
     enableDynatrace()
   }
 
   const disableStatisticsCookies = () => {
-    cleanUpSiteImproveScript()
     disableDynatrace()
   }
 
@@ -126,6 +125,7 @@ function MyApp({ Component, pageProps }: CustomAppProps): JSX.Element {
           </Head>
           <GlobalStyle />
           <GlobalFontStyle />
+          {isProd && <Script src="https://siteimproveanalytics.com/js/siteanalyze_6003171.js" id="siteimprove" async />}
           {IS_LIVE && <CookieBot locale={router.locale} />}
           <NextLink
             href="#mainTitle"

web/pages/_document.tsx

@@ -38,18 +38,6 @@ const GoogleConsentMode = () => (
   />
 )
 
-const GoogleTagManagerHead = () => (
-  <script
-    dangerouslySetInnerHTML={{
-      __html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
-        new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
-        j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
-        'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-        })(window,document,'script','dataLayer','${GTM_ID}');`,
-    }}
-  />
-)
-
 const GoogleTagManagerBody = () => (
   <noscript
     dangerouslySetInnerHTML={{