From 6a107e584aec622f21c96fd8423631064cad0d73 Mon Sep 17 00:00:00 2001
From: Kelly Innes <kinnes@azavea.com>
Date: Tue, 26 Mar 2019 12:06:38 -0400
Subject: [PATCH 1/2] Only track users who have accepted GA tracking

- add util.ga.js file with functions for getting and setting a value for
the user's choice to accept or reject cookies and starting tracking if
and only if a user has explicitly accepted the tracking code
- add util.ga.tests.js file with tests for localstorage
- update GDPRNotification component to use utility functions
- conditionally call tracking code in GDPRNotification's
componentDidMount method if and only if a user has already clicked the
Accept link in the GDPRNotification snackbar
- update cookie opt out Snackbar message with approved text
- set link to TOS & privacy policy

Connects #265

- send TRACKING_CONSENT event to Google Analytics prior to each pageview
- add moment library for date parsing and comparison
- store date user decided in localstorage
- expire date after one year
- don't track if date is expired
---
 src/app/package.json                        |   1 +
 src/app/public/index.html                   |  26 ++-
 src/app/src/__tests__/util.ga.tests.js      |  91 ++++++++++
 src/app/src/components/GDPRNotification.jsx |  73 +++++---
 src/app/src/util/util.ga.js                 | 175 ++++++++++++++++++++
 src/app/yarn.lock                           |   5 +
 6 files changed, 341 insertions(+), 30 deletions(-)
 create mode 100644 src/app/src/__tests__/util.ga.tests.js
 create mode 100644 src/app/src/util/util.ga.js

diff --git a/src/app/package.json b/src/app/package.json
index a5542860a..7733c6a60 100644
--- a/src/app/package.json
+++ b/src/app/package.json
@@ -15,6 +15,7 @@
         "google-map-react": "1.1.2",
         "immutability-helper": "2.9.0",
         "lodash": "4.17.11",
+        "moment": "2.24.0",
         "prop-types": "15.6.2",
         "react": "16.7.0",
         "react-copy-to-clipboard": "5.0.1",
diff --git a/src/app/public/index.html b/src/app/public/index.html
index 6a90f3277..2eeade6df 100644
--- a/src/app/public/index.html
+++ b/src/app/public/index.html
@@ -8,7 +8,7 @@
     <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
     <meta http-equiv="pragma" content="no-cache" />
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    
+
     <link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/favicon/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon/favicon-16x16.png">
@@ -32,15 +32,25 @@
     <title>Open Apparel Registry (beta)</title>
     <!-- Environment Variables -->
     <script src="%PUBLIC_URL%/web/environment.js"></script>
-    <!-- TODO: Replace with actual Google Tag Manager snippet -->
+    <!-- Google Analytics -->
     <script>
-      if (window.ENVIRONMENT &&
-          window.ENVIRONMENT.REACT_APP_GOOGLE_ANALYTICS_KEY &&
-          window.ENVIRONMENT.REACT_APP_GOOGLE_ANALYTICS_KEY !== "" &&
-          window.ENVIRONMENT.ENVIRONMENT !== 'development') {
-        console.log(window.ENVIRONMENT.REACT_APP_GOOGLE_ANALYTICS_KEY);
-      }
+        if (window.ENVIRONMENT &&
+            window.ENVIRONMENT.REACT_APP_GOOGLE_ANALYTICS_KEY &&
+            window.ENVIRONMENT.REACT_APP_GOOGLE_ANALYTICS_KEY !== "") {
+            // Initially disable tracking until we check that the user has accepted the notification
+            //
+            // See: https://developers.google.com/analytics/devguides/collection/analyticsjs/user-opt-out
+            //
+            // We will later delete this key and start Google Analytics tracking in the application code
+            // if it is verified that the user has selected "Accept" for the Google Analytics tracking
+            // notification. See: /src/app/src/util/util.ga.js
+            //
+            // Set for every environment to ensure it is always set.
+            var disableGAKey = 'ga-disable-' + window.ENVIRONMENT.REACT_APP_GOOGLE_ANALYTICS_KEY;
+            window[disableGAKey] = true;
+        }
     </script>
+    <!-- End Google Analytics -->
     <!--
       Rollbar Configuration
       https://docs.rollbar.com/docs/browser-js
diff --git a/src/app/src/__tests__/util.ga.tests.js b/src/app/src/__tests__/util.ga.tests.js
new file mode 100644
index 000000000..07b6967fe
--- /dev/null
+++ b/src/app/src/__tests__/util.ga.tests.js
@@ -0,0 +1,91 @@
+/* eslint-env jest */
+/* eslint-disable object-shorthand */
+/* eslint-disable func-names */
+/* eslint-disable space-before-function-paren */
+
+import {
+    userHasAcceptedOrRejectedGATracking,
+    userHasAcceptedGATracking,
+    userHasRejectedGATracking,
+    rejectGATracking,
+    acceptGATrackingAndStartTracking,
+    clearGATrackingDecision,
+    createGADisableKey,
+} from '../util/util.ga.js';
+
+beforeEach(() => {
+    const window = {};
+
+    window.localStorage = {
+        store: {},
+        getItem: function(key) {
+            return this.store[key] || null;
+        },
+        setItem: function(key, value) {
+            this.store[key] = value.toString();
+        },
+        removeItem: function(key) {
+            delete this.store[key];
+        },
+        clear: function() {
+            this.store = {};
+        },
+    };
+
+    window.ENVIRONMENT = {
+        REACT_APP_GOOGLE_ANALYTICS_KEY: 'GA_KEY',
+    };
+
+    global.window = window;
+    jest.spyOn(global.window.localStorage, 'setItem');
+});
+
+afterEach(() => {
+    window.localStorage = null;
+});
+
+it('creates a `ga-disable-ID` key for opting out of tracking', () => {
+    const expectedGADisableKey = 'ga-disable-test-key';
+    const testGAKey = 'test-key';
+
+    expect(createGADisableKey(testGAKey)).toBe(expectedGADisableKey);
+});
+
+it('correctly sets a `HAS_REJECTED_GA_TRACKING` value in localStorage', () => {
+    rejectGATracking();
+
+    expect(window.localStorage.setItem).toHaveBeenCalledTimes(2);
+    expect(window.localStorage.setItem).toHaveBeenCalledWith('GA_TRACKING', 'HAS_REJECTED_GA_TRACKING');
+    expect(window.localStorage.getItem('GA_TRACKING')).toBe('HAS_REJECTED_GA_TRACKING');
+
+    expect(userHasAcceptedOrRejectedGATracking()).toBe(true);
+    expect(userHasRejectedGATracking()).toBe(true);
+    expect(userHasAcceptedGATracking()).toBe(false);
+});
+
+it('correctly sets a `HAS_ACCEPTED_GA_TRACKING` value in localStorage', () => {
+    acceptGATrackingAndStartTracking();
+
+    expect(window.localStorage.setItem).toHaveBeenCalledTimes(2);
+    expect(window.localStorage.setItem).toHaveBeenCalledWith('GA_TRACKING', 'HAS_ACCEPTED_GA_TRACKING');
+    expect(window.localStorage.getItem('GA_TRACKING')).toBe('HAS_ACCEPTED_GA_TRACKING');
+
+    expect(userHasAcceptedOrRejectedGATracking()).toBe(true);
+    expect(userHasAcceptedGATracking()).toBe(true);
+    expect(userHasRejectedGATracking()).toBe(false);
+});
+
+it('correctly clears a `HAS_ACCEPTED_GA_TRACKING` decision value from localStorage', () => {
+    acceptGATrackingAndStartTracking();
+
+    expect(userHasAcceptedGATracking()).toBe(true);
+
+    jest.spyOn(window.localStorage, 'removeItem');
+    clearGATrackingDecision();
+
+    expect(window.localStorage.removeItem).toHaveBeenCalledTimes(1);
+    expect(window.localStorage.removeItem).toHaveBeenCalledWith('GA_TRACKING');
+
+    expect(userHasAcceptedGATracking()).toBe(false);
+    expect(userHasAcceptedOrRejectedGATracking()).toBe(false);
+});
diff --git a/src/app/src/components/GDPRNotification.jsx b/src/app/src/components/GDPRNotification.jsx
index 787ec3c9e..057f327e5 100644
--- a/src/app/src/components/GDPRNotification.jsx
+++ b/src/app/src/components/GDPRNotification.jsx
@@ -1,23 +1,43 @@
-import React, { PureComponent } from 'react';
+import React, { Component } from 'react';
 import Snackbar from '@material-ui/core/Snackbar';
 import Button from './Button';
 import ShowOnly from './ShowOnly';
 import COLOURS from '../util/COLOURS';
 
-class GDPRNotification extends PureComponent {
-    state = { open: true };
+import {
+    userHasAcceptedOrRejectedGATracking,
+    userHasAcceptedGATracking,
+    acceptGATrackingAndStartTracking,
+    rejectGATracking,
+    startGATrackingIfUserHasAcceptedNotification,
+} from '../util/util.ga';
+
+export default class GDPRNotification extends Component {
+    state = { open: false };
 
     componentDidMount() {
-        const dismissed = localStorage.getItem('dismissedGDPRAlert');
-        if (dismissed) {
-            this.setState({ open: false }); // eslint-disable-line react/no-did-mount-set-state
+        if (userHasAcceptedOrRejectedGATracking()) {
+            if (userHasAcceptedGATracking()) {
+                startGATrackingIfUserHasAcceptedNotification();
+            }
+
+            return null;
         }
+
+        return this.setState(state => Object.assign({}, state, {
+            open: true,
+        }));
     }
 
-    dismissGDPRAlert = () => {
-        this.setState({ open: false });
-        localStorage.setItem('dismissedGDPRAlert', true);
-    };
+    acceptGDPRAlertAndDismissSnackbar = () => this.setState(
+        state => Object.assign({}, state, { open: false }),
+        acceptGATrackingAndStartTracking,
+    );
+
+    rejectGDPRAlertAndDismissSnackbar = () => this.setState(
+        state => Object.assign({}, state, { open: false }),
+        rejectGATracking,
+    );
 
     render() {
         const GDPRActions = (
@@ -28,19 +48,30 @@ class GDPRNotification extends PureComponent {
                         background: COLOURS.LIGHT_BLUE,
                         marginRight: '10px',
                     }}
-                    onClick={this.dismissGDPRAlert}
+                    onClick={this.rejectGDPRAlertAndDismissSnackbar}
+                />
+                <Button
+                    text="Accept"
+                    onClick={this.acceptGDPRAlertAndDismissSnackbar}
                 />
-                <Button text="Accept" onClick={this.dismissGDPRAlert} />
             </div>
         );
 
-        const GDPRMessage =
-            `We use cookies to collect and analyze
-            information on site performance and usage,
-            and to enhance content. By clicking Accept,
-            you agree to allow cookies to be placed.
-            To find out more, visit our terms of service
-            and our privacy policy.`;
+        const snackbarMessage = (
+            <div>
+                The Open Apparel Registry uses cookies to collect and analyze
+                site performance and usage. By clicking the Accept button, you
+                agree to allow us to place cookies and share information with
+                Google Analytics. For more information, please visit our{' '}
+                <a
+                    href="https://info.openapparel.org/tos/"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                >
+                    Terms and Conditions of Use and Privacy Policy.
+                </a>
+            </div>
+        );
 
         return (
             <ShowOnly when={this.state.open}>
@@ -52,11 +83,9 @@ class GDPRNotification extends PureComponent {
                         horizontal: 'right',
                     }}
                     action={GDPRActions}
-                    message={GDPRMessage}
+                    message={snackbarMessage}
                 />
             </ShowOnly>
         );
     }
 }
-
-export default GDPRNotification;
diff --git a/src/app/src/util/util.ga.js b/src/app/src/util/util.ga.js
new file mode 100644
index 000000000..5986a6570
--- /dev/null
+++ b/src/app/src/util/util.ga.js
@@ -0,0 +1,175 @@
+import moment from 'moment';
+import env from './env';
+
+const REACT_APP_GOOGLE_ANALYTICS_KEY = 'REACT_APP_GOOGLE_ANALYTICS_KEY';
+
+export const GA_TRACKING = 'GA_TRACKING';
+export const GA_TRACKING_DECISION_DATE = 'GA_TRACKING_DECISON_DATE';
+export const HAS_ACCEPTED_GA_TRACKING = 'HAS_ACCEPTED_GA_TRACKING';
+export const HAS_REJECTED_GA_TRACKING = 'HAS_REJECTED_GA_TRACKING';
+
+const getCurrentTimestamp = () => moment().toISOString();
+
+const storedConsentIsStillValid = () => {
+    try {
+        const storedTimestamp = window.localStorage.getItem(GA_TRACKING_DECISION_DATE);
+        if (!storedTimestamp) {
+            throw new Error('no stored timestamp');
+        }
+
+        const currentTime = moment();
+        const consentExpirationDate = moment(storedTimestamp).add(1, 'years');
+
+        return currentTime.isBefore(consentExpirationDate);
+    } catch (e) {
+        window.console.warn(e);
+
+        return false;
+    }
+};
+
+export const maybeGetReactAppGoogleAnalyticsKey = () => {
+    const gaKey = env(REACT_APP_GOOGLE_ANALYTICS_KEY);
+    const environment = env('ENVIRONMENT');
+
+    if (!environment || environment === 'development') {
+        return null;
+    }
+
+    return gaKey;
+};
+
+export const userHasAcceptedOrRejectedGATracking = () => {
+    try {
+        if (!storedConsentIsStillValid()) {
+            window.localStorage.removeItem(GA_TRACKING);
+            window.localStorage.removeItem(GA_TRACKING_DECISION_DATE);
+
+            throw new Error('Consent timestamp is no longer valid');
+        }
+
+        return Boolean(window.localStorage.getItem(GA_TRACKING));
+    } catch (e) {
+        window.console.warn(e);
+
+        return false;
+    }
+};
+
+export const userHasAcceptedGATracking = () => {
+    try {
+        if (!storedConsentIsStillValid()) {
+            window.localStorage.removeItem(GA_TRACKING);
+            window.localStorage.removeItem(GA_TRACKING_DECISION_DATE);
+
+            throw new Error('Consent timestamp is no longer valid');
+        }
+
+        return window.localStorage.getItem(GA_TRACKING) === HAS_ACCEPTED_GA_TRACKING;
+    } catch (e) {
+        window.console.warn(e);
+
+        return false;
+    }
+};
+
+export const userHasRejectedGATracking = () => {
+    try {
+        return window.localStorage.getItem(GA_TRACKING) === HAS_REJECTED_GA_TRACKING;
+    } catch (e) {
+        window.console.warn(e);
+
+        return false;
+    }
+};
+
+export const rejectGATracking = () => {
+    try {
+        window.localStorage.setItem(GA_TRACKING, HAS_REJECTED_GA_TRACKING);
+        window.localStorage.setItem(GA_TRACKING_DECISION_DATE, getCurrentTimestamp());
+    } catch (e) {
+        window.console.warn(e);
+    }
+};
+
+// see https://developers.google.com/analytics/devguides/collection/analyticsjs/user-opt-out
+export const createGADisableKey = key => `ga-disable-${key}`;
+
+export const startGATrackingIfUserHasAcceptedNotification = () => {
+    try {
+        if (window.localStorage.getItem(GA_TRACKING) !== HAS_ACCEPTED_GA_TRACKING) {
+            return null;
+        }
+
+        if (!window.localStorage.getItem(GA_TRACKING_DECISION_DATE)) {
+            return null;
+        }
+
+        const gaKey = maybeGetReactAppGoogleAnalyticsKey();
+
+        if (!gaKey) {
+            return null;
+        }
+
+        const gaDisableKey = createGADisableKey(gaKey);
+
+        delete window[gaDisableKey];
+
+        /* eslint-disable */
+        // This is the standard Google Analytics analytics.js code snippet
+        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+        })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+        /* eslint-enable */
+
+        window.ga('create', window.ENVIRONMENT.REACT_APP_GOOGLE_ANALYTICS_KEY, 'auto');
+        window.ga('set', 'anonymizeIp', true);
+
+        window.ga('send', 'event', {
+            hitType: 'event',
+            eventAction: 'TRACKING_CONSENT',
+            eventCategory: 'TRACKING_CONSENT',
+            eventLabel: `User consented to GA tracking on ${window.localStorage.getItem(GA_TRACKING_DECISION_DATE)}`, // eslint-disable-line
+            nonInteraction: true,
+            anonymizeIp: true,
+        });
+
+        window.ga('send', 'pageview', {
+            anonymizeIp: true,
+        });
+
+        return 'User clicked Accept on the notification dialog. Google Analytics tracking was started';
+    } catch (e) {
+        window.console.warn(e);
+
+        return null;
+    }
+};
+
+export const acceptGATrackingAndStartTracking = () => {
+    try {
+        // If user has already rejected GA tracking, this is a noop
+        if (!userHasRejectedGATracking()) {
+            window.localStorage.setItem(GA_TRACKING, HAS_ACCEPTED_GA_TRACKING);
+            window.localStorage.setItem(GA_TRACKING_DECISION_DATE, getCurrentTimestamp());
+            startGATrackingIfUserHasAcceptedNotification();
+        }
+    } catch (e) {
+        window.console.warn(e);
+    }
+};
+
+export const clearGATrackingDecision = () => {
+    try {
+        window.localStorage.removeItem(GA_TRACKING);
+
+        // Set the ga-disable property again
+        const gaKey = maybeGetReactAppGoogleAnalyticsKey();
+        if (gaKey) {
+            window[createGADisableKey(gaKey)] = true;
+        }
+    } catch (e) {
+        window.console.warn(e);
+    }
+};
diff --git a/src/app/yarn.lock b/src/app/yarn.lock
index bd86309bf..fae950af1 100644
--- a/src/app/yarn.lock
+++ b/src/app/yarn.lock
@@ -8942,6 +8942,11 @@ mkdirp@0.5.1, mkdirp@0.5.x, mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@
   dependencies:
     minimist "0.0.8"
 
+moment@2.24.0:
+  version "2.24.0"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
+  integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==
+
 monotone-convex-hull-2d@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/monotone-convex-hull-2d/-/monotone-convex-hull-2d-1.0.1.tgz#47f5daeadf3c4afd37764baa1aa8787a40eee08c"

From c29a97bcd08612912e7f888df7b87e0973c2be90 Mon Sep 17 00:00:00 2001
From: Kelly Innes <kinnes@azavea.com>
Date: Wed, 27 Mar 2019 15:31:09 -0400
Subject: [PATCH 2/2] Update CHANGELOG

---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5924c0665..3020d7728 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ### Added
 
+- Google Analytics which activates only upon user's explicit consent [#409](https://github.com/open-apparel-registry/open-apparel-registry/pull/409)
+
 ### Changed
 
 ### Deprecated