Handle Google analytics

Author: catarak

client/modules/User/components/CookieConsent.jsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import Cookies from 'js-cookie';
 import styled from 'styled-components';
+import ReactGA from 'react-ga';
 import getConfig from '../../../utils/getConfig';
 import { setUserCookieConsent } from '../actions';
 import { remSize, prop } from '../../../theme';
@@ -61,7 +62,6 @@ function CookieConsent() {
   function acceptAllCookies() {
     if (user.authenticated) {
       dispatch(setUserCookieConsent('all'));
-      return;
     }
     setBrowserCookieConsent('all');
     Cookies.set('p5-cookie-consent', 'all', { expires: 365 });
@@ -70,10 +70,12 @@ function CookieConsent() {
   function acceptEssentialCookies() {
     if (user.authenticated) {
       dispatch(setUserCookieConsent('essential'));
-      return;
     }
     setBrowserCookieConsent('essential');
     Cookies.set('p5-cookie-consent', 'essential', { expires: 365 });
+    Cookies.remove('_ga');
+    Cookies.remove('_gat');
+    Cookies.remove('_gid');
   }
 
   function mergeCookieConsent() {
@@ -94,18 +96,30 @@ function CookieConsent() {
     } else {
       initializeCookieConsent();
     }
+
+    if (p5CookieConsent === 'essential') {
+      ReactGA.initialize(getConfig('GA_MEASUREMENT_ID'), {
+        gaOptions: {
+          storage: 'none'
+        }
+      });
+    } else {
+      ReactGA.initialize(getConfig('GA_MEASUREMENT_ID'));
+    }
+    ReactGA.pageview(window.location.pathname + window.location.search);
   }, []);
 
   useEffect(() => {
     mergeCookieConsent();
   }, [user.authenticated]);
 
   // Turn off Google Analytics
-  useEffect(() => {
-    if (cookieConsent === 'essential' || user.cookieConsent === 'essential') {
-      window[`ga-disable-${getConfig('GA_MEASUREMENT_ID')}`] = true;
-    }
-  }, [cookieConsent, user.cookieConsent]);
+  // useEffect(() => {
+  //   if (cookieConsent === 'all' || user.cookieConsent === 'all') {
+  //     ReactGA.initialize(getConfig('GA_MEASUREMENT_ID'));
+  //     ReactGA.pageview(window.location.pathname + window.location.search);
+  //   }
+  // }, [cookieConsent, user.cookieConsent]);
 
   const showCookieConsent =
     (user.authenticated && user.cookieConsent === 'none') ||

package-lock.json

@@ -206,6 +206,7 @@
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-final-form": "^6.5.2",
+    "react-ga": "^3.3.0",
     "react-helmet": "^5.1.3",
     "react-hot-loader": "^4.12.19",
     "react-i18next": "^11.5.0",

package.json

@@ -42,17 +42,6 @@ export function renderIndex() {
       <div id="root" class="root-app">
       </div>
       <script src='${process.env.NODE_ENV === 'production' ? `${assetsManifest['/app.js']}` : '/app.js'}'></script>
-      <script>
-        ${process.env.GA_MEASUREMENT_ID &&
-    `(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');
-    
-            ga('create', '${process.env.GA_MEASUREMENT_ID}', 'auto');
-            ga('send', 'pageview');`
-    }
-      </script>
     </body>
   </html>
   `;