Add support for Matomo

.storybook/main.js

@@ -4,7 +4,7 @@ import remarkGfm from 'remark-gfm';
 export default {
   stories: [
     '../docs/src/**/*.mdx',
-    '../oereb_client/**/*.stories.@(js|jsx|ts|tsx|mdx)',
+    '../oereb_client/**/*.@(mdx|stories.@(js|jsx|ts|tsx))',
   ],
   addons: [
     "@storybook/addon-links",

CHANGELOG.rst

@@ -6,6 +6,7 @@ Changelog
 
 https://github.com/openoereb/oereb_client/milestone/17
 
+- Include Matomo JavaScript Client
 - Dependency updates
 
 2.1.3

docs/src/Configuration.mdx

@@ -304,6 +304,12 @@ oereb_client:
   # parameter undefined to disable Google Analytics.
   google_analytics: UA-12345678-9
 
+  # [OPTIONAL] Enable Matomo tracking by specifying matomo URL and site ID. Leave this
+  # parameter undefined to disable Matomo.
+  matomo:
+    url: https://matomo.example.com
+    id: 1
+
   # [OPTIONAL] The mask_surrounding layer can be used to lay a mask (half-transparent
   # white layer) on the surrounding cantons. You have to define a WMS URL and
   # params according to the ol.source.ImageWMS documentation:

oereb_client/static/src/component/app/app.jsx

@@ -1,6 +1,6 @@
 import {isString} from 'lodash';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, {useEffect} from 'react';
 import {useDispatch} from 'react-redux';
 
 import {initAvailability, setAvailabilityPrefix} from '../../reducer/availability';
@@ -15,6 +15,7 @@ import OerebInformationPanel from '../information_panel/information_panel';
 import OerebMap from '../map/map';
 import OerebMenu from '../menu/menu';
 import OerebMessage from '../message/message';
+import MatomoTracker from '../matomo_tracker/matomo_tracker';
 
 const App = function (props) {
   const dispatch = useDispatch();
@@ -67,13 +68,19 @@ const App = function (props) {
       });
   }
 
+  let tracker = null;
+  if (config['matomo'] && config['matomo']['url'] && config['matomo']['site_id']) {
+    tracker = <MatomoTracker matomoUrl={config['matomo']['url']} siteId={config['matomo']['site_id']} />;
+  }
+
   return (
     <div className="oereb-client-app">
         <OerebMap />
         <OerebInformationPanel />
         <OerebExtract />
         <OerebMenu />
         <OerebMessage />
+        {tracker}
     </div>
   );
 };

oereb_client/static/src/component/matomo_tracker/matomo_tracker.jsx

@@ -0,0 +1,26 @@
+import PropTypes from 'prop-types';
+import React, {useEffect} from 'react';
+
+const MatomoTracker = ({matomoUrl, siteId}) => {
+  useEffect(() => {
+    const script = document.createElement('script');
+    script.type = 'text/javascript';
+    script.async = true;
+    script.defer = true;
+    script.src = `${matomoUrl}/matomo.js`;
+    document.body.appendChild(script);
+    window._paq = window._paq || [];
+    window._paq.push(['trackPageView']);
+    window._paq.push(['enableLinkTracking']);
+    window._paq.push(['setTrackerUrl', `${matomoUrl}/matomo.php`]);
+    window._paq.push(['setSiteId', siteId]);
+  }, [matomoUrl, siteId]);
+  return null;
+};
+
+MatomoTracker.propTypes = {
+  matomoUrl: PropTypes.string.isRequired,
+  siteId: PropTypes.number.isRequired
+};
+
+export default MatomoTracker;

oereb_client/static/src/component/matomo_tracker/matomo_tracker.mdx

@@ -0,0 +1,18 @@
+import {Meta} from '@storybook/blocks';
+
+<Meta title="API Reference/Component/MatomoTracker" />
+
+# App
+
+A hidden component enabling user tracking using Matomo.
+
+```jsx
+<MatomoTracker matomoUrl={matomoUrl} siteId={siteId} />
+```
+
+### Parameters
+
+| Param | Type | Description |
+| --- | --- | --- |
+| matomoUrl | <code>String</code> | The URL of the Matomo instance. |
+| siteId | <code>Number</code> | The ID of the Site configured in Matomo. |