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.

8 files changed, 26 insertions, 30 deletions

diff --git a/.env.example b/.env.example
index 3200101..6217f82 100644
--- a/.env.example
+++ b/.env.example
@@ -10,8 +10,9 @@ APP_FEED_DESCRIPTION="What you want..."
 NEXT_PUBLIC_APP_DOMAIN="$APP_FRONTEND_DOMAIN"
 NEXT_PUBLIC_APP_PROTOCOL="$APP_PROTOCOL"
 NEXT_PUBLIC_GRAPHQL_API="https://$APP_BACKEND_DOMAIN$APP_GRAPHQL_ENDPOINT"
-NEXT_PUBLIC_MATOMO_SITE_ID=1
-NEXT_PUBLIC_MATOMO_DOMAIN="www.analyticsDomain.com"
+NEXT_PUBLIC_ACKEE_DOMAIN="www.ackeeDomain.com"
+NEXT_PUBLIC_ACKEE_FILENAME="tracker.js"
+NEXT_PUBLIC_ACKEE_SITE_ID="your-id-string"
 
 # Use this only in development mode. It prevents "unable to verify the first
 # certificate" error when using a local domain with mkcert certificate for
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 06d65d6..5ac3d84 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -2,6 +2,7 @@
   "css.lint.validProperties": ["composes"],
   "scss.lint.validProperties": ["composes"],
   "cSpell.words": [
+    "Ackee",
     "aligncenter",
     "developpement",
     "hexcode",
diff --git a/next.config.js b/next.config.js
index dfbb523..4b8214d 100644
--- a/next.config.js
+++ b/next.config.js
@@ -2,29 +2,29 @@ const path = require('path');
 
 const backendDomain = process.env.APP_BACKEND_DOMAIN;
 const frontendDomain = process.env.APP_FRONTEND_DOMAIN;
-const matomoDomain = process.env.NEXT_PUBLIC_MATOMO_DOMAIN;
+const ackeeDomain = process.env.NEXT_PUBLIC_ACKEE_DOMAIN;
 
 const contentSecurityPolicy = `
   default-src 'self' ${backendDomain};
   child-src 'self' *.${frontendDomain.replace('www.', '')};
-  connect-src 'self' ${backendDomain} ${matomoDomain} api.github.com;
+  connect-src 'self' ${backendDomain} api.github.com;
   font-src 'self';
-  frame-src 'self' ${matomoDomain};
-  img-src 'self' ${backendDomain} ${matomoDomain} secure.gravatar.com data:;
+  frame-src 'self';
+  img-src 'self' ${backendDomain} secure.gravatar.com data:;
   media-src 'self' data:;
-  script-src 'self' ${matomoDomain} 'unsafe-inline';
+  script-src 'self' ${ackeeDomain} 'unsafe-inline';
   style-src 'self' 'unsafe-inline';
 `;
 
 const contentSecurityPolicyDev = `
   default-src 'self' ${backendDomain};
   child-src 'self' *.${frontendDomain.replace('www.', '')};
-  connect-src 'self' ${backendDomain} ${matomoDomain} api.github.com;
+  connect-src 'self' ${backendDomain} api.github.com;
   font-src 'self';
-  frame-src 'self' ${matomoDomain};
-  img-src 'self' ${backendDomain} ${matomoDomain} secure.gravatar.com data:;
+  frame-src 'self';
+  img-src 'self' ${backendDomain} secure.gravatar.com data:;
   media-src 'self' data:;
-  script-src 'self' ${matomoDomain} 'unsafe-inline' 'unsafe-eval';
+  script-src 'self' ${ackeeDomain} 'unsafe-inline' 'unsafe-eval';
   style-src 'self' 'unsafe-inline';
 `;
 
diff --git a/package.json b/package.json
index e5bda70..c3a3a66 100644
--- a/package.json
+++ b/package.json
@@ -37,7 +37,6 @@
     "@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/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}`,
diff --git a/yarn.lock b/yarn.lock
index 18fb231..82831cb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1652,11 +1652,6 @@
   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"