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.

5 files changed, 33 insertions, 38 deletions

diff --git a/package.json b/package.json
index f6d4c80..760deb2 100644
--- a/package.json
+++ b/package.json
@@ -33,11 +33,11 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
-    "@datapunt/matomo-tracker-react": "^0.5.1",
     "@mdx-js/loader": "^2.0.0-rc.2",
     "@mdx-js/react": "^2.0.0-rc.2",
     "@next/bundle-analyzer": "^12.0.10",
     "@next/mdx": "^12.0.7",
+    "@socialgouv/matomo-next": "^1.2.2",
     "@types/mdx": "^2.0.1",
     "@types/prismjs": "^1.16.6",
     "babel-plugin-formatjs": "^10.3.17",
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>
   );
 };
 
diff --git a/src/utils/config.ts b/src/utils/config.ts
index dc009d9..07d42a3 100644
--- a/src/utils/config.ts
+++ b/src/utils/config.ts
@@ -13,6 +13,10 @@ export const settings = {
     defaultCountry: 'FR',
     supported: ['en', 'fr'],
   },
+  matomo: {
+    urlBase: process.env.NEXT_PUBLIC_MATOMO_URL || '',
+    siteId: process.env.NEXT_PUBLIC_MATOMO_SITE_ID || '0',
+  },
   postsPerPage: 10,
   twitterId: '@ArmandPhilippot',
   url: process.env.NEXT_PUBLIC_FRONTEND_URL,
diff --git a/src/utils/helpers/matomo.ts b/src/utils/helpers/matomo.ts
deleted file mode 100644
index 6930196..0000000
--- a/src/utils/helpers/matomo.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { createInstance } from '@datapunt/matomo-tracker-react';
-
-export const instance = createInstance({
-  urlBase: process.env.NEXT_PUBLIC_MATOMO_URL || '',
-  siteId: Number(process.env.NEXT_PUBLIC_MATOMO_SITE_ID) || 0,
-  linkTracking: true,
-});
diff --git a/yarn.lock b/yarn.lock
index 834ed93..65f74e7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1167,18 +1167,6 @@
   dependencies:
     "@cspotcode/source-map-consumer" "0.8.0"
 
-"@datapunt/matomo-tracker-js@^0.5.1":
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/@datapunt/matomo-tracker-js/-/matomo-tracker-js-0.5.1.tgz#92a746ffa421f91b3a59fefce707d45ca22be96b"
-  integrity sha512-9/MW9vt/BA5Db7tO6LqCeQKtuvBNjyq51faF3AzUmPMlYsJCnASIxcut3VqJKiribhUoey7aYbPIYuj9x4DLPA==
-
-"@datapunt/matomo-tracker-react@^0.5.1":
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/@datapunt/matomo-tracker-react/-/matomo-tracker-react-0.5.1.tgz#d7a4e62b23610eab2b7513d4df41d500291aaa53"
-  integrity sha512-lrNYM9hFL6XK0VAdtMb7MwZrLWhaAconx4c7gOGAMvoWuoVm+ZZIYFuKtfYdYMeBf0avxWtmKRwjZEg7T8jV2A==
-  dependencies:
-    "@datapunt/matomo-tracker-js" "^0.5.1"
-
 "@eslint/eslintrc@^1.0.5":
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.0.5.tgz#33f1b838dbf1f923bfa517e008362b78ddbbf318"
@@ -1664,6 +1652,11 @@
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
+"@socialgouv/matomo-next@^1.2.2":
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/@socialgouv/matomo-next/-/matomo-next-1.2.2.tgz#0fe3c8978a38f23411fbbdcaf4e3a7edaf8eecbf"
+  integrity sha512-VWIToHeF0rFtLlGGkjdfUCtLckZebwXwYlnAVYwqMivUboqRgxl7wsUGkGfp6HM4cfYla9NQw4mbqRPXfTGu5Q==
+
 "@svgr/babel-plugin-add-jsx-attribute@^6.0.0":
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-6.0.0.tgz#bd6d1ff32a31b82b601e73672a789cc41e84fe18"