[Task #128719] Matomo tracking of actions

eea · Oct 11, 2021 · f320b17 · f320b17
1 parent 1d42e56
commit f320b17
Show file tree

Hide file tree

Showing 7 changed files with 531 additions and 282 deletions.
diff --git a/jsconfig.json b/jsconfig.json
@@ -1,13 +1,6 @@
 {
     "compilerOptions": {
-        "paths": {
-            "volto-datablocks": [
-                "addons/volto-datablocks/src"
-            ],
-            "@eeacms/volto-datablocks": [
-                "addons/volto-datablocks/src"
-            ]
-        },
+        "paths": {},
         "baseUrl": "src"
     }
 }
diff --git a/mrs.developer.json b/mrs.developer.json
@@ -4,6 +4,13 @@
     "branch": "develop",
     "path": "src",
     "package": "@eeacms/volto-datablocks",
-    "develop": true
+    "develop": false
+  },
+  "volto-matomo": {
+    "url": "https://github.com/eea/volto-matomo.git",
+    "branch": "develop",
+    "path": "src",
+    "package": "@eeacms/volto-matomo",
+    "develop": false
   }
 }
diff --git a/package.json b/package.json
@@ -43,7 +43,8 @@
     "@eeacms/volto-embed",
     "volto-addons",
     "@eeacms/volto-openlayers-map",
-    "@eeacms/volto-tableau"
+    "@eeacms/volto-tableau",
+    "@eeacms/volto-matomo"
   ],
   "dependencies": {
     "@eeacms/volto-datablocks": "2.0.13",
@@ -52,6 +53,7 @@
     "@eeacms/volto-grid-block": "github:eea/volto-grid-block#centurion",
     "@eeacms/volto-openlayers-map": "0.1.2",
     "@eeacms/volto-tableau": "1.2.3",
+    "@eeacms/volto-matomo": "github:eea/volto-matomo#develop",
     "@material/react-linear-progress": "^0.15.0",
     "@plone/volto": "13.15.1",
     "axios": "^0.21.1",

diff --git a/src/components/manage/Blocks/FiltersBlock/View.jsx b/src/components/manage/Blocks/FiltersBlock/View.jsx
@@ -21,7 +21,7 @@ import {
   deleteQueryParam,
 } from '@eeacms/volto-datablocks/actions';
 import config from '@plone/volto/registry';
-import { getEncodedQueryString } from '~/utils';
+import { getEncodedQueryString, createEvent } from '~/utils';
 
 import menuSVG from '@plone/volto/icons/menu-alt.svg';
 import circlePlus from '@plone/volto/icons/circle-plus.svg';
@@ -130,6 +130,72 @@ const View = ({ content, ...props }) => {
     /* eslint-disable-next-line */
   }, [JSON.stringify(state.filtersMeta)]);
 
+  useEffect(() => {
+    if (
+      props.discodata_query.search.filtersCounter > 1 &&
+      props.discodata_query.search.advancedFiltering
+    ) {
+      const trackedFilters = [
+        'batConclusionCode',
+        'EEAActivity',
+        'facilityTypes',
+        'nuts_latest',
+        'nuts_regions',
+        'permitType',
+        'permitYear',
+        'plantTypes',
+        'pollutant',
+        'pollutantGroup',
+        'province',
+        'region',
+        'reportingYear',
+        'riverBasin',
+        'siteCountry',
+      ];
+      createEvent('matomoTrackEvent', {
+        category: 'Filters',
+        action: 'Filters changed',
+        name: 'Map/Table filters',
+        value: JSON.stringify({
+          ...Object.keys(props.discodata_query.search)
+            .filter(
+              (key) =>
+                trackedFilters.includes(key) &&
+                props.discodata_query.search[key]?.filter((value) => value)
+                  ?.length,
+            )
+            .reduce((obj, key) => {
+              obj[key] = props.discodata_query.search[key]?.filter(
+                (value) => value,
+              );
+              return obj;
+            }, {}),
+        }),
+      });
+    } else if (
+      props.discodata_query.search.filtersCounter &&
+      !props.discodata_query.search.advancedFiltering
+    ) {
+      const { siteTerm, locationTerm } = props.discodata_query.search;
+      if (siteTerm) {
+        createEvent('matomoTrackEvent', {
+          category: 'Search',
+          action: 'Search by site term',
+          name: 'Map/Table search',
+          value: siteTerm,
+        });
+      } else if (locationTerm?.text) {
+        createEvent('matomoTrackEvent', {
+          category: 'Search',
+          action: 'Search by location',
+          name: 'Map/Table search',
+          value: locationTerm.text,
+        });
+      }
+    }
+    /* eslint-disable-next-line */
+  }, [props.discodata_query.search.filtersCounter]);
+
   useEffect(() => {
     if (
       mounted.current &&
@@ -810,6 +876,7 @@ const View = ({ content, ...props }) => {
       queryParam: {
         ...props.discodata_query.search,
         ...newFilters,
+        facilityTypes: [],
         nuts_regions: [],
         nuts_latest: [],
         siteTerm: null,

diff --git a/src/config.js b/src/config.js
@@ -357,7 +357,9 @@ export default function applyConfig(config) {
     providerUrl: 'https://discodata.eea.europa.eu/sql',
     excludeFromNavigation: ['/industrial-site'],
     metaDescription: 'European Environment Agency',
-    matomoSiteId: 48,
+    // matomoSiteId: 48,
+    matomoSiteId: 7,
+    matomoUrlBase: 'https://matomo.devel4cph.eea.europa.eu/',
     tableauVersion: '2.3.0',
   };
 

diff --git a/src/utils.js b/src/utils.js
@@ -27,3 +27,15 @@ export const getEncodedString = (str) => {
   }
   return '';
 };
+
+export const createEvent = (type, detail) => {
+  let newEvent;
+  if (window.document.documentMode) {
+    // IE support event
+    newEvent = document.createEvent('CustomEvent');
+    newEvent.initCustomEvent(type, false, false, { detail });
+  } else {
+    newEvent = new CustomEvent(type, { detail });
+  }
+  document.dispatchEvent(newEvent);
+};