adroll-bug-investigation (#619)

* moved addroll script to Head tag

* tryouts

* async

* custom hook for local storage sync

* prettier

* clean up

* after cr fixes

Co-authored-by: sebastianPiekarczyk <sebastian@oazoapps.com>

analytics/adroll.ts

@@ -29,12 +29,3 @@ export const adRollPixelScript = `
   })(window, document);
   adroll.track("pageView");
 `
-
-export function adRollScriptInsert() {
-  const script = document.createElement('script')
-
-  script.type = 'text/javascript'
-  script.innerText = adRollPixelScript
-
-  document.head.appendChild(script)
-}

analytics/common.ts

@@ -1,7 +1,5 @@
 import * as mixpanel from 'mixpanel-browser'
 
-import { adRollScriptInsert } from './adroll'
-
 export const COOKIE_NAMES = ['marketing', 'analytics']
 export const LOCALSTORAGE_KEY = 'cookieSettings'
 
@@ -14,7 +12,7 @@ interface Switch {
 
 export const manageCookie: Record<CookieName, Switch> = {
   marketing: {
-    enable: () => adRollScriptInsert(),
+    enable: () => {},
     disable: () => {}, // no needed since adding adRoll instance to app is 0/1 like
   },
   analytics: {
@@ -23,18 +21,3 @@ export const manageCookie: Record<CookieName, Switch> = {
     // todo: delete user data https://developer.mixpanel.com/docs/managing-personal-data
   },
 }
-
-export function initTrackers() {
-  const trackingLocalState = localStorage.getItem(LOCALSTORAGE_KEY)
-
-  if (trackingLocalState) {
-    const state = JSON.parse(trackingLocalState).enabledCookies
-    COOKIE_NAMES.forEach((cookieName) => {
-      if (state[cookieName]) {
-        manageCookie[cookieName].enable()
-      } else {
-        manageCookie[cookieName].disable()
-      }
-    })
-  }
-}

components/CookieBanner.tsx

@@ -5,7 +5,7 @@ import React, { Fragment, MouseEventHandler, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { Box, Button, Card, Container, Flex, Grid, Text } from 'theme-ui'
 
-import { COOKIE_NAMES, CookieName, LOCALSTORAGE_KEY, manageCookie } from '../analytics/common'
+import { COOKIE_NAMES, CookieName, manageCookie } from '../analytics/common'
 
 function Checkbox({
   checked,
@@ -35,21 +35,25 @@ function Checkbox({
 }
 
 type SelectedCookies = Record<CookieName, boolean>
-type SavedSettings = { accepted: boolean; enabledCookies: SelectedCookies }
+export type SavedSettings = { accepted: boolean; enabledCookies: SelectedCookies }
 
-function initSelectedCookies(defaultValue: boolean): SelectedCookies {
+export function initSelectedCookies(defaultValue: boolean): SelectedCookies {
   return COOKIE_NAMES.reduce((acc, cookieName) => ({ ...acc, [cookieName]: defaultValue }), {})
 }
 
-export function CookieBanner() {
+interface CookieBannerProps {
+  value: SavedSettings
+  setValue: (data: SavedSettings) => void
+}
+
+export function CookieBanner({ value, setValue }: CookieBannerProps) {
   const { t } = useTranslation()
+
   const [showSettings, setShowSettings] = useState(false)
   const [selectedCookies, setSelectedCookies] = useState(initSelectedCookies(true))
   const [settingsAreSaved, setSettingsAreSaved] = useState(false)
 
-  const trackingLocalState = localStorage.getItem(LOCALSTORAGE_KEY)
-
-  if (settingsAreSaved || trackingLocalState) {
+  if (settingsAreSaved || value) {
     return null
   }
 
@@ -67,7 +71,7 @@ export function CookieBanner() {
   }
 
   function saveSettings(settings: SavedSettings) {
-    localStorage.setItem(LOCALSTORAGE_KEY, JSON.stringify(settings))
+    setValue(settings)
     setSettingsAreSaved(true)
   }
 

components/stories/CookieBanner.stories.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 
-import { CookieBanner } from '../CookieBanner'
+import { CookieBanner, SavedSettings } from '../CookieBanner'
 
 export const Default = () => {
-  return <CookieBanner />
+  return <CookieBanner value={{} as SavedSettings} setValue={() => null} />
 }
 
 // eslint-disable-next-line import/no-default-export

helpers/useLocalStorage.ts

@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react'
+
+function getStorageValue(key: string, defaultValue: unknown) {
+  if (typeof window !== 'undefined') {
+    const saved = localStorage.getItem(key)
+    const initial = saved !== null ? JSON.parse(saved) : defaultValue
+    return initial || defaultValue
+  }
+}
+
+export function useLocalStorage(key: string, defaultValue: unknown) {
+  const [value, setValue] = useState(() => {
+    return getStorageValue(key, defaultValue)
+  })
+  useEffect(() => {
+    localStorage.setItem(key, JSON.stringify(value))
+  }, [key, value])
+
+  return [value, setValue]
+}

pages/_app.tsx

@@ -25,9 +25,11 @@ import { theme } from 'theme'
 import { components, ThemeProvider } from 'theme-ui'
 import Web3 from 'web3'
 
+import { adRollPixelScript } from '../analytics/adroll'
 import { trackingEvents } from '../analytics/analytics'
-import { initTrackers } from '../analytics/common'
+import { LOCALSTORAGE_KEY } from '../analytics/common'
 import { mixpanelInit } from '../analytics/mixpanel'
+import { useLocalStorage } from '../helpers/useLocalStorage'
 import nextI18NextConfig from '../next-i18next.config.js'
 
 function getLibrary(provider: any, connector: AbstractConnector | undefined): Web3 {
@@ -114,12 +116,14 @@ const noOverlayWorkaroundScript = `
 `
 
 function App({ Component, pageProps }: AppProps & CustomAppProps) {
+  const [value, setValue] = useLocalStorage(LOCALSTORAGE_KEY, '')
+
   const Layout = Component.layout || AppLayout
+
   const layoutProps = Component.layoutProps
   const seoTags = Component.seoTags || (
     <PageSEOTags title="seo.default.title" description="seo.default.description" />
   )
-
   const router = useRouter()
 
   useEffect(() => {
@@ -129,8 +133,6 @@ function App({ Component, pageProps }: AppProps & CustomAppProps) {
         trackingEvents.pageView(url)
       }
     }
-    // mixpanel and adRoll consent trigger
-    initTrackers()
 
     router.events.on('routeChangeComplete', handleRouteChange)
 
@@ -145,6 +147,10 @@ function App({ Component, pageProps }: AppProps & CustomAppProps) {
         {process.env.NODE_ENV !== 'production' && (
           <script dangerouslySetInnerHTML={{ __html: noOverlayWorkaroundScript }} />
         )}
+        {value?.enabledCookies?.marketing && (
+          <script dangerouslySetInnerHTML={{ __html: adRollPixelScript }} async />
+        )}
+
         <meta name="viewport" content="width=device-width, initial-scale=1" />
       </Head>
       <ThemeProvider theme={theme}>
@@ -160,7 +166,7 @@ function App({ Component, pageProps }: AppProps & CustomAppProps) {
                     <SharedUIProvider>
                       <Layout {...layoutProps}>
                         <Component {...pageProps} />
-                        <CookieBanner />
+                        <CookieBanner setValue={setValue} value={value} />
                       </Layout>
                     </SharedUIProvider>
                   </SetupWeb3Context>