feat: manage engament time depending on simulator

Author: desoindx

app/(iframes)/iframes/livraison/etiquette-animee/page.tsx

@@ -5,7 +5,7 @@ import LivraisonEtiquette from 'components/outils/livraison/LivraisonEtiquette'
 const page = () => {
   return (
     <TranslationProvider>
-      <TrackingProvider tracking='Livraison etiquette'>
+      <TrackingProvider tracking='Livraison étiquette'>
         <LivraisonEtiquette id='animated' animated />
       </TrackingProvider>
     </TranslationProvider>

src/components/outils/TransportComparisonMode.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames'
 import { useTranslations } from 'next-intl'
 import useParamContext from 'src/providers/ParamProvider'
+import useTrackingContext from 'src/providers/TrackingProvider'
 import { track } from 'utils/matomo'
 import CheckRoundIcon from 'components/base/icons/check-round'
 import ComparisonIcon from 'components/base/icons/comparison'
@@ -11,6 +12,7 @@ const TransportComparisonMode = ({ tracking }: { tracking: string }) => {
   const {
     transport: { comparisonMode, setComparisonMode },
   } = useParamContext()
+  const { trackOnce } = useTrackingContext()
   const t = useTranslations('transport.mode-selector')
   return (
     <div className={classNames(styles.container, { [styles.withBorder]: comparisonMode === 'list' })}>
@@ -24,6 +26,7 @@ const TransportComparisonMode = ({ tracking }: { tracking: string }) => {
             onClick={() => {
               setComparisonMode('list')
               track(tracking, 'Display list', 'display_list')
+              trackOnce('List mode')
             }}
           />
           <span className={classNames(styles.leftLabel, { [styles.clickeable]: comparisonMode !== 'list' })}>
@@ -40,6 +43,7 @@ const TransportComparisonMode = ({ tracking }: { tracking: string }) => {
             onClick={() => {
               setComparisonMode('comparison')
               track(tracking, 'Display comparison', 'display_comparison')
+              trackOnce('Comparison mode')
             }}
           />
           <span className={classNames(styles.rightLabel, { [styles.clickeable]: comparisonMode !== 'comparison' })}>

src/providers/TrackingProvider.tsx

@@ -1,19 +1,53 @@
 'use client'
-
+import { ReadonlyURLSearchParams, usePathname, useSearchParams } from 'next/navigation'
 import React, { ReactNode, useCallback, useContext, useEffect, useRef, useState } from 'react'
 import { track } from 'utils/matomo'
 
 const TrackingContext = React.createContext<{
   trackOnce: (action: string) => void
 } | null>(null)
 
+const trackingTime: Record<string, number | ((pathname: string, params: ReadonlyURLSearchParams) => number)> = {
+  // Simulateur
+  Livraison: 30000,
+  'Fruits et légumes': 30000,
+  Alimentation: 30000,
+  Chauffage: 30000,
+  'Usage numérique': 30000,
+  Télétravail: 30000,
+  OsezChanger: 30000,
+  Quiz: 30000,
+  Comparateur: 30000,
+  // Graphique dynamique
+  Numérique: 30000,
+  Habillement: 30000,
+  Mobilier: 30000,
+  Boisson: 30000,
+  Électroménager: 30000,
+  Repas: 30000,
+  // Transport
+  Transport: (pathname: string, params: ReadonlyURLSearchParams) => {
+    if (pathname.includes('itineraire')) {
+      return 15000
+    }
+    const defaultMode = params.get('defaultMode')
+    if (defaultMode === 'comparison') {
+      return 15000
+    }
+
+    return 30000
+  },
+}
+
 export function TrackingProvider({ children, tracking }: { children: ReactNode; tracking: string }) {
   // inspired from https://usehooks-ts.com/react-hook/use-intersection-observer
   const ref = useRef<HTMLDivElement | null>(null)
   const [entry, setEntry] = useState<IntersectionObserverEntry>()
 
   const hasTracked = useRef(false)
   const timeoutRef = useRef<NodeJS.Timeout | null>(null)
+  const params = useSearchParams()
+  const pathname = usePathname()
 
   const trackOnce = useCallback(
     (action: string) => {
@@ -31,7 +65,7 @@ export function TrackingProvider({ children, tracking }: { children: ReactNode;
   )
 
   useEffect(() => {
-    const node = ref.current // DOM Ref
+    const node = ref.current
     const hasIOSupport = !!window.IntersectionObserver
     if (!hasIOSupport || !node) {
       return
@@ -45,18 +79,20 @@ export function TrackingProvider({ children, tracking }: { children: ReactNode;
   useEffect(() => {
     if (entry) {
       if (entry.isIntersecting) {
-        timeoutRef.current = setTimeout(
-          () => {
-            trackOnce('Temps')
-          },
-          tracking.toLowerCase().replace(/é/g, 'e').includes('etiquette') ? 15000 : 45000
-        )
+        // Par défaut 15s sur les étiquettes et les infographies
+        let timing = trackingTime[tracking] || 15000
+        if (typeof timing !== 'number') {
+          timing = timing(pathname, params)
+        }
+        timeoutRef.current = setTimeout(() => {
+          trackOnce('Temps')
+        }, timing)
       } else if (timeoutRef.current) {
         clearTimeout(timeoutRef.current)
         timeoutRef.current = null
       }
     }
-  }, [tracking, entry])
+  }, [tracking, entry, params, pathname])
 
   return (
     <TrackingContext.Provider