From 8f8a3957b5d3b33bafaa0a6afe4187f75d6dd2b7 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Mon, 31 Jan 2022 21:33:22 +0100
Subject: chore: add Matomo

---
 .env.example                |  3 +++
 .vscode/settings.json       |  1 +
 package.json                |  1 +
 src/pages/_app.tsx          | 28 ++++++++++++++++------------
 src/utils/helpers/matomo.ts |  7 +++++++
 yarn.lock                   | 12 ++++++++++++
 6 files changed, 40 insertions(+), 12 deletions(-)
 create mode 100644 src/utils/helpers/matomo.ts

diff --git a/.env.example b/.env.example
index fddbd69..8572b45 100644
--- a/.env.example
+++ b/.env.example
@@ -10,6 +10,9 @@ FEED_DESCRIPTION="What you want..."
 NEXT_PUBLIC_FRONTEND_URL="$FRONTEND_URL"
 NEXT_PUBLIC_GRAPHQL_API="$BACKEND_URL$GRAPHQL_ENDPOINT"
 
+NEXT_PUBLIC_MATOMO_SITE_ID=0
+NEXT_PUBLIC_MATOMO_URL="https://matomoUrl.com"
+
 # Use this only in development mode. It prevents "unable to verify the first
 # certificate" error when using a local domain with mkcert certificate for
 # backend.
diff --git a/.vscode/settings.json b/.vscode/settings.json
index d90e0b9..06d65d6 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -7,6 +7,7 @@
     "hexcode",
     "hreflang",
     "legales",
+    "Matomo",
     "Noindex",
     "opengraph",
     "parens",
diff --git a/package.json b/package.json
index 73d96f1..55fb34a 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "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/mdx": "^12.0.7",
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 7c6142c..913861e 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,5 +1,7 @@
+import { MatomoProvider } from '@datapunt/matomo-tracker-react';
 import { AppPropsWithLayout } from '@ts/types/app';
 import { settings } from '@utils/config';
+import { instance } from '@utils/helpers/matomo';
 import { ThemeProvider } from 'next-themes';
 import { useRouter } from 'next/router';
 import { IntlProvider } from 'react-intl';
@@ -11,19 +13,21 @@ const MyApp = ({ Component, pageProps }: AppPropsWithLayout) => {
 
   const getLayout = Component.getLayout ?? ((page) => page);
   return (
-    <IntlProvider
-      locale={appLocale}
-      defaultLocale={defaultLocale}
-      messages={pageProps.translation}
-    >
-      <ThemeProvider
-        defaultTheme="system"
-        enableColorScheme={true}
-        enableSystem={true}
+    <MatomoProvider value={instance}>
+      <IntlProvider
+        locale={appLocale}
+        defaultLocale={defaultLocale}
+        messages={pageProps.translation}
       >
-        {getLayout(<Component {...pageProps} />)}
-      </ThemeProvider>
-    </IntlProvider>
+        <ThemeProvider
+          defaultTheme="system"
+          enableColorScheme={true}
+          enableSystem={true}
+        >
+          {getLayout(<Component {...pageProps} />)}
+        </ThemeProvider>
+      </IntlProvider>
+    </MatomoProvider>
   );
 };
 
diff --git a/src/utils/helpers/matomo.ts b/src/utils/helpers/matomo.ts
new file mode 100644
index 0000000..6930196
--- /dev/null
+++ b/src/utils/helpers/matomo.ts
@@ -0,0 +1,7 @@
+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 aaf10bf..4e9d892 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1162,6 +1162,18 @@
   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"
-- 
cgit v1.2.3