Add Google Analytics tracking if and only if a user has clicked "Accept" on the notification #409

kellyi · 2019-03-27T16:51:15Z

Overview

This PR configures the application to add Google Analytics tracking if -- and only if -- a user has clicked "Accept" on the Notification. To make this easier to prove & verify, I opted to initialize the GA tracking conditionally in a utility function around which I was able to set up some testing apparatus.

If a user clicks "Reject", we set a value for GA_TRACKING in localStorage to "HAS_REJECTED_GA_TRACKING" and then that sticks until the user clears localStorage.

If a user clicks "Accept", we set a value for GA_TRACKING in localStorage to
"HAS_ACCEPTED_GA_TRACKING" and then set up tracking for that visit. On subsequent visits, the application will check for the GA_TRACKING value and if it sees that there is a value AND that that value is "HAS_ACCEPTED_GA_TRACKING" then tracking starts.

For the following conditions, the application does not start GA Tracking at all:

window.localStorage is unavailable for whatever reason
GA_TRACKING has not been set at all in window.localStorage
GA_TRACKING is in window.localStorage but does not have a value of "HAS_ACCEPTED_GA_TRACKING".

As an additional guard, I set an initial global opt out value per https://developers.google.com/analytics/devguides/collection/analyticsjs/user-opt-out which is only deleted when all the acceptance conditions have been met.

Connects #265
Connects #267

Demo

Notes

The second commit here is entirely for testing and I will drop it before merging this in. GA provides a helpful debug library which logs actions to the console so you can easily see when it is called.

Testing Instructions

serve this branch, then visit the application in Chrome
clear your cookies and your localStorage
refresh the page and verify that you see the new GDPR notification in the Snackbar
open the network tab

Rejection testing

click "Reject"
verify that you do not see any requests made to google analytics in the network tab
switch to the console and verify that you DO NOT see a message like the following logged amidst the Redux logger actions:

look at the application cookies and verify that no Google Analytics cookies have been set
refresh the page and repeat these verification steps
refresh a couple more times and repeat these verification steps

At no point prior to "Accepting" or after "Rejecting" should you see:

requests made to Google Analytics in the Network tab
cookies set by Google Anayltics

Acceptance testing

clear cookies and localStorage
refresh the app and click Accept
verify that you do see a request made to GA in the network tab and that you also see something like this in the console with subequent info about settings:

verify that you see this in the console and that that instruction matches the guidance here: https://developers.google.com/analytics/devguides/collection/analyticsjs/ip-anonymization

refresh the page and verify that you see the Google Analytics stuff load again along with the "anonymizeIp" setting
refresh the page again and verify the same

No localStorage testing

open Firefox, then open about:config
Follow these instructions to disable localStorage:

In FireFox: Type “about:config” in your address bar and hit enter to view your internal browser settings. Scroll down to „dom.storage.enabled”, right click on it and hit „Toggle” to disable the DOM Storage.

visit the application in Firefox and verify that it doesn't crash and that Google Analytics tracking does not start

Checklist

fixup! commits have been squashed
CI passes after rebase
CHANGELOG.md updated with summary of features or fixes, following Keep a Changelog guidelines

rajadain

+1 tested, very detailed and well thought out. Works well too! Great job.

src/app/src/__tests__/util.ga.tests.js

rajadain · 2019-03-27T17:43:36Z

src/app/src/components/GDPRNotification.jsx

 import Snackbar from '@material-ui/core/Snackbar';
 import Button from './Button';
 import ShowOnly from './ShowOnly';
 import COLOURS from '../util/COLOURS';

-class GDPRNotification extends PureComponent {


Why change from PureComponent to Component? (I'm not familiar with the subtle differences)

My understanding of PureComponent is that it has some characteristics which memoize it in certain circumstances, but I don't quite know whether that's true or what those circumstances are. In the interest of being able to reason about this a little more accurately I switched it out for a regular Component.

jwalgran · 2019-03-27T17:39:50Z

src/app/src/components/GDPRNotification.jsx

-    };
+    acceptGDPRAlertAndDismissSnackbar = () => this.setState(
+        state => Object.assign({}, state, { open: false }),
+        acceptGATrackingAndStartTracking,


Excellent function name

jwalgran · 2019-03-27T17:42:35Z

src/app/src/util/util.ga.js

+    const gaKey = env(REACT_APP_GOOGLE_ANALYTICS_KEY);
+    const environment = env('ENVIRONMENT');
+
+    if (!environment || environment !== 'development') {


I don't quite understand the environment !== 'development' clause here. Doesn't this mean that if we are in staging or production then we will always return null?

This is part of the test commit that will be dropped before merging. It's supposed to be if (environment === development) return null;.

Yeah, sorry for not explaining well. I'll drop c68fabf before merging this, but it is essentially just to be able to test this in local development. For production and staging it will be set to === 'development' -> return null

jwalgran

This is a thoughtful implementation and is working well. I am not sure we need to be recording a consent action every time the page is loaded, but in the interest of getting this released I would rather get it deployed and remove it later if we decide we don't need it.

- 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

jwalgran

I see that this is still conditionally and correctly sending analyitcs events.

kellyi · 2019-03-27T19:46:36Z

Thanks for the feedback and help with this!

kellyi added the in progress label Mar 27, 2019

kellyi requested review from jwalgran and rajadain March 27, 2019 16:51

kellyi assigned jwalgran and rajadain Mar 27, 2019

rajadain approved these changes Mar 27, 2019

View reviewed changes

rajadain removed their assignment Mar 27, 2019

jwalgran reviewed Mar 27, 2019

View reviewed changes

jwalgran approved these changes Mar 27, 2019

View reviewed changes

kellyi force-pushed the ki/add-google-analytics-on-an-opt-in-basis branch from 2e7c0ec to 6a107e5 Compare March 27, 2019 19:27

kellyi changed the base branch from develop to release/2.0.0 March 27, 2019 19:27

Update CHANGELOG

c29a97b

jwalgran approved these changes Mar 27, 2019

View reviewed changes

kellyi merged commit dfbf928 into release/2.0.0 Mar 27, 2019

hectcastro removed the in progress label Mar 27, 2019

kellyi deleted the ki/add-google-analytics-on-an-opt-in-basis branch March 27, 2019 19:45

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Google Analytics tracking if and only if a user has clicked "Accept" on the notification #409

Add Google Analytics tracking if and only if a user has clicked "Accept" on the notification #409

kellyi commented Mar 27, 2019 •

edited

rajadain left a comment

rajadain Mar 27, 2019

kellyi Mar 27, 2019

jwalgran Mar 27, 2019

jwalgran Mar 27, 2019

rajadain Mar 27, 2019

kellyi Mar 27, 2019

jwalgran left a comment

jwalgran left a comment

kellyi commented Mar 27, 2019

Add Google Analytics tracking if and only if a user has clicked "Accept" on the notification #409

Add Google Analytics tracking if and only if a user has clicked "Accept" on the notification #409

Conversation

kellyi commented Mar 27, 2019 • edited

Overview

Demo

Notes

Testing Instructions

Rejection testing

Acceptance testing

No localStorage testing

Checklist

rajadain left a comment

Choose a reason for hiding this comment

rajadain Mar 27, 2019

Choose a reason for hiding this comment

kellyi Mar 27, 2019

Choose a reason for hiding this comment

jwalgran Mar 27, 2019

Choose a reason for hiding this comment

jwalgran Mar 27, 2019

Choose a reason for hiding this comment

rajadain Mar 27, 2019

Choose a reason for hiding this comment

kellyi Mar 27, 2019

Choose a reason for hiding this comment

jwalgran left a comment

Choose a reason for hiding this comment

jwalgran left a comment

Choose a reason for hiding this comment

kellyi commented Mar 27, 2019

kellyi commented Mar 27, 2019 •

edited