feat(dsfr): ajout de matomo pour tracker les events (#6157)

* fix: matomo * fix: matomo --------- Co-authored-by: Martial Maillot <[email protected]>
SocialGouv · Sep 26, 2024 · 3d0967c · 3d0967c
1 parent b250d45
commit 3d0967c
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 13 deletions.
diff --git a/packages/code-du-travail-frontend/app/layout.tsx b/packages/code-du-travail-frontend/app/layout.tsx
@@ -8,6 +8,7 @@ import { StartDsfr } from "../src/modules/config/StartDsfr";
 import { Metadata } from "next/types";
 import { SITE_URL } from "../src/config";
 import { headers } from "next/headers";
+import { MatomoAnalytics } from "../src/modules/config/MatomoAnalytics";
 
 export const metadata: Metadata = {
   title: {
@@ -53,6 +54,7 @@ export default function RootLayout({
       </head>
       <body>
         <DsfrProvider lang={lang}>{children}</DsfrProvider>
+        <MatomoAnalytics />
       </body>
     </html>
   );

diff --git a/packages/code-du-travail-frontend/pages/_app.tsx b/packages/code-du-travail-frontend/pages/_app.tsx
@@ -11,7 +11,12 @@ import React, { useEffect } from "react";
 import { A11y } from "../src/a11y";
 import { getSourceUrlFromPath } from "../src/lib";
 import { useRouter } from "next/router";
-import { PIWIK_SITE_ID, PIWIK_URL, SITE_URL } from "../src/config";
+import {
+  PIWIK_SITE_ID,
+  PIWIK_URL,
+  SITE_URL,
+  WIDGETS_PATH,
+} from "../src/config";
 
 if (typeof window !== "undefined") {
   import("../src/web-components/tooltip")
@@ -36,8 +41,6 @@ if (typeof window !== "undefined") {
     });
 }
 
-const WIDGETS_PATH = /\/widgets\/.*/;
-
 function MyApp({ Component, pageProps }: AppProps) {
   const router = useRouter();
   useEffect(() => {

diff --git a/packages/code-du-travail-frontend/src/config.ts b/packages/code-du-travail-frontend/src/config.ts
@@ -26,3 +26,4 @@ export const DEBOUNCE_TIME_MS = 300;
 export const API_GEO_MAX_SEARCH_RESULTS = 10;
 export const SUGGEST_DEBOUNCE_DELAY = 200;
 export const SUGGEST_MAX_RESULTS = 5;
+export const WIDGETS_PATH = /\/widgets\/.*/;
diff --git a/packages/code-du-travail-frontend/src/modules/config/MatomoAnalytics.tsx b/packages/code-du-travail-frontend/src/modules/config/MatomoAnalytics.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import { init, push } from "@socialgouv/matomo-next";
+import { usePathname } from "next/navigation";
+import { useEffect } from "react";
+import { PIWIK_SITE_ID, PIWIK_URL, SITE_URL, WIDGETS_PATH } from "../../config";
+import { getSourceUrlFromPath } from "../../lib";
+
+export function MatomoAnalytics() {
+  const pathname = usePathname();
+
+  useEffect(() => {
+    init({
+      siteId: PIWIK_SITE_ID,
+      url: PIWIK_URL,
+      onInitialization: () => {
+        const referrerUrl =
+          document?.referrer || getSourceUrlFromPath(SITE_URL + pathname);
+        if (referrerUrl) {
+          push(["setReferrerUrl", referrerUrl]);
+        }
+        if (pathname && pathname.match(WIDGETS_PATH)) {
+          push(["setCookieSameSite", "None"]);
+        }
+      },
+      excludeUrlsPatterns: [WIDGETS_PATH],
+    });
+  }, []);
+
+  return null;
+}
diff --git a/packages/code-du-travail-frontend/src/modules/layout/infos/PopupContent.tsx b/packages/code-du-travail-frontend/src/modules/layout/infos/PopupContent.tsx
@@ -2,11 +2,10 @@
 
 import { Input } from "@codegouvfr/react-dsfr/Input";
 import Image from "next/image";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { useNeedMoreInfoEvents } from "./tracking";
 import servicesDeRenseignement from "../../../data/services-de-renseignement.json";
 import { Button } from "@codegouvfr/react-dsfr/Button";
-import { usePathname } from "next/navigation";
 import { fr } from "@codegouvfr/react-dsfr";
 import { css } from "../../../../styled-system/css";
 
@@ -16,13 +15,12 @@ type ServiceRenseignement = {
 };
 
 export function PopupContent() {
-  const currentPathName = usePathname();
   const [department, setDepartment] = useState<string>("");
   const [hasSearched, setHasSearched] = useState<boolean>(false);
   const [result, setResult] = useState<undefined | ServiceRenseignement>(
     undefined
   );
-  const { emitModalIsOpened, emitTrackNumber } = useNeedMoreInfoEvents();
+  const { emitTrackNumber } = useNeedMoreInfoEvents();
 
   const onSearchInput = () => {
     const departmentNum = (department.replace(/^0+/, "") || "").toLowerCase();
@@ -35,10 +33,6 @@ export function PopupContent() {
     emitTrackNumber();
   };
 
-  useEffect(() => {
-    if (currentPathName) emitModalIsOpened(currentPathName);
-  }, [currentPathName, emitModalIsOpened]);
-
   return (
     <>
       <h2 className={fr.cx("fr-h5")}>Contact téléphonique</h2>

diff --git a/packages/code-du-travail-frontend/src/modules/layout/infos/index.tsx b/packages/code-du-travail-frontend/src/modules/layout/infos/index.tsx
@@ -1,15 +1,27 @@
+"use client";
+
 import { fr } from "@codegouvfr/react-dsfr";
 import { Button } from "@codegouvfr/react-dsfr/Button";
 import { css } from "../../../../styled-system/css";
 import { createModal } from "@codegouvfr/react-dsfr/Modal";
 import { PopupContent } from "./PopupContent";
+import { useIsModalOpen } from "@codegouvfr/react-dsfr/Modal/useIsModalOpen";
+import { useNeedMoreInfoEvents } from "./tracking";
+import { useEffect } from "react";
 
 export const needMoreInfoModal = createModal({
   id: "more-info-modal",
   isOpenedByDefault: false,
 });
 
 export const NeedMoreInfo = () => {
+  const isOpen = useIsModalOpen(needMoreInfoModal);
+  const { emitModalIsOpened } = useNeedMoreInfoEvents();
+
+  useEffect(() => {
+    if (isOpen) emitModalIsOpened();
+  }, [isOpen, emitModalIsOpened]);
+
   return (
     <div className={mainContainer} id="more-info">
       <div className={fr.cx("fr-container")}>

diff --git a/packages/code-du-travail-frontend/src/modules/layout/infos/tracking.ts b/packages/code-du-travail-frontend/src/modules/layout/infos/tracking.ts
@@ -1,5 +1,6 @@
 import { push as matopush } from "@socialgouv/matomo-next";
 import { MatomoBaseEvent } from "../../../lib";
+import { usePathname } from "next/navigation";
 
 export enum MatomoNeedMoreInfoEventSecondary {
   CONTACT = "contact",
@@ -11,6 +12,8 @@ export enum MatomoNeedMoreInfoEventTertiary {
 }
 
 export const useNeedMoreInfoEvents = () => {
+  const currentPathName = usePathname();
+
   const emitTrackNumber = () => {
     matopush([
       MatomoBaseEvent.TRACK_EVENT,
@@ -19,12 +22,12 @@ export const useNeedMoreInfoEvents = () => {
     ]);
   };
 
-  const emitModalIsOpened = (baseUrl: string) => {
+  const emitModalIsOpened = () => {
     matopush([
       MatomoBaseEvent.TRACK_EVENT,
       MatomoNeedMoreInfoEventSecondary.CONTACT,
       MatomoNeedMoreInfoEventTertiary.CLICK_CONTACT_MODAL,
-      baseUrl,
+      currentPathName,
     ]);
   };