@@ -4,7 +4,8 @@ "collectionName": "settings",
   "info": {
     "singularName": "setting",
     "pluralName": "settings",
-    "displayName": "Settings"
+    "displayName": "Settings",
+    "description": ""
   },
   "options": {
     "draftAndPublish": false
@@ -47,6 +48,14 @@ "localized": true
         }
       },
       "type": "richtext"
+    },
+    "matomo_script_url": {
+      "pluginOptions": {
+        "i18n": {
+          "localized": false
+        }
+      },
+      "type": "string"
     }
   }
 }

@@ -953,6 +953,7 @@ gtm_id?: Maybe<Scalars['String']>;
   about_link?: Maybe<Scalars['String']>;
   faq_link?: Maybe<Scalars['String']>;
   announcement?: Maybe<Scalars['String']>;
+  matomo_script_url?: Maybe<Scalars['String']>;
   createdAt?: Maybe<Scalars['DateTime']>;
   updatedAt?: Maybe<Scalars['DateTime']>;
   localizations?: Maybe<SettingRelationResponseCollection>;
@@ -975,6 +976,7 @@ gtm_id?: Maybe<Scalars['String']>;
   about_link?: Maybe<Scalars['String']>;
   faq_link?: Maybe<Scalars['String']>;
   announcement?: Maybe<Scalars['String']>;
+  matomo_script_url?: Maybe<Scalars['String']>;
 };
 
 export type SettingRelationResponseCollection = {
@@ -1797,7 +1799,7 @@ { __typename?: 'SettingEntity' }
       & Pick<SettingEntity, 'id'>
       & { attributes?: Maybe<(
         { __typename?: 'Setting' }
-        & Pick<Setting, 'gtm_id' | 'about_link' | 'faq_link' | 'announcement'>
+        & Pick<Setting, 'gtm_id' | 'about_link' | 'faq_link' | 'announcement' | 'matomo_script_url'>
       )> }
     )> }
   )> }
@@ -2508,6 +2510,7 @@ gtm_id
         about_link
         faq_link
         announcement
+        matomo_script_url
       }
     }
   }

@@ -7,6 +7,7 @@ gtm_id
         about_link
         faq_link
         announcement
+        matomo_script_url
       }
     }
   }

@@ -0,0 +1,27 @@ 
+import {useEffect} from 'react';
+import useSettings from './useSettings';
+
+const useMatomo = () => {
+  const settings = useSettings();
+
+  useEffect(() => {
+    if (settings) {
+      const {matomo_script_url} = settings;
+      console.log({matomo_script_url});
+      if (matomo_script_url && typeof window !== 'undefined')
+        loadMatomo(matomo_script_url);
+    }
+  }, [settings]);
+};
+
+const loadMatomo = (matomoScriptUrl: string) => {
+  const _mtm = (window._mtm = window._mtm || []);
+  _mtm.push({'mtm.startTime': new Date().getTime(), event: 'mtm.Start'});
+  const element = document.createElement('script');
+  const script = document.getElementsByTagName('script')[0];
+  element.async = true;
+  element.src = matomoScriptUrl;
+  script.parentNode.insertBefore(element, script);
+};
+
+export default process.env.NODE_ENV === 'production' ? useMatomo : () => {};

@@ -5,8 +5,8 @@ import GenericToolbar from '../containers/GenericToolbar';
 import {ActionType} from '../containers/GenericMenu/Action';
 import Box from '@material-ui/core/Box';
 import Banner from '../components/Banner';
-import Headroom from 'react-headroom';
 import useSettings from '../hooks/useSettings';
+import useMatomo from '../hooks/useMatomo';
 
 const ANNOUNCEMENT_STORAGE_KEY = 'lastAnnouncementSeen';
 
@@ -23,6 +23,7 @@ }
 
 const DefaultLayout = (props: Props) => {
   useGTM();
+  useMatomo();
   const {
     children,
     Topbar = null,