Merge branch 'dev' into remove-axios

Author: nhsz

.env.example

@@ -16,6 +16,10 @@
 # GOOGLE_API_KEY=
 # GOOGLE_CALENDAR_ID=
 
+# Matomo environment (URL and site ID required for analytics)
+NEXT_PUBLIC_MATOMO_URL=
+NEXT_PUBLIC_MATOMO_SITE_ID=
+
 # Used to avoid loading Matomo in our preview deploys
 IS_PREVIEW_DEPLOY=false
 

package.json

@@ -21,6 +21,7 @@
     "@docsearch/react": "^3.5.2",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@socialgouv/matomo-next": "^1.8.0",
     "clipboard": "^2.0.11",
     "embla-carousel-react": "^7.0.0",
     "ethereum-blockies-base64": "^1.0.2",

src/lib/utils/matomo.ts

@@ -1,3 +1,5 @@
+import { push } from "@socialgouv/matomo-next"
+
 export const MATOMO_LS_KEY = "ethereum-org.matomo-opt-out"
 
 export interface MatomoEventOptions {
@@ -13,15 +15,12 @@ export const trackCustomEvent = ({
   eventName,
   eventValue,
 }: MatomoEventOptions): void => {
-  if (process.env.NODE_ENV !== "production" && !window.dev) return
+  if (process.env.NODE_ENV !== "production") return
   const optedOutValue = localStorage.getItem(MATOMO_LS_KEY) || "false"
   const isOptedOut = JSON.parse(optedOutValue)
-  if (!window._paq || isOptedOut) return
-
-  const { _paq, dev } = window
+  if (isOptedOut) return
 
-  _paq.push([`trackEvent`, eventCategory, eventAction, eventName, eventValue])
-  if (!dev) return
+  push([`trackEvent`, eventCategory, eventAction, eventName, eventValue])
 
   console.debug(
     `[Matomo] event tracked, category: ${eventCategory}, action: ${eventAction}, name: ${eventName}, value: ${eventValue}`

src/pages/_app.tsx

@@ -1,8 +1,10 @@
+import { useEffect } from "react"
 import { appWithTranslation } from "next-i18next"
 // ChakraProvider import updated as recommended on https://github.com/chakra-ui/chakra-ui/issues/4975#issuecomment-1174234230
 // to reduce bundle size. Should be reverted to "@chakra-ui/react" in case on theme issues
 import { ChakraProvider } from "@chakra-ui/provider"
 import { extendBaseTheme } from "@chakra-ui/react"
+import { init } from "@socialgouv/matomo-next"
 
 import customTheme from "@/@chakra-ui/theme"
 
@@ -13,6 +15,15 @@ import { RootLayout } from "@/layouts"
 import { inter, mono } from "@/lib/fonts"
 
 const App = ({ Component, pageProps }: AppPropsWithLayout) => {
+  useEffect(() => {
+    if (!process.env.IS_PREVIEW_DEPLOY) {
+      init({
+        url: process.env.NEXT_PUBLIC_MATOMO_URL!,
+        siteId: process.env.NEXT_PUBLIC_MATOMO_SITE_ID!,
+      })
+    }
+  }, [])
+
   // Per-Page Layouts: https://nextjs.org/docs/pages/building-your-application/routing/pages-and-layouts#with-typescript
   // Use the layout defined at the page level, if available
   const getLayout = Component.getLayout ?? ((page) => page)

yarn.lock

@@ -3365,6 +3365,11 @@
   resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.27.8.tgz#6667fac16c436b5434a387a34dedb013198f6e6e"
   integrity sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==
 
+"@socialgouv/matomo-next@^1.8.0":
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/@socialgouv/matomo-next/-/matomo-next-1.8.0.tgz#1dee455a440b84bc135381a85fef33d000698222"
+  integrity sha512-00EdsbW0u/VrKFa7DfVjnXV4oXA6Ag3kkCisSL2nFseRQhEsds5T8xsAgvNQAtiMW9AR6Mz3TNZt7A2/mIb9kA==
+
 "@storybook/addon-actions@7.5.3":
   version "7.5.3"
   resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-7.5.3.tgz#e0d0d819488d1d19918b23469b3ea6610fee5f07"