From ad109668fbae1edb3618243cd31b57dd8d163bfc Mon Sep 17 00:00:00 2001 From: nicolas Date: Tue, 11 May 2021 04:22:15 -0300 Subject: [PATCH] Fix GA problem after disabling cookies. (#2241) * fix GA problem * add types for js-cookie * Cookies util: Add removeCookie and types * Remove GA cookies when disabling permission * test remove cookie * try empty path * test * remove cookies using domain * restore path '/' * move remove cookies to GA util Co-authored-by: katspaugh --- package.json | 1 + src/components/CookiesBanner/index.tsx | 7 ++++++- src/logic/cookies/utils/index.ts | 9 +++++--- src/utils/googleAnalytics.ts | 29 +++++++++++++++++++------- yarn.lock | 5 +++++ 5 files changed, 40 insertions(+), 11 deletions(-) diff --git a/package.json b/package.json index 47fe0369..8e7ef51d 100644 --- a/package.json +++ b/package.json @@ -243,6 +243,7 @@ "@typechain/web3-v1": "^2.2.0", "@types/history": "4.6.2", "@types/jest": "^26.0.22", + "@types/js-cookie": "^2.2.6", "@types/lodash.get": "^4.4.6", "@types/lodash.memoize": "^4.1.6", "@types/node": "^14.14.37", diff --git a/src/components/CookiesBanner/index.tsx b/src/components/CookiesBanner/index.tsx index 781ae6de..2bae1916 100644 --- a/src/components/CookiesBanner/index.tsx +++ b/src/components/CookiesBanner/index.tsx @@ -10,7 +10,7 @@ import { openCookieBanner } from 'src/logic/cookies/store/actions/openCookieBann import { cookieBannerOpen } from 'src/logic/cookies/store/selectors' import { loadFromCookie, saveCookie } from 'src/logic/cookies/utils' import { mainFontFamily, md, primary, screenSm } from 'src/theme/variables' -import { loadGoogleAnalytics } from 'src/utils/googleAnalytics' +import { loadGoogleAnalytics, removeCookies } from 'src/utils/googleAnalytics' import { closeIntercom, isIntercomLoaded, loadIntercom } from 'src/utils/intercom' import AlertRedIcon from './assets/alert-red.svg' import IntercomIcon from './assets/intercom.png' @@ -160,6 +160,11 @@ const CookiesBanner = (): ReactElement => { await saveCookie(COOKIES_KEY, newState, expDays) setShowAnalytics(localAnalytics) setShowIntercom(localIntercom) + + if (!localAnalytics) { + removeCookies() + } + if (!localIntercom && isIntercomLoaded()) { closeIntercom() } diff --git a/src/logic/cookies/utils/index.ts b/src/logic/cookies/utils/index.ts index 7b9f8ce7..6eaefc35 100644 --- a/src/logic/cookies/utils/index.ts +++ b/src/logic/cookies/utils/index.ts @@ -4,9 +4,10 @@ import { getNetworkName } from 'src/config' const PREFIX = `v1_${getNetworkName()}` -export const loadFromCookie = async (key) => { +export const loadFromCookie = async (key: string, withoutPrefix = false): Promise> => { + const prefix = withoutPrefix ? '' : `${PREFIX}__` try { - const stringifiedValue = await Cookies.get(`${PREFIX}__${key}`) + const stringifiedValue = await Cookies.get(`${prefix}${key}`) if (stringifiedValue === null || stringifiedValue === undefined) { return undefined } @@ -18,7 +19,7 @@ export const loadFromCookie = async (key) => { } } -export const saveCookie = async (key, value, expirationDays) => { +export const saveCookie = async (key: string, value: Record, expirationDays: number): Promise => { try { const stringifiedValue = JSON.stringify(value) const expiration = expirationDays ? { expires: expirationDays } : undefined @@ -27,3 +28,5 @@ export const saveCookie = async (key, value, expirationDays) => { console.error(`Failed to save ${key} in cookies:`, err) } } + +export const removeCookie = (key: string, path: string, domain: string): void => Cookies.remove(key, { path, domain }) diff --git a/src/utils/googleAnalytics.ts b/src/utils/googleAnalytics.ts index c8db0ea5..8f29667f 100644 --- a/src/utils/googleAnalytics.ts +++ b/src/utils/googleAnalytics.ts @@ -4,10 +4,16 @@ import { getNetworkInfo } from 'src/config' import { getGoogleAnalyticsTrackingID } from 'src/config' import { COOKIES_KEY } from 'src/logic/cookies/model/cookie' -import { loadFromCookie } from 'src/logic/cookies/utils' +import { loadFromCookie, removeCookie } from 'src/logic/cookies/utils' export const SAFE_NAVIGATION_EVENT = 'Safe Navigation' +export const COOKIES_LIST = [ + { name: '_ga', path: '/' }, + { name: '_gat', path: '/' }, + { name: '_gid', path: '/' }, +] + let analyticsLoaded = false export const loadGoogleAnalytics = (): void => { if (analyticsLoaded) { @@ -50,12 +56,15 @@ export const useAnalytics = (): UseAnalyticsResponse => { fetchCookiesFromStorage() }, []) - const trackPage = (page) => { - if (!analyticsAllowed || !analyticsLoaded) { - return - } - ReactGA.pageview(page) - } + const trackPage = useCallback( + (page) => { + if (!analyticsAllowed || !analyticsLoaded) { + return + } + ReactGA.pageview(page) + }, + [analyticsAllowed], + ) const trackEvent = useCallback( (event: EventArgs) => { @@ -69,3 +78,9 @@ export const useAnalytics = (): UseAnalyticsResponse => { return { trackPage, trackEvent } } + +// we remove GA cookies manually as react-ga does not provides a utility for it. +export const removeCookies = (): void => { + const subDomain = location.host.split('.').slice(-2).join('.') + COOKIES_LIST.forEach((cookie) => removeCookie(cookie.name, cookie.path, `.${subDomain}`)) +} diff --git a/yarn.lock b/yarn.lock index 8ba924fa..295bf2b8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3501,6 +3501,11 @@ jest-diff "^26.0.0" pretty-format "^26.0.0" +"@types/js-cookie@^2.2.6": + version "2.2.6" + resolved "https://registry.yarnpkg.com/@types/js-cookie/-/js-cookie-2.2.6.tgz#f1a1cb35aff47bc5cfb05cb0c441ca91e914c26f" + integrity sha512-+oY0FDTO2GYKEV0YPvSshGq9t7YozVkgvXLty7zogQNuCxBhT9/3INX9Q7H1aRZ4SUDRXAKlJuA4EA5nTt7SNw== + "@types/json-schema@*", "@types/json-schema@^7.0.3", "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.6": version "7.0.7" resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.7.tgz#98a993516c859eb0d5c4c8f098317a9ea68db9ad"