chore(matomo): use another dependency to track page views

I though the previous package would track all visits with the provided
but it seems that I need to add trackPageView on all pages. So I
decided to use another package.

1 files changed, 23 insertions, 18 deletions

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 6df1a1d..6ff8e1b 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,10 +1,10 @@
-import { MatomoProvider } from '@datapunt/matomo-tracker-react';
+import * as matomo from '@socialgouv/matomo-next';
 import { AppPropsWithLayout } from '@ts/types/app';
 import { settings } from '@utils/config';
-import { instance } from '@utils/helpers/matomo';
 import { PrismThemeProvider } from '@utils/providers/prism';
 import { ThemeProvider } from 'next-themes';
 import { useRouter } from 'next/router';
+import { useEffect } from 'react';
 import { IntlProvider } from 'react-intl';
 import '../styles/globals.scss';
 
@@ -12,25 +12,30 @@ const MyApp = ({ Component, pageProps }: AppPropsWithLayout) => {
   const { locale, defaultLocale } = useRouter();
   const appLocale: string = locale || settings.locales.defaultLocale;
 
+  useEffect(() => {
+    matomo.init({
+      url: settings.matomo.urlBase,
+      siteId: settings.matomo.siteId,
+    });
+  }, []);
+
   const getLayout = Component.getLayout ?? ((page) => page);
   return (
-    <MatomoProvider value={instance}>
-      <IntlProvider
-        locale={appLocale}
-        defaultLocale={defaultLocale}
-        messages={pageProps.translation}
+    <IntlProvider
+      locale={appLocale}
+      defaultLocale={defaultLocale}
+      messages={pageProps.translation}
+    >
+      <ThemeProvider
+        defaultTheme="system"
+        enableColorScheme={true}
+        enableSystem={true}
       >
-        <ThemeProvider
-          defaultTheme="system"
-          enableColorScheme={true}
-          enableSystem={true}
-        >
-          <PrismThemeProvider>
-            {getLayout(<Component {...pageProps} />)}
-          </PrismThemeProvider>
-        </ThemeProvider>
-      </IntlProvider>
-    </MatomoProvider>
+        <PrismThemeProvider>
+          {getLayout(<Component {...pageProps} />)}
+        </PrismThemeProvider>
+      </ThemeProvider>
+    </IntlProvider>
   );
 };