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 <katspaugh@users.noreply.github.com>

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",

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()
     }

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<undefined | Record<string, any>> => {
+  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<string, any>, expirationDays: number): Promise<void> => {
   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 })

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}`))
+}

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"