Skip to content

Commit deeb89d

Browse files
mluenamluena
committed
tracking analytics
1 parent db616d9 commit deeb89d

6 files changed

Lines changed: 62 additions & 0 deletions

File tree

‎client/.env.example‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,10 @@ NEXT_PUBLIC_MAPBOX_API_TOKEN=
1717
NEXT_PUBLIC_MAPBOX_USERNAME=
1818
NEXT_PUBLIC_MAPBOX_STYLE_ID=
1919

20+
# Matomo Analytics tracking URL and ID
21+
NEXT_PUBLIC_MATOMO_URL=
22+
NEXT_PUBLIC_MATOMO_SITE_ID=
23+
2024
# Google Analytics tracking ID.
2125
# Development, Preview, Production
2226
# If you're working with an Google Analytics 4 property, you have a Measurement ID instead of a Tracking ID.

‎client/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@
4141
"@radix-ui/react-toast": "^1.1.4",
4242
"@radix-ui/react-tooltip": "^1.0.6",
4343
"@recoiljs/refine": "^0.1.1",
44+
"@socialgouv/matomo-next": "^1.10.0",
4445
"@svgr/webpack": "^8.1.0",
4546
"@t3-oss/env-nextjs": "0.4.1",
4647
"@tanstack/react-query": "^4.29.18",

‎client/src/app/layout.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,21 @@
11
import '@/styles/globals.css';
22
import '@/styles/mapbox.css';
33

4+
import { Suspense } from 'react';
5+
46
import Providers from '@/app/layout-providers';
57

8+
import { MatomoAnalytics } from '@/containers/matomo-analytics';
9+
610
export default function RootLayout({ children }: { children: React.ReactNode }) {
711
return (
812
<Providers>
913
<html lang="en">
1014
<body className="font-notes min-h-screen overflow-x-hidden">
1115
<main>{children}</main>
16+
<Suspense fallback={null}>
17+
<MatomoAnalytics />
18+
</Suspense>
1219
</body>
1320
</html>
1421
</Providers>

‎client/src/containers/matomo-analytics/index.tsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
'use client';
2+
3+
import { useEffect } from 'react';
4+
5+
import { usePathname, useSearchParams } from 'next/navigation';
6+
7+
import { trackAppRouter } from '@socialgouv/matomo-next';
8+
// https://github.com/SocialGouv/matomo-next
9+
10+
const MATOMO_URL = process.env.NEXT_PUBLIC_MATOMO_URL;
11+
const MATOMO_SITE_ID = process.env.NEXT_PUBLIC_MATOMO_SITE_ID;
12+
13+
export function MatomoAnalytics() {
14+
const pathname = usePathname();
15+
const searchParams = useSearchParams();
16+
17+
useEffect(() => {
18+
if (!MATOMO_URL || !MATOMO_SITE_ID) {
19+
return;
20+
}
21+
22+
const urlSearchParams = searchParams
23+
? new URLSearchParams(Array.from(searchParams.entries()))
24+
: new URLSearchParams();
25+
26+
trackAppRouter({
27+
url: MATOMO_URL,
28+
siteId: MATOMO_SITE_ID,
29+
pathname,
30+
searchParams: urlSearchParams,
31+
enableHeatmapSessionRecording: true,
32+
enableHeartBeatTimer: true,
33+
});
34+
}, [pathname, searchParams]);
35+
return null;
36+
}

‎client/src/env.mjs‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,8 @@ export const env = createEnv({
3333
NEXT_PUBLIC_PREVIEW_SECRET: z.string().optional(),
3434
NEXT_PUBLIC_MAPBOX_USERNAME: z.string().optional(),
3535
NEXT_PUBLIC_MAPBOX_STYLE_ID: z.string().optional(),
36+
NEXT_PUBLIC_MATOMO_URL: z.string().url(),
37+
NEXT_PUBLIC_MATOMO_SITE_ID: z.string().optional(),
3638
},
3739
/*
3840
* Due to how Next.js bundles environment variables on Edge and Client,
@@ -45,6 +47,8 @@ export const env = createEnv({
4547
NEXT_PUBLIC_URL: process.env.NEXT_PUBLIC_URL,
4648
NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL,
4749
NEXT_PUBLIC_MAPBOX_API_TOKEN: process.env.NEXT_PUBLIC_MAPBOX_API_TOKEN,
50+
NEXT_PUBLIC_MATOMO_URL: process.env.NEXT_PUBLIC_MATOMO_URL,
51+
NEXT_PUBLIC_MATOMO_SITE_ID: process.env.NEXT_PUBLIC_MATOMO_SITE_ID,
4852
NEXT_PUBLIC_GA_TRACKING_ID: process.env.NEXT_PUBLIC_GA_TRACKING_ID,
4953
RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED:
5054
process.env.RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED,

‎yarn.lock‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2664,6 +2664,7 @@ __metadata:
26642664
"@radix-ui/react-toast": ^1.1.4
26652665
"@radix-ui/react-tooltip": ^1.0.6
26662666
"@recoiljs/refine": ^0.1.1
2667+
"@socialgouv/matomo-next": ^1.10.0
26672668
"@svgr/webpack": ^8.1.0
26682669
"@t3-oss/env-nextjs": 0.4.1
26692670
"@tailwindcss/typography": 0.5.9
@@ -6841,6 +6842,15 @@ __metadata:
68416842
languageName: node
68426843
linkType: hard
68436844

6845+
"@socialgouv/matomo-next@npm:^1.10.0":
6846+
version: 1.10.0
6847+
resolution: "@socialgouv/matomo-next@npm:1.10.0"
6848+
peerDependencies:
6849+
next: ">= 9.5.5"
6850+
checksum: bf3c5c3008677d42d775a6be996c485af65981c53dadd372a60111eaa7faad9b31d5ca71d0b419d7283d304b531c49ac12ca38ad97b28e6b037707bd6098896a
6851+
languageName: node
6852+
linkType: hard
6853+
68446854
"@stoplight/better-ajv-errors@npm:1.0.3":
68456855
version: 1.0.3
68466856
resolution: "@stoplight/better-ajv-errors@npm:1.0.3"

0 commit comments

Comments
 (0)