diff --git a/src/components/FunctionalArea/CookieBanner/CookieBanner.component.tsx b/src/components/FunctionalArea/CookieBanner/CookieBanner.component.tsx index 6968deaa91e8db816bc5f69a5bbe58e686a906a8..770e3c9b5a8f6c4442801b6aec5e80517d358076 100644 --- a/src/components/FunctionalArea/CookieBanner/CookieBanner.component.tsx +++ b/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, diff --git a/src/redux/configuration/configuration.selectors.ts b/src/redux/configuration/configuration.selectors.ts index 01a9eb4c2d3437da7a252dc310d1353b020b490a..a89c0f72dded451de0829dbf86f1bb8ceefa2f7b 100644 --- a/src/redux/configuration/configuration.selectors.ts +++ b/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, diff --git a/src/redux/root/init.thunks.ts b/src/redux/root/init.thunks.ts index a236f7030b2b074508ad464c236bbcaac1b5d9d9..b5a5b4e0899bc7fe13ea745798a4f97abc5a4232 100644 --- a/src/redux/root/init.thunks.ts +++ b/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 diff --git a/src/utils/injectMatomoTracking.ts b/src/utils/injectMatomoTracking.ts new file mode 100644 index 0000000000000000000000000000000000000000..359302ff5885338a6dd5bb0b71814b7a5a37e55b --- /dev/null +++ b/src/utils/injectMatomoTracking.ts @@ -0,0 +1,19 @@ +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); + } +};