feat(recherche): mise en place A/B Testing sur les labels pour les contributions.

Author: m-maillot

packages/code-du-travail-frontend/package.json

@@ -41,7 +41,7 @@
     "@socialgouv/cdtn-elasticsearch": "^2.72.1",
     "@socialgouv/cdtn-types": "^2.71.0",
     "@socialgouv/cdtn-utils": "link:../code-du-travail-utils",
-    "@socialgouv/matomo-next": "^1.11.0",
+    "@socialgouv/matomo-next": "^1.13.1",
     "@socialgouv/modeles-social": "link:../code-du-travail-modeles",
     "date-fns": "^4.1.0",
     "debounce-promise": "^3.1.2",

packages/code-du-travail-frontend/src/config.ts

@@ -14,8 +14,6 @@ export const PACKAGE_VERSION = version;
 export const PIWIK_SITE_ID = process.env.NEXT_PUBLIC_PIWIK_SITE_ID ?? "3";
 export const PIWIK_URL =
   process.env.NEXT_PUBLIC_PIWIK_URL ?? "https://matomo.fabrique.social.gouv.fr";
-export const AB_TESTING_ENABLED =
-  process.env.NEXT_PUBLIC_ENABLE_AB_TESTING === "true";
 export const IS_PREPROD =
   process.env.NEXT_PUBLIC_IS_PREPRODUCTION_DEPLOYMENT ?? false;
 export const IS_PROD =

packages/code-du-travail-frontend/src/modules/config/MatomoAnalytics.tsx

@@ -2,16 +2,9 @@
 
 import { usePathname, useSearchParams } from "next/navigation";
 import { Suspense, useEffect } from "react";
-import {
-  AB_TESTING_ENABLED,
-  PIWIK_SITE_ID,
-  PIWIK_URL,
-  WIDGETS_PATH,
-  SITE_URL,
-} from "../../config";
+import { PIWIK_SITE_ID, PIWIK_URL, WIDGETS_PATH } from "../../config";
 import { getStoredConsent } from "../utils/consent";
 import { push, trackAppRouter } from "@socialgouv/matomo-next";
-import { initABTesting } from "./initABTesting";
 import { AB_TESTS } from "./abTests";
 
 type MatomoComponentProps = {
@@ -39,6 +32,7 @@ function MatomoComponent({ heatmapEnabled }: MatomoComponentProps) {
       },
 
       searchKeyword: "query",
+      abTests: AB_TESTS,
 
       onInitialization: () => {
         const referrerUrl = document?.referrer || searchParams.get("src_url");
@@ -50,13 +44,6 @@ function MatomoComponent({ heatmapEnabled }: MatomoComponentProps) {
         if (pathname && pathname.match(WIDGETS_PATH)) {
           push(["setCookieSameSite", "None"]);
         }
-
-        initABTesting({
-          enabled: AB_TESTING_ENABLED,
-          pathname: pathname ?? "",
-          excludeUrlsPatterns: [WIDGETS_PATH],
-          tests: AB_TESTS,
-        });
       },
     });
   };

packages/code-du-travail-frontend/src/modules/config/abTests.ts

@@ -1,8 +1,38 @@
-import type { ABTestDefinition } from "./initABTesting";
+import type { ABTestDefinition } from "@socialgouv/matomo-next";
+
+export enum LabelSearchCardVariations {
+  ORIGINAL = "original",
+  FICHE_PRATIQUE = "fiche-pratique",
+  SELON_MA_CC = "selon-ma-cc",
+  REPONSE_PERSONNALISEE = "reponse-personnalisee",
+  SELON_ENTREPRISE = "selon-entreprise",
+}
 
 /**
  * Central place to register Matomo A/B tests.
  *
  * Keep this empty by default; add tests here when needed.
  */
-export const AB_TESTS: ABTestDefinition[] = [];
+export const AB_TESTS: ABTestDefinition[] = [
+  {
+    name: "LabelCardSearch",
+    percentage: 100,
+    variations: [
+      {
+        name: LabelSearchCardVariations.ORIGINAL,
+      },
+      {
+        name: LabelSearchCardVariations.FICHE_PRATIQUE,
+      },
+      {
+        name: LabelSearchCardVariations.SELON_MA_CC,
+      },
+      {
+        name: LabelSearchCardVariations.REPONSE_PERSONNALISEE,
+      },
+      {
+        name: LabelSearchCardVariations.SELON_ENTREPRISE,
+      },
+    ],
+  },
+];

packages/code-du-travail-frontend/src/modules/config/initABTesting.ts

@@ -6,6 +6,7 @@ import { css } from "@styled-system/css";
 import DisplayContent from "../common/DisplayContent";
 import { badgeColorClasses, getSourceLabel } from "./utils";
 import { routeBySource } from "@socialgouv/cdtn-utils";
+import { useABTestVariant } from "@socialgouv/matomo-next";
 
 type SearchCardProps = {
   id?: string;
@@ -24,14 +25,16 @@ export const SearchCard: React.FC<SearchCardProps> = ({
   link,
   onClick,
 }) => {
+  const variant = useABTestVariant("LabelCardSearch");
+
   return (
     <Card
       start={
         source ? (
           <p
             className={`${fr.cx("fr-tag", "fr-tag--sm", "fr-text--xs", "fr-text--bold")} ${badgeColorClasses[source]}`}
           >
-            {getSourceLabel(source)}
+            {getSourceLabel(source, variant)}
           </p>
         ) : null
       }

packages/code-du-travail-frontend/src/modules/recherche/Card.tsx

@@ -29,6 +29,9 @@ jest.mock("../tracking", () => ({
 // Mock matomo (used by Feedback component)
 jest.mock("@socialgouv/matomo-next", () => ({
   sendEvent: jest.fn(),
+  useABTestVariant: jest.fn(() => ({
+    variant: "original",
+  })),
 }));
 
 describe("SearchPageClient", () => {

packages/code-du-travail-frontend/src/modules/recherche/__tests__/SearchPageClient.test.tsx

@@ -1,12 +1,15 @@
+"use client";
+
 import { fr } from "@codegouvfr/react-dsfr";
 import { css } from "@styled-system/css";
 import Link from "src/modules/common/Link";
 import {
+  badgeColorClasses,
   generateSearchLink,
   getSourceLabel,
-  badgeColorClasses,
 } from "../utils";
 import { SearchResult } from "src/api";
+import { useABTestVariant } from "@socialgouv/matomo-next";
 
 type Props = {
   result: SearchResult;
@@ -22,6 +25,7 @@ export const SearchResultCard = ({ result, onClick }: Props) => {
     result.parentSlug
   );
   const hasHash = href.includes("#");
+  const variant = useABTestVariant("LabelCardSearch");
 
   return (
     <Link
@@ -36,7 +40,7 @@ export const SearchResultCard = ({ result, onClick }: Props) => {
       <div className={cardContainer}>
         <div className={`${fr.cx("fr-mb-1w")} ${badgeContainer}`}>
           <span className={`${badgeBase} ${badgeColorClasses[result.source]}`}>
-            {getSourceLabel(result.source)}
+            {getSourceLabel(result.source, variant)}
           </span>
         </div>
         <span

packages/code-du-travail-frontend/src/modules/recherche/modal/SearchResultCard.tsx

@@ -6,8 +6,7 @@ import {
 } from "@socialgouv/cdtn-utils";
 import { SearchResult } from "../../api";
 import { css } from "@styled-system/css";
-import { JSX } from "react";
-import { fr } from "@codegouvfr/react-dsfr";
+import { LabelSearchCardVariations } from "../config/abTests";
 
 export const generateSearchLink = (
   source: keyof typeof routeBySource,
@@ -24,7 +23,10 @@ export const generateSearchLink = (
   return `/${getRouteBySource(source)}/${slug}`;
 };
 
-export const getSourceLabel = (source: keyof typeof routeBySource): string => {
+export const getSourceLabel = (
+  source: keyof typeof routeBySource,
+  variant: string | null
+): string => {
   const ficheGeneriqueSourceTypes = [
     "fiches_ministere_travail",
     "fiches_service_public",
@@ -37,6 +39,16 @@ export const getSourceLabel = (source: keyof typeof routeBySource): string => {
   }
 
   if (source === "contributions") {
+    switch (variant) {
+      case LabelSearchCardVariations.FICHE_PRATIQUE:
+        return "FICHE PRATIQUE";
+      case LabelSearchCardVariations.SELON_ENTREPRISE:
+        return "SELON LE SECTEUR DE L'ENTREPRISE";
+      case LabelSearchCardVariations.REPONSE_PERSONNALISEE:
+        return "RÉPONSE PERSONNALISÉE";
+      case LabelSearchCardVariations.SELON_MA_CC:
+        return "SELON MA CONVENTION COLLECTIVE";
+    }
     return "RÉPONSE SUR-MESURE";
   }