Fixes #938 cookies

Key points Disagreeing no longer redirects users away from site, instead it is noted that they responded and said not to track. Agreeing: Cookies are set that they have responded to the consent form and tracking is enabled. When tracking is enabled Segment and Sentry are both initialized. If we `canTrack` they are agreed to on page load. `canTrack` is defined as either the visitor NOT being identified as likely being in EU or being in EU and agreeing to being tracked.
celo-org · Sep 12, 2019 · 3446a7d · 3446a7d
1 parent 8fd3ad0
commit 3446a7d
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 20 deletions.
diff --git a/packages/web/pages/_app.tsx b/packages/web/pages/_app.tsx
@@ -3,6 +3,7 @@ import getConfig from 'next/config'
 import * as React from 'react'
 import { View } from 'react-native'
 import config from 'react-reveal/globals'
+import { canTrack } from 'src/analytics/analytics'
 import Header from 'src/header/Header.3'
 import { ScreenSizeProvider } from 'src/layout/ScreenSize'
 import Footer from 'src/shared/Footer.3'
@@ -13,7 +14,10 @@ import { appWithTranslation } from '../src/i18n'
 config({ ssrReveal: true })
 class MyApp extends App {
   componentDidMount() {
-    initSentry()
+    if (canTrack()) {
+      initSentry()
+    }
+
     if (window.location.hash) {
       setTimeout(() => {
         scrollTo(window.location.hash.slice(1), 'start')

diff --git a/packages/web/src/analytics/analytics.ts b/packages/web/src/analytics/analytics.ts
@@ -1,18 +1,23 @@
 import Cookies from 'js-cookie'
 import getConfig from 'next/config'
+const isInEU = require('@segment/in-eu')
 
 let analytics
 const ALLOW_ANALYTICS_COOKIE_NAME = '__allow__analytics__cookie__'
-const DISALLOW_COOKIES_REDIRECT_LOCATION = 'https://google.com'
+const RESPONDED_TO_CONSENT = '__responded_to_consent__'
 
 declare var process: any
 
-export const hasUserGivenCookiesAgreement = () => {
-  return !!Cookies.get(ALLOW_ANALYTICS_COOKIE_NAME)
+export function canTrack(): boolean {
+  return !!Cookies.get(ALLOW_ANALYTICS_COOKIE_NAME) || !isInEU()
+}
+
+export function showVisitorCookieConsent(): boolean {
+  return isInEU() && !Cookies.get(RESPONDED_TO_CONSENT)
 }
 
 const initializeAnalytics = () => {
-  if (hasUserGivenCookiesAgreement() && process.browser) {
+  if (process.browser && canTrack()) {
     const Segment = require('load-segment')
     const { publicRuntimeConfig } = getConfig()
     analytics = Segment({ key: publicRuntimeConfig.__SEGMENT_KEY__ })
@@ -27,12 +32,16 @@ const initializeAnalytics = () => {
 initializeAnalytics()
 
 export const agree = () => {
-  Cookies.set(ALLOW_ANALYTICS_COOKIE_NAME, true)
+  Cookies.set(ALLOW_ANALYTICS_COOKIE_NAME, true, { expires: EXPIRE_DAYS })
+  Cookies.set(RESPONDED_TO_CONSENT, true, { expires: EXPIRE_DAYS })
   initializeAnalytics()
 }
 
 export const disagree = () => {
-  location.href = DISALLOW_COOKIES_REDIRECT_LOCATION
+  Cookies.set(ALLOW_ANALYTICS_COOKIE_NAME, false, { expires: EXPIRE_DAYS })
+  Cookies.set(RESPONDED_TO_CONSENT, true, { expires: EXPIRE_DAYS })
 }
 
+const EXPIRE_DAYS = 365
+
 export default analytics
diff --git a/packages/web/src/header/CookieConsent.tsx b/packages/web/src/header/CookieConsent.tsx
@@ -5,9 +5,8 @@ import Link from 'src/shared/Link'
 import Responsive from 'src/shared/Responsive'
 import { CONSENT_HEIGHT } from 'src/shared/Styles'
 import { colors, fonts } from 'src/styles'
-import { agree, disagree, hasUserGivenCookiesAgreement } from '../analytics/analytics'
-
-const isInEU = require('@segment/in-eu')
+import { initSentry } from '../../fullstack/sentry'
+import { agree, disagree, showVisitorCookieConsent } from '../analytics/analytics'
 
 interface State {
   showConsent: boolean
@@ -20,20 +19,27 @@ export class CookieConsent extends React.Component<I18nProps, State> {
 
   componentDidMount() {
     this.setState({
-      showConsent: isInEU() && !hasUserGivenCookiesAgreement(),
+      showConsent: showVisitorCookieConsent(),
+    })
+  }
+
+  onAgree = () => {
+    agree()
+    this.setState({
+      showConsent: false,
+    })
+    initSentry()
+  }
+  onDisagree = () => {
+    disagree()
+    this.setState({
+      showConsent: false,
     })
   }
 
   render() {
     const { t } = this.props
 
-    const onClickAgree = () => {
-      agree()
-      this.setState({
-        showConsent: false,
-      })
-    }
-
     if (!this.state.showConsent) {
       return null
     }
@@ -57,7 +63,7 @@ export class CookieConsent extends React.Component<I18nProps, State> {
               medium={[styles.buttonMedium, styles.disagreeButton]}
               large={[styles.button, styles.disagreeButton]}
             >
-              <View style={[styles.buttonMedium, styles.disagreeButton]} onClick={disagree}>
+              <View style={[styles.buttonMedium, styles.disagreeButton]} onClick={this.onDisagree}>
                 <Text style={[fonts.navigation, styles.buttonText]}>
                   {t('cookiesDisagree')
                     .toString()
@@ -69,7 +75,7 @@ export class CookieConsent extends React.Component<I18nProps, State> {
               medium={[styles.buttonMedium, styles.agreeButton]}
               large={[styles.button, styles.agreeButton]}
             >
-              <View style={[styles.buttonMedium, styles.agreeButton]} onClick={onClickAgree}>
+              <View style={[styles.buttonMedium, styles.agreeButton]} onClick={this.onAgree}>
                 <Text style={[fonts.navigation, styles.buttonText]}>
                   {t('cookiesAgree')
                     .toString()