feat: replace Matomo with Ackee

I do not use all Matomo features so I was searching a lightweight
analytics tools. I will give a try to Ackee.

3 files changed, 13 insertions, 13 deletions

diff --git a/src/components/Layouts/Layout.tsx b/src/components/Layouts/Layout.tsx
index 9a47b2b..9c29df9 100644
--- a/src/components/Layouts/Layout.tsx
+++ b/src/components/Layouts/Layout.tsx
@@ -9,6 +9,7 @@ import { ReactElement, ReactNode, useEffect, useRef } from 'react';
 import { useIntl } from 'react-intl';
 import { SearchAction, WebSite, WithContext } from 'schema-dts';
 import styles from './Layout.module.scss';
+import Script from 'next/script';
 
 const Layout = ({
   children,
@@ -111,6 +112,13 @@ const Layout = ({
           }}
         ></script>
       </Head>
+      <Script
+        strategy="afterInteractive"
+        async
+        src={`${settings.ackee.url}/${settings.ackee.filename}`}
+        data-ackee-server={settings.ackee.url}
+        data-ackee-domain-id={settings.ackee.siteId}
+      />
       <noscript>
         <div className={styles['noscript-spacing']}></div>
       </noscript>
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 6ff8e1b..1f5be8f 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,10 +1,8 @@
-import * as matomo from '@socialgouv/matomo-next';
 import { AppPropsWithLayout } from '@ts/types/app';
 import { settings } from '@utils/config';
 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,13 +10,6 @@ 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 (
     <IntlProvider
diff --git a/src/utils/config.ts b/src/utils/config.ts
index 86701fe..5928f02 100644
--- a/src/utils/config.ts
+++ b/src/utils/config.ts
@@ -1,4 +1,9 @@
 export const settings = {
+  ackee: {
+    filename: process.env.NEXT_PUBLIC_ACKEE_FILENAME || 'tracker.js',
+    siteId: process.env.NEXT_PUBLIC_ACKEE_SITE_ID || '',
+    url: `https://${process.env.NEXT_PUBLIC_ACKEE_DOMAIN}` || '',
+  },
   name: 'Armand Philippot',
   baseline: {
     en: 'Front-end developer',
@@ -13,10 +18,6 @@ export const settings = {
     defaultCountry: 'FR',
     supported: ['en', 'fr'],
   },
-  matomo: {
-    urlBase: `https://${process.env.NEXT_PUBLIC_MATOMO_DOMAIN}` || '',
-    siteId: process.env.NEXT_PUBLIC_MATOMO_SITE_ID || '0',
-  },
   postsPerPage: 10,
   twitterId: '@ArmandPhilippot',
   url: `${process.env.NEXT_PUBLIC_APP_PROTOCOL}://${process.env.NEXT_PUBLIC_APP_DOMAIN}`,