From 5a908e353440ce13d06b416e451f5a3540e6e2e9 Mon Sep 17 00:00:00 2001 From: Viljami Nurminen Date: Thu, 9 Mar 2023 16:05:08 +0200 Subject: [PATCH 1/6] feat: only add analytics events if cookies consent given --- app/client.js | 8 +------- app/component/AppBarHsl.js | 9 +++++++++ app/util/analyticsUtils.js | 4 +++- package.json | 1 + 4 files changed, 14 insertions(+), 8 deletions(-) diff --git a/app/client.js b/app/client.js index a9c80a8551..9ae1a2d67c 100644 --- a/app/client.js +++ b/app/client.js @@ -37,10 +37,7 @@ import oldParamParser from './util/oldParamParser'; import { ClientProvider as ClientBreakpointProvider } from './util/withBreakpoint'; import meta from './meta'; import { isIOSApp } from './util/browser'; -import { - initAnalyticsClientSide, - addAnalyticsEvent, -} from './util/analyticsUtils'; +import { addAnalyticsEvent } from './util/analyticsUtils'; const plugContext = f => () => ({ plugComponentContext: f, @@ -103,9 +100,6 @@ async function init() { window.context = context; - // For Google Tag Manager - initAnalyticsClientSide(); - if (process.env.NODE_ENV === 'development') { if (config.AXE) { const axeConfig = { diff --git a/app/component/AppBarHsl.js b/app/component/AppBarHsl.js index 38171582b2..b07b376347 100644 --- 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 (!cookieConsent) { + window.dataLayer = null; + } else { + initAnalyticsClientSide(); + } + return ( <> {config.useCookiesPrompt && ( diff --git a/app/util/analyticsUtils.js b/app/util/analyticsUtils.js index afea06b890..ecfea16eb6 100644 --- 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 index e807956198..a421b7d182 100644 --- 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", From 99495152ca6bf97cb8143fb31910b20ae36b5ce7 Mon Sep 17 00:00:00 2001 From: Viljami Nurminen Date: Mon, 13 Mar 2023 09:54:59 +0200 Subject: [PATCH 2/6] chore: extract mobile footer component --- app/component/MobileFooter.js | 39 +++++++++++++++++++++++++ app/component/MobileView.js | 55 ++++++++++------------------------- 2 files changed, 55 insertions(+), 39 deletions(-) create mode 100644 app/component/MobileFooter.js diff --git a/app/component/MobileFooter.js b/app/component/MobileFooter.js new file mode 100644 index 0000000000..33ff7e0ea3 --- /dev/null +++ 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 && ( +
+
+
{config.copyrightText || ''}
+
+ +
+
+
+
+
+
+ )} + + ); +}; + +MobileFooter.contextTypes = { + config: PropTypes.object.isRequired, +}; + +export default MobileFooter; diff --git a/app/component/MobileView.js b/app/component/MobileView.js index 09e224d83a..602412a88c 100644 --- 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
{settingsDrawer}
; } @@ -121,33 +118,13 @@ export default function MobileView(
) : ( -
- {header} - {content} +
+
+ {header} + {content} +
- {config.useCookiesPrompt && ( -
-
-
{config.copyrightText || ''}
-
- -
-
-
-
-
-
- )} +
)}
From da03f9dedc1cb96d65174b5b735b8a016656c3da Mon Sep 17 00:00:00 2001 From: Viljami Nurminen Date: Mon, 13 Mar 2023 09:56:44 +0200 Subject: [PATCH 3/6] fix: move mobile footer to the bottom of the page regardless of page content length --- app/component/navigation.scss | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/app/component/navigation.scss b/app/component/navigation.scss index 3b4cdb66fe..e0d9d5cf23 100644 --- 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; } From 49bcd1935d640c5b515550c3165d59c98456e900 Mon Sep 17 00:00:00 2001 From: Viljami Nurminen Date: Mon, 13 Mar 2023 14:51:32 +0200 Subject: [PATCH 4/6] fix: enable cookies if cookie prompt is disabled in the configs --- app/component/AppBarHsl.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/component/AppBarHsl.js b/app/component/AppBarHsl.js index b07b376347..b7860cb055 100644 --- a/app/component/AppBarHsl.js +++ b/app/component/AppBarHsl.js @@ -110,7 +110,7 @@ const AppBarHsl = ({ lang, user, favourites }, context) => { useEffect(() => siteHeaderRef.current?.fetchNotifications()[favourites]); const cookieConsent = useIsConsentGiven('cookie_cat_statistic'); - if (!cookieConsent) { + if (config.useCookiesPrompt && !cookieConsent) { window.dataLayer = null; } else { initAnalyticsClientSide(); From 057e33c4ea2e686118de095607e971924849f5b2 Mon Sep 17 00:00:00 2001 From: Viljami Nurminen Date: Tue, 14 Mar 2023 11:42:14 +0200 Subject: [PATCH 5/6] fix: init analytics on client side if cookies prompt configuration is falsy --- app/client.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/app/client.js b/app/client.js index 9ae1a2d67c..5d4a8ee5db 100644 --- a/app/client.js +++ b/app/client.js @@ -37,7 +37,10 @@ import oldParamParser from './util/oldParamParser'; import { ClientProvider as ClientBreakpointProvider } from './util/withBreakpoint'; import meta from './meta'; import { isIOSApp } from './util/browser'; -import { addAnalyticsEvent } from './util/analyticsUtils'; +import { + initAnalyticsClientSide, + addAnalyticsEvent, +} from './util/analyticsUtils'; const plugContext = f => () => ({ plugComponentContext: f, @@ -98,6 +101,11 @@ async function init() { const context = await app.rehydrate(window.state); + // For Google Tag Manager + if (!config.useCookiesPrompt) { + initAnalyticsClientSide(); + } + window.context = context; if (process.env.NODE_ENV === 'development') { From 95d8ab4f0f2fe3315d05cfabf05898d1eb1bfb6a Mon Sep 17 00:00:00 2001 From: Viljami Nurminen Date: Thu, 16 Mar 2023 08:25:33 +0200 Subject: [PATCH 6/6] fix: follow cookie prompt configuration in ItineraryPageMap --- app/component/map/ItineraryPageMap.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/app/component/map/ItineraryPageMap.js b/app/component/map/ItineraryPageMap.js index b0355cb902..c5a692a956 100644 --- a/app/component/map/ItineraryPageMap.js +++ b/app/component/map/ItineraryPageMap.js @@ -99,7 +99,9 @@ function ItineraryPageMap( /> )} - {breakpoint === 'large' && } + {breakpoint === 'large' && config.useCookiesPrompt && ( + + )} ); }