feat: matomo cookieless tracking PL-5

config/default.js

@@ -1,7 +1,7 @@
 export function getSettings() {
   if (typeof window !== 'undefined' && typeof window.nodeEnvSettings !== 'undefined') {
-      // Needed in browser run context
-      return window.nodeEnvSettings;
+    // Needed in browser run context
+    return window.nodeEnvSettings;
   }
   // This enables reading the environment variables from a .env file,
   // useful in a local development context.
@@ -24,24 +24,24 @@ const version = getVersion();
 
 
 if (typeof settings.PRODUCTION_PREFIX === 'undefined') {
-    // This is the correct way to set fail-safe defaults for
-    // configuration variables.
-    //
-    // This is because the defaults have to be set when in server
-    // context and they need to be assigned to process.env so that
-    // they get transferred to the client from the appropriate
-    // process.env values by the node server when rendering HTML.
-    settings.PRODUCTION_PREFIX = 'sm';
+  // This is the correct way to set fail-safe defaults for
+  // configuration variables.
+  //
+  // This is because the defaults have to be set when in server
+  // context and they need to be assigned to process.env so that
+  // they get transferred to the client from the appropriate
+  // process.env values by the node server when rendering HTML.
+  settings.PRODUCTION_PREFIX = 'sm';
 }
 
 if (typeof settings.INITIAL_MAP_POSITION === 'undefined') {
-    // If not set default to Helsinki
-    settings.INITIAL_MAP_POSITION = '60.170377597530016,24.941309323934886';
+  // If not set default to Helsinki
+  settings.INITIAL_MAP_POSITION = '60.170377597530016,24.941309323934886';
 }
 
 if (typeof settings.MAPS === 'undefined') {
-    // If not set default to Helsinki
-    settings.MAPS = 'servicemap,ortographic,accessible_map,guidemap,plainmap';
+  // If not set default to Helsinki
+  settings.MAPS = 'servicemap,ortographic,accessible_map,guidemap,plainmap';
 }
 
 if (typeof settings.CITIES === 'undefined') {
@@ -133,14 +133,17 @@ if (typeof settings.SENTRY_DSN_CLIENT === 'undefined') {
   settings.SENTRY_DSN_CLIENT = false;
 }
 
+if (settings.MATOMO_URL === 'undefined') {
+  settings.MATOMO_URL = undefined;
+}
+
 if (settings.MATOMO_MOBILITY_DIMENSION_ID === 'undefined') {
   settings.MATOMO_MOBILITY_DIMENSION_ID = undefined;
 }
 
 if (settings.MATOMO_SENSES_DIMENSION_ID === 'undefined') {
   settings.MATOMO_SENSES_DIMENSION_ID = undefined;
 }
-
 if (settings.MATOMO_NO_RESULTS_DIMENSION_ID === 'undefined') {
   settings.MATOMO_NO_RESULTS_DIMENSION_ID = undefined;
 }
@@ -153,6 +156,10 @@ if (settings.MATOMO_SITE_ID === 'undefined') {
   settings.MATOMO_SITE_ID = undefined;
 }
 
+if (settings.MATOMO_ENABLED === 'undefined') {
+  settings.MATOMO_ENABLED = undefined;
+}
+
 if (typeof settings.EMBEDDER_DOCUMENTATION_URL === 'undefined') {
   settings.EMBEDDER_DOCUMENTATION_URL = 'https://kaupunkialustana.hel.fi/palvelukartta/palvelukartan-upotusohjeet/';
 }
@@ -189,7 +196,7 @@ const municipalities = {
  */
 const splitTripleIntoThreeLangs = (text) => ({ fi: text.split(',')[0], sv: text.split(',')[1], en: text.split(',')[2] })
 
-export default {
+const defaultConfig = {
   "version": version.tag,
   "commit": version.commit,
   // API
@@ -228,7 +235,7 @@ export default {
     "id": 'HEARING_MAP_API',
   },
   // constants
-  "accessibilityColors":  {
+  "accessibilityColors": {
     "default": "#2242C7",
     "missingInfo": "#4A4A4A",
     "shortcomings": "#b00021",
@@ -306,5 +313,8 @@ export default {
   "matomoNoResultsDimensionID": settings.MATOMO_NO_RESULTS_DIMENSION_ID,
   "matomoUrl": settings.MATOMO_URL,
   "matomoSiteId": settings.MATOMO_SITE_ID,
+  "matomoEnabled": settings.MATOMO_ENABLED,
   "slowFetchMessageTimeout": Number(settings.SLOW_FETCH_MESSAGE_TIMEOUT)
 }
+
+export default defaultConfig;

package.json

@@ -3,7 +3,6 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@datapunt/matomo-tracker-js": "^0.5.1",
     "@emotion/css": "^11.11.2",
     "@emotion/react": "^11.10.8",
     "@emotion/styled": "^11.10.8",
@@ -88,6 +87,7 @@
     "@emotion/server": "^11.10.0",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.0.0",
+    "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.1.1",
     "axe-testcafe": "^1.1.0",
     "css-loader": "^7.1.1",

server/server.js

@@ -217,6 +217,7 @@ const htmlTemplate = (req, reactDom, preloadedState, css, cssString, emotionCss,
         window.nodeEnvSettings.MATOMO_NO_RESULTS_DIMENSION_ID = "${process.env.MATOMO_NO_RESULTS_DIMENSION_ID}";
         window.nodeEnvSettings.MATOMO_URL = "${process.env.MATOMO_URL}";
         window.nodeEnvSettings.MATOMO_SITE_ID = "${process.env.MATOMO_SITE_ID}";
+        window.nodeEnvSettings.MATOMO_ENABLED = "${process.env.MATOMO_ENABLED}";
         window.nodeEnvSettings.MODE = "${process.env.MODE}";
         window.nodeEnvSettings.INITIAL_MAP_POSITION = "${customValues.initialMapPosition}";
         window.nodeEnvSettings.SERVICE_MAP_URL = "${process.env.SERVICE_MAP_URL}";

src/App.js

@@ -16,15 +16,16 @@ import { StyledEngineProvider } from '@mui/material';
 import hdsStyle from 'hds-design-tokens';
 import withStyles from 'isomorphic-style-loader/withStyles';
 import PropTypes from 'prop-types';
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { Helmet } from 'react-helmet';
 import { IntlProvider, useIntl } from 'react-intl';
 import { useSelector } from 'react-redux';
-import { BrowserRouter, Route, Switch } from 'react-router-dom';
+import {
+  BrowserRouter, Route, Switch, useLocation,
+} from 'react-router-dom';
 import appStyles from './App.css';
 import ogImage from './assets/images/servicemap-meta-img.png';
 import { DataFetcher, Navigator } from './components';
-import SMCookies from './components/SMCookies/SMCookies';
 import HSLFonts from './hsl-icons.css';
 import styles from './index.css';
 import DefaultLayout from './layouts';
@@ -38,6 +39,14 @@ import LocaleUtility from './utils/locale';
 import EmbedderView from './views/EmbedderView';
 import useMobileStatus from './utils/isMobile';
 import { COOKIE_MODAL_ROOT_ID } from './utils/constants';
+import MatomoTracker from './components/Matomo/MatomoTracker';
+import MatomoContext from './components/Matomo/matomo-context';
+import config from '../config';
+import useMatomo from './components/Matomo/hooks/useMatomo';
+import { selectMobility, selectSenses } from './redux/selectors/settings';
+import SMCookies from './components/SMCookies/SMCookies';
+import { isEmbed } from './utils/path';
+import { servicemapTrackPageView } from './utils/tracking';
 
 // General meta tags for app
 function MetaTags() {
@@ -59,6 +68,10 @@ function MetaTags() {
 function App() {
   const locale = useSelector(getLocale);
   const intlData = LocaleUtility.intlData(locale);
+  const { trackPageView } = useMatomo();
+  const location = useLocation();
+  const senses = useSelector(selectSenses);
+  const mobility = useSelector(selectMobility);
 
   // Remove the server-side injected CSS.
   useEffect(() => {
@@ -69,6 +82,23 @@ function App() {
   }, []);
 
   const isMobile = useMobileStatus();
+  useEffect(() => {
+    // Simple custom servicemap page view tracking
+    servicemapTrackPageView();
+
+    if (!isEmbed()) {
+      trackPageView({
+        href: window.location.href,
+        ...config.matomoMobilityDimensionID && config.matomoSensesDimensionID && ({
+          customDimensions: [
+            { id: config.matomoMobilityDimensionID, value: mobility || '' },
+            { id: config.matomoSensesDimensionID, value: senses?.join(',') },
+          ],
+        }),
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [location.pathname, location.search, mobility, senses]);
 
   return (
     <StyledEngineProvider>
@@ -108,13 +138,33 @@ function App() {
 
 // Wrapper to get language route
 function LanguageWrapper() {
+  const matomoTracker = useMemo(() => {
+    if (config.matomoUrl && config.matomoSiteId && config.matomoEnabled) {
+      return new MatomoTracker({
+        urlBase: `//${config.matomoUrl}/`,
+        siteId: config.matomoSiteId,
+        trackerUrl: 'tracker.php',
+        srcUrl: 'piwik.min.js',
+        enabled: config.matomoEnabled === 'true' && !isEmbed(),
+        linkTracking: false,
+        configurations: {
+          requireCookieConsent: undefined,
+        },
+      });
+    }
+
+    return null;
+  }, []);
+
   if (isClient()) {
     return (
-      <BrowserRouter>
-        <Switch>
-          <Route path="/:lng" component={App} />
-        </Switch>
-      </BrowserRouter>
+      <MatomoContext.Provider value={matomoTracker}>
+        <BrowserRouter>
+          <Switch>
+            <Route path="/:lng" component={App} />
+          </Switch>
+        </BrowserRouter>
+      </MatomoContext.Provider>
     );
   }