From 5844758a31b5904920902fab08131ce31d4cbb78 Mon Sep 17 00:00:00 2001 From: Sebastian Piekarczyk Date: Wed, 1 Dec 2021 15:54:23 +0100 Subject: [PATCH] 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 --- analytics/adroll.ts | 9 --------- analytics/common.ts | 19 +------------------ components/CookieBanner.tsx | 20 ++++++++++++-------- components/stories/CookieBanner.stories.tsx | 4 ++-- helpers/useLocalStorage.ts | 20 ++++++++++++++++++++ pages/_app.tsx | 16 +++++++++++----- 6 files changed, 46 insertions(+), 42 deletions(-) create mode 100644 helpers/useLocalStorage.ts diff --git a/analytics/adroll.ts b/analytics/adroll.ts index 3252650188..8985421d0f 100644 --- a/analytics/adroll.ts +++ b/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) -} diff --git a/analytics/common.ts b/analytics/common.ts index 2caaa0b66c..36884df5c7 100644 --- a/analytics/common.ts +++ b/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 = { 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 = { // 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() - } - }) - } -} diff --git a/components/CookieBanner.tsx b/components/CookieBanner.tsx index 87d2889f10..f72e2d5fa2 100644 --- a/components/CookieBanner.tsx +++ b/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 -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) } diff --git a/components/stories/CookieBanner.stories.tsx b/components/stories/CookieBanner.stories.tsx index a2cce951af..637eb87062 100644 --- a/components/stories/CookieBanner.stories.tsx +++ b/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 + return null} /> } // eslint-disable-next-line import/no-default-export diff --git a/helpers/useLocalStorage.ts b/helpers/useLocalStorage.ts new file mode 100644 index 0000000000..cc56cb5c5b --- /dev/null +++ b/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] +} diff --git a/pages/_app.tsx b/pages/_app.tsx index 6bfeb0b16b..c4005734c8 100644 --- a/pages/_app.tsx +++ b/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 || ( ) - 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' && (