.env.example

 API_HOST="http://localhost:3000"
 LABOITE_HOST="https://lb.appseducation.fr"
-UML_SERVER=""
\ No newline at end of file
+UML_SERVER=""
+MATOMO_URL=""
+MATOMO_SITEID="1"
\ No newline at end of file

package.json

 {
   "name": "laboite-blog-front",
   "description": "laboite blog service frontend",
-  "version": "1.8.1",
+  "version": "1.9.0-testing.1",
   "license": "EUPL-1.2",
   "author": "EOLE/PCLL <team@eole.education> - DINUM",
   "type": "module",

src/components/matomo/Matomo.svelte

+<script context="module">
+  import {browser} from '$app/environment';
+
+  export const push = args => {
+    if (!browser) return;
+    if (!('_paq' in window)) window._paq = [];
+    window._paq.push(args);
+  };
+</script>
+
+<script>
+  import {onMount} from 'svelte';
+
+  export let url;
+  export let siteId = '1';
+
+  // see https://developer.matomo.org/guides/spa-tracking
+  push(['setSiteId', siteId]);
+  push(['setTrackerUrl', url + '/matomo.php']);
+  push(['disableCookies']);
+
+  let initscript = false;
+  onMount(() => (initscript = true));
+</script>
+
+<svelte:head>
+  {#if initscript}
+    <script defer async src={url + '/matomo.js'}></script>
+  {/if}
+</svelte:head>

src/components/matomo/MatomoTracker.svelte

+<script>
+  import Matomo, {push} from './Matomo.svelte';
+  import {browser} from '$app/environment';
+  import {page} from '$app/stores';
+
+  export let url;
+  export let siteId = '1';
+  let referrer = null;
+
+  const trackPageView = path => {
+    if (referrer) push(['setReferrerUrl', referrer]);
+    referrer = path;
+    push(['setCustomUrl', path]);
+    push(['setDocumentTitle', document.title]);
+    push(['trackPageView']);
+  };
+
+  // call TrackPageView on page change
+  $: browser && trackPageView($page.url.pathname);
+</script>
+
+<Matomo {url} {siteId} />

src/hooks.js

 /** @type {import('@sveltejs/kit').GetSession} */
 export function getSession(event) {
-  const { API_HOST, LABOITE_HOST, UML_SERVER } = process.env;
+  const {API_HOST, LABOITE_HOST, UML_SERVER, MATOMO_URL, MATOMO_SITEID} =
+    process.env;
   return {
-    env: { API_HOST, LABOITE_HOST, UML_SERVER },
+    env: {API_HOST, LABOITE_HOST, UML_SERVER, MATOMO_URL, MATOMO_SITEID},
   };
 }

src/routes/+layout.server.js

@@ -2,8 +2,9 @@
 export async function load() {
   // previously stored in session (deprecated)
   // https://github.com/sveltejs/kit/discussions/5883
-  const {API_HOST, LABOITE_HOST, UML_SERVER} = process.env;
+  const {API_HOST, LABOITE_HOST, UML_SERVER, MATOMO_URL, MATOMO_SITEID} =
+    process.env;
   return {
-    env: {API_HOST, LABOITE_HOST, UML_SERVER},
+    env: {API_HOST, LABOITE_HOST, UML_SERVER, MATOMO_URL, MATOMO_SITEID},
   };
 }

src/routes/+layout.svelte

 <script defer src="./fonts/js/all.min.js">
-  import '../utils/theme/index.css';
   import {_, locale} from 'svelte-i18n';
+  import MatomoTracker from '../components/matomo/MatomoTracker.svelte';
+  import '../utils/theme/index.css';
   import {getMaintenance} from '../utils/api/methods';
   import {getStores} from '$app/stores';
   import '../utils/locales/index';
@@ -8,7 +9,7 @@
   import Footer from '../components/navigation/Footer.svelte';
   import {trackLocation} from '../utils/functions/locationTracker';
   import Loader from '../components/common/Loader.svelte';
-  import {onMount, beforeUpdate} from 'svelte';
+  import {onMount} from 'svelte';
   import {language} from '../utils/functions/stores';
 
   export let data;
@@ -22,13 +23,16 @@
     }
   });
 
-  beforeUpdate(async () => {
+  async function updateMaintenance() {
     maintenance = await getMaintenance(data.env.API_HOST);
-  });
+  }
 
   trackLocation();
 
-  const {navigating} = getStores();
+  const {page, navigating} = getStores();
+  $: if ($page) {
+    updateMaintenance();
+  }
 </script>
 
 <Nav />
@@ -36,6 +40,12 @@
 {#if !!$navigating}
   <Loader message={$_('loading')} mainLoader={true} />
 {/if}
+{#if data.env.MATOMO_URL}
+  <MatomoTracker
+    url={data.env.MATOMO_URL}
+    siteId={Number(data.env.MATOMO_SITEID)}
+  />
+{/if}
 
 <main class="container">
   {#if !!maintenance.maintenance}

src/routes/articles/[slug]/+page.svelte

 <script>
   import {_} from 'svelte-i18n';
+  import fetcher from 'isomorphic-fetch';
   import {onMount} from 'svelte';
   import sanitizeHtml from 'sanitize-html';
   import AuthorIdCard from '../../../components/authors/AuthorIdCard.svelte';