inject matomo when user accepts cookie

src/components/FunctionalArea/CookieBanner/CookieBanner.component.tsx

@@ -5,10 +5,14 @@ import { useAppSelector } from '@/redux/hooks/useAppSelector';
 import { Button } from '@/shared/Button';
 import Link from 'next/link';
 import React, { useEffect, useState } from 'react';
-import { cookiePolicyUrlSelector } from '@/redux/configuration/configuration.selectors';
+import {
+  cookiePolicyUrlSelector,
+  matomoUrlSelector,
+} from '@/redux/configuration/configuration.selectors';
 import { OptionInput } from '@/components/Map/Drawer/ExportDrawer/CheckboxFilter/OptionInput';
 import { CheckboxItem } from '@/components/Map/Drawer/ExportDrawer/CheckboxFilter/CheckboxFilter.types';
 import { ZERO } from '@/constants/common';
+import { injectMatomoTracking } from '@/utils/injectMatomoTracking';
 import {
   USER_ACCEPTED_COOKIES_COOKIE_NAME,
   USER_ACCEPTED_COOKIES_COOKIE_VALUE,
@@ -24,6 +28,7 @@ export const CookieBanner = (): React.ReactNode => {
   const dispatch = useAppDispatch();
   const { visible, accepted } = useAppSelector(selectCookieBanner);
   const cookiePolicyUrl = useAppSelector(cookiePolicyUrlSelector);
+  const matomoUrl = useAppSelector(matomoUrlSelector);
 
   const [options, setOptions] = useState([selectMatomoOption]);
 
@@ -51,6 +56,7 @@ export const CookieBanner = (): React.ReactNode => {
         USER_ACCEPTED_MATOMO_COOKIES_COOKIE_NAME,
         USER_ACCEPTED_COOKIES_COOKIE_VALUE.ACCEPTED,
       );
+      injectMatomoTracking(matomoUrl);
     } else {
       localStorage.setItem(
         USER_ACCEPTED_MATOMO_COOKIES_COOKIE_NAME,

src/redux/configuration/configuration.selectors.ts

@@ -20,6 +20,7 @@ import {
   REQUEST_ACCOUNT_EMAIL,
   TERMS_OF_SERVICE_ID,
   COOKIE_POLICY_URL,
+  MATOMO_URL,
 } from './configuration.constants';
 
 import { ConfigurationHandlersIds, ConfigurationImageHandlersIds } from './configuration.types';
@@ -60,6 +61,11 @@ export const searchDistanceValSelector = createSelector(
   state => configurationAdapterSelectors.selectById(state, SEARCH_DISTANCE_NAME_ID)?.value,
 );
 
+export const matomoUrlSelector = createSelector(
+  configurationOptionsSelector,
+  state => configurationAdapterSelectors.selectById(state, MATOMO_URL)?.value,
+);
+
 export const adminEmailValSelector = createSelector(
   configurationOptionsSelector,
   state => configurationAdapterSelectors.selectById(state, REQUEST_ACCOUNT_EMAIL)?.value,

src/redux/root/init.thunks.ts

@@ -18,6 +18,11 @@ import { getProjects } from '@/redux/projects/projects.thunks';
 import { getSubmapConnectionsBioEntity } from '@/redux/bioEntity/thunks/getSubmapConnectionsBioEntity';
 import { getArrowTypes, getLineTypes, getShapes } from '@/redux/shapes/shapes.thunks';
 import { MATOMO_URL } from '@/redux/configuration/configuration.constants';
+import {
+  USER_ACCEPTED_COOKIES_COOKIE_VALUE,
+  USER_ACCEPTED_MATOMO_COOKIES_COOKIE_NAME,
+} from '@/components/FunctionalArea/CookieBanner/CookieBanner.constants';
+import { injectMatomoTracking } from '@/utils/injectMatomoTracking';
 import { getAllBackgroundsByProjectId } from '../backgrounds/backgrounds.thunks';
 import { getConfiguration, getConfigurationOptions } from '../configuration/configuration.thunks';
 import {
@@ -69,7 +74,11 @@ export const fetchInitialAppData = createAsyncThunk<
   try {
     const configuration = store.getState().configuration.main.data;
 
-    if (configuration) {
+    const userAcceptedMatomo =
+      localStorage.getItem(USER_ACCEPTED_MATOMO_COOKIES_COOKIE_NAME) ===
+      USER_ACCEPTED_COOKIES_COOKIE_VALUE.ACCEPTED;
+
+    if (configuration && userAcceptedMatomo) {
       const options = configuration.options.filter(option => option.type === MATOMO_URL);
       let url = '';
       if (options.length > ZERO) {
@@ -78,21 +87,7 @@ export const fetchInitialAppData = createAsyncThunk<
       if (!url.startsWith('http')) {
         url = '';
       }
-      if (url !== '') {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-expect-error
-        // eslint-disable-next-line no-underscore-dangle,no-multi-assign
-        const _mtm = (window._mtm = window._mtm || []);
-        _mtm.push({ 'mtm.startTime': new Date().getTime(), event: 'mtm.Start' });
-        const d = document;
-        const g = d.createElement('script');
-        const s = d.getElementsByTagName('script')[ZERO];
-        g.async = true;
-        g.src = url;
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-expect-error
-        s.parentNode.insertBefore(g, s);
-      }
+      injectMatomoTracking(url);
     }
   } catch (e) {
     // eslint-disable-next-line no-console

src/utils/injectMatomoTracking.ts

+import { ZERO } from '@/constants/common';
+
+export const injectMatomoTracking = (url: string | undefined): void => {
+  if (url !== '' && url !== undefined) {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    // eslint-disable-next-line no-underscore-dangle,no-multi-assign
+    const _mtm = (window._mtm = window._mtm || []);
+    _mtm.push({ 'mtm.startTime': new Date().getTime(), event: 'mtm.Start' });
+    const d = document;
+    const g = d.createElement('script');
+    const s = d.getElementsByTagName('script')[ZERO];
+    g.async = true;
+    g.src = url;
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    s.parentNode.insertBefore(g, s);
+  }
+};