add matomo support with app router

pettinarip · pettinarip · commit eea55b6c6daf · 2025-03-20T18:52:35.000+01:00
diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
@@ -1,10 +1,13 @@
+import { Suspense } from "react"
 import pick from "lodash.pick"
 import { IBM_Plex_Mono, Inter } from "next/font/google"
 import { notFound } from "next/navigation"
 import { getMessages, setRequestLocale } from "next-intl/server"
 
 import { Lang } from "@/lib/types"
 
+import Matomo from "@/components/Matomo"
+
 import { getLastDeployDate } from "@/lib/utils/getLastDeployDate"
 import { getLocaleTimestamp } from "@/lib/utils/time"
 
@@ -60,6 +63,10 @@ export default async function LocaleLayout({
     >
       <body>
         <Providers locale={locale} messages={messages}>
+          <Suspense>
+            <Matomo />
+          </Suspense>
+
           <BaseLayout lastDeployLocaleTimestamp={lastDeployLocaleTimestamp}>
             {children}
           </BaseLayout>
diff --git a/src/components/Matomo.tsx b/src/components/Matomo.tsx
@@ -0,0 +1,56 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { usePathname } from "next/navigation"
+import { init, push } from "@socialgouv/matomo-next"
+
+export default function Matomo() {
+  const pathname = usePathname()
+
+  const [inited, setInited] = useState(false)
+  const [previousPath, setPreviousPath] = useState("")
+
+  useEffect(() => {
+    if (!process.env.IS_PREVIEW_DEPLOY && !inited) {
+      init({
+        url: process.env.NEXT_PUBLIC_MATOMO_URL!,
+        siteId: process.env.NEXT_PUBLIC_MATOMO_SITE_ID!,
+      })
+
+      setInited(true)
+    }
+  }, [inited])
+
+  /**
+   * The @socialgouv/matomo-next does not work with next 13
+   * Code from https://github.com/SocialGouv/matomo-next/issues/99
+   */
+  useEffect(() => {
+    if (!pathname) {
+      return
+    }
+
+    if (!previousPath) {
+      return setPreviousPath(pathname)
+    }
+
+    push(["setReferrerUrl", `${previousPath}`])
+    push(["setCustomUrl", pathname])
+    push(["deleteCustomVariables", "page"])
+    setPreviousPath(pathname)
+    // In order to ensure that the page title had been updated,
+    // we delayed pushing the tracking to the next tick.
+    setTimeout(() => {
+      push(["setDocumentTitle", document.title])
+      push(["trackPageView"])
+    })
+    /**
+     * This is because we don't want to track previousPath
+     * could be a if (previousPath === pathname) return; instead
+     * But be sure to not send the tracking twice
+     */
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pathname])
+
+  return <></>
+}
