Merge pull request #4773 from HSLdevcom/DT-5591-statistics

Only send analytics events if cookie consent has been given
HSLdevcom · Mar 16, 2023 · 90242d3 · 90242d3
2 parents 4343851 + 95d8ab4
commit 90242d3
Show file tree

Hide file tree

Showing 8 changed files with 86 additions and 44 deletions.
diff --git a/app/client.js b/app/client.js
@@ -101,10 +101,12 @@ async function init() {
 
   const context = await app.rehydrate(window.state);
 
-  window.context = context;
-
   // For Google Tag Manager
-  initAnalyticsClientSide();
+  if (!config.useCookiesPrompt) {
+    initAnalyticsClientSide();
+  }
+
+  window.context = context;
 
   if (process.env.NODE_ENV === 'development') {
     if (config.AXE) {

diff --git a/app/component/AppBarHsl.js b/app/component/AppBarHsl.js
@@ -4,9 +4,11 @@ import React, { useState, useEffect, useRef } from 'react';
 import { intlShape } from 'react-intl';
 import { matchShape } from 'found';
 import { Helmet } from 'react-helmet';
+import { useIsConsentGiven } from '@hsl-fi/cookies';
 import LazilyLoad, { importLazy } from './LazilyLoad';
 import { clearOldSearches, clearFutureRoutes } from '../util/storeUtils';
 import { getJson } from '../util/xhrPromise';
+import { initAnalyticsClientSide } from '../util/analyticsUtils';
 
 const modules = {
   SiteHeader: () => importLazy(import('@hsl-fi/site-header')),
@@ -107,6 +109,13 @@ const AppBarHsl = ({ lang, user, favourites }, context) => {
   const siteHeaderRef = useRef(null);
   useEffect(() => siteHeaderRef.current?.fetchNotifications()[favourites]);
 
+  const cookieConsent = useIsConsentGiven('cookie_cat_statistic');
+  if (config.useCookiesPrompt && !cookieConsent) {
+    window.dataLayer = null;
+  } else {
+    initAnalyticsClientSide();
+  }
+
   return (
     <>
       {config.useCookiesPrompt && (

diff --git a/app/component/MobileFooter.js b/app/component/MobileFooter.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+
+const MobileFooter = (props, { config }) => {
+  return (
+    <>
+      {config.useCookiesPrompt && (
+        <div className="mobile-footer">
+          <div style={{ margin: '15px' }}>
+            <div>{config.copyrightText || ''}</div>
+            <div>
+              <button
+                type="button"
+                onClick={() =>
+                  window.CookieConsent.renew && window.CookieConsent.renew()
+                }
+              >
+                <FormattedMessage
+                  id="cookie-settings"
+                  default="Cookie settings"
+                />
+              </button>
+            </div>
+          </div>
+          <div className="mobile-footer-bar-container">
+            <div className="mobile-footer-bar" />
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+MobileFooter.contextTypes = {
+  config: PropTypes.object.isRequired,
+};
+
+export default MobileFooter;
diff --git a/app/component/MobileView.js b/app/component/MobileView.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { useRef, useLayoutEffect, useState } from 'react';
-import { FormattedMessage } from 'react-intl';
 import MapBottomsheetContext from './map/MapBottomsheetContext';
+import MobileFooter from './MobileFooter';
 
 function slowlyScrollTo(el, to = 0, duration = 1000) {
   const element = el;
@@ -35,18 +35,15 @@ Math.easeInOutQuad = function (a, b, c, d) {
   return (-c / 2) * (t * (t - 2) - 1) + b;
 };
 
-export default function MobileView(
-  {
-    header,
-    map,
-    content,
-    settingsDrawer,
-    selectFromMapHeader,
-    expandMap,
-    searchBox,
-  },
-  { config },
-) {
+export default function MobileView({
+  header,
+  map,
+  content,
+  settingsDrawer,
+  selectFromMapHeader,
+  expandMap,
+  searchBox,
+}) {
   if (settingsDrawer && settingsDrawer.props.open) {
     return <div className="mobile">{settingsDrawer}</div>;
   }
@@ -121,33 +118,13 @@ export default function MobileView(
           </div>
         </>
       ) : (
-        <div role="main">
-          {header}
-          {content}
+        <div role="main" className="mobile-main-container">
+          <div className="mobile-main-content-container">
+            {header}
+            {content}
+          </div>
 
-          {config.useCookiesPrompt && (
-            <div className="mobile-footer">
-              <div style={{ margin: '15px' }}>
-                <div>{config.copyrightText || ''}</div>
-                <div>
-                  <button
-                    type="button"
-                    onClick={() =>
-                      window.CookieConsent.renew && window.CookieConsent.renew()
-                    }
-                  >
-                    <FormattedMessage
-                      id="cookie-settings"
-                      default="Cookie settings"
-                    />
-                  </button>
-                </div>
-              </div>
-              <div className="mobile-footer-bar-container">
-                <div className="mobile-footer-bar" />
-              </div>
-            </div>
-          )}
+          <MobileFooter />
         </div>
       )}
     </div>

diff --git a/app/component/map/ItineraryPageMap.js b/app/component/map/ItineraryPageMap.js
@@ -99,7 +99,9 @@ function ItineraryPageMap(
         />
       )}
 
-      {breakpoint === 'large' && <CookieSettingsButton />}
+      {breakpoint === 'large' && config.useCookiesPrompt && (
+        <CookieSettingsButton />
+      )}
     </MapWithTracking>
   );
 }

diff --git a/app/component/navigation.scss b/app/component/navigation.scss
@@ -651,6 +651,16 @@ section.content {
   // 100px and 18px are the height of the message bar, but is specified in js
 }
 
+.mobile-main-container {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+.mobile-main-content-container {
+  flex-grow: 1;
+}
+
 .mobile-footer {
   border-top: 1px solid #DDDDDD;
 }

diff --git a/app/util/analyticsUtils.js b/app/util/analyticsUtils.js
@@ -17,7 +17,9 @@ export function addAnalyticsEvent(event) {
     // this is the default event field if none is defined
     newEvent = { event: 'sendMatomoEvent', ...event };
   }
-  window.dataLayer.push(newEvent);
+  if (window.dataLayer) {
+    window.dataLayer.push(newEvent);
+  }
 }
 
 /**

diff --git a/package.json b/package.json
@@ -141,6 +141,7 @@
     "@babel/preset-react": "7.10.4",
     "@babel/register": "7.11.5",
     "@hsl-fi/container-spinner": "0.3.1",
+    "@hsl-fi/cookies": "1.0.0",
     "@hsl-fi/hooks": "1.2.0",
     "@hsl-fi/modal": " ^0.3.1",
     "@hsl-fi/sass": " ^0.2.0",