73 feature add matomo analytics 2

.env.sample

@@ -2,4 +2,8 @@ BUILD_ENV=
 COMMUNITY_API_KEY=
 THEGRAPH_API_KEY=
 REALTOKENAPI='https://api.realtoken.community/v1/token'
-REALTOKENAPI_HISTORY='https://history.api.realtoken.community/'
+REALTOKENAPI_HISTORY='https://history.api.realtoken.community/'
+# Matomo analytics
+MATOMO_URL='https://data.realtoken.community/'
+# 1: prod
+MATOMO_SITE_ID=1

.github/workflows/branch.yml

@@ -80,5 +80,7 @@ jobs:
           COMMUNITY_API_KEY=${{ secrets.COMMUNITY_API_KEY }} \
           REALTOKENAPI=https://api.realtoken.community/v1/token \
           REALTOKENAPI_HISTORY=https://history.api.realtoken.community/ \
+          MATOMO_URL=https://data.realtoken.community/ \
+          MATOMO_SITE_ID=1 \
           HOSTNAME=${{ github.ref_name == 'master' && 'dashboard.realtoken.community' || 'dashboard.${DOCKER_BRANCH}.realtoken.community' }} \
           docker compose --project-name ${{ github.ref_name }}-dashboard --file docker-compose-branch.yml up -d'

README.md

@@ -22,12 +22,22 @@ THEGRAPH_API_KEY=XXXXXXXXXXXX
 
 REALTOKENAPI='https://api.realtoken.community/v1/token'
 REALTOKENAPI_HISTORY='https://history.api.realtoken.community/'
+
+```
+
+OPTIONAL:
+
+```
+MATOMO_URL=''
+MATOMO_SITE_ID=''
 ```
 
 To get a `COMMUNITY_API_KEY`, join the dedicated [telegram dev channel](https://t.me/+XQyoaFfmN61yk7X0) then ask for.
 
 To get a THEGRAPH_API_KEY, you need to create an account on thegraph.com [Thegraph docs](https://thegraph.com/docs/en/querying/managing-api-keys/)
 
+To get a MATOMO_URL and MATOMO_SITE_ID, you need to create an account on matomo.org [Matomo docs](https://fr.matomo.org/)
+
 ### Node.js version
 
 <strong>📣 Node.js needed version is `v18.12.1`</strong>

docker-compose-branch.yml

@@ -7,6 +7,8 @@ services:
       - COMMUNITY_API_KEY=$COMMUNITY_API_KEY
       - REALTOKENAPI=$REALTOKENAPI
       - REALTOKENAPI_HISTORY=$REALTOKENAPI_HISTORY
+      - MATOMO_URL=$MATOMO_URL
+      - MATOMO_SITE_ID=$MATOMO_SITE_ID
     networks:
       - traefik-realt
     labels:

package.json

@@ -26,6 +26,7 @@
     "@mantine/notifications": "^7.5.3",
     "@realtoken/realt-commons": "1.4.6",
     "@reduxjs/toolkit": "^2.2.1",
+    "@socialgouv/matomo-next": "^1.9.2",
     "@tabler/icons": "^1.74.0",
     "@web3-react/core": "^8.0.35-beta.0",
     "cookies-next": "^2.0.5",

src/pages/_app.tsx

@@ -1,3 +1,4 @@
+import { useEffect } from 'react'
 import { QueryClient, QueryClientProvider } from 'react-query'
 import { Provider } from 'react-redux'
 
@@ -25,6 +26,7 @@ import {
   metaMaskHooks,
   parseAllowedChain,
 } from '@realtoken/realt-commons'
+import { init as initMatomoNext } from '@socialgouv/matomo-next'
 
 import { getCookie } from 'cookies-next'
 import { Provider as JotaiProvider } from 'jotai'
@@ -37,13 +39,22 @@ import { MantineProviders } from 'src/providers'
 import InitStoreProvider from 'src/providers/InitStoreProvider'
 import store from 'src/store/store'
 
+// Matomo property added to window object
+declare global {
+  interface Window {
+    _paq?: unknown[]
+  }
+}
+
 const i18n = initLanguage(resources)
 
 type AppProps = NextAppProps & {
   colorScheme: MantineColorScheme
   locale: string
   env: {
     THEGRAPH_API_KEY: string
+    MATOMO_URL: string
+    MATOMO_SITE_ID: string
   }
 }
 
@@ -74,6 +85,8 @@ const libraryConnectors = getConnectors({
 export const getServerSideProps = async () => ({
   props: {
     THEGRAPH_API_KEY: process.env.THEGRAPH_API_KEY,
+    MATOMO_URL: process.env.MATOMO_URL,
+    MATOMO_SITE_ID: process.env.MATOMO_SITE_ID,
   },
 })
 
@@ -91,6 +104,20 @@ const App = ({ Component, pageProps, colorScheme, env }: AppProps) => {
   }
   Router.events.on('routeChangeComplete', scrollToTop)
 
+  // Event tracking
+  useEffect(() => {
+    // eslint-disable-next-line no-underscore-dangle
+    if (!window._paq) {
+      // Note: Triggered twice on page load when using strict mode in DEV
+      initMatomoNext({
+        url: process.env.MATOMO_URL ?? '',
+        siteId: process.env.MATOMO_SITE_ID ?? '',
+        disableCookies: false,
+        // excludeUrlsPatterns: [/^\/login.php/, /\?token=.+/],
+      })
+    }
+  }, [])
+
   return (
     <QueryClientProvider client={queryClient}>
       <JotaiProvider>
@@ -122,6 +149,8 @@ App.getInitialProps = ({ ctx }: { ctx: GetServerSidePropsContext }) => {
   return {
     env: {
       THEGRAPH_API_KEY: process.env.THEGRAPH_API_KEY,
+      MATOMO_URL: process.env.MATOMO_URL,
+      MATOMO_SITE_ID: process.env.MATOMO_SITE_ID,
     },
     colorScheme: getCookie('mantine-color-scheme', ctx) || 'dark',
     locale: getCookie('react-i18next', ctx) || 'fr',