refactor(piano-analytics): extrait TrackingProvider dans un fichier éponyme

site/source/components/Provider.tsx

@@ -2,21 +2,19 @@ import { OverlayProvider } from '@react-aria/overlays'
 import { ErrorBoundary } from '@sentry/react'
 import i18next from 'i18next'
 import Engine from 'publicodes'
-import { createContext, ReactNode, useEffect, useState } from 'react'
+import { createContext, ReactNode } from 'react'
 import { HelmetProvider } from 'react-helmet-async'
 import { I18nextProvider } from 'react-i18next'
 import { Provider as ReduxProvider } from 'react-redux'
 import { BrowserRouter } from 'react-router-dom'
 
+import { TrackingProvider } from '@/components/TrackingProvider'
 import { ThemeColorsProvider } from '@/components/utils/colors'
 import { DisableAnimationOnPrintProvider } from '@/components/utils/DisableAnimationContext'
 import DesignSystemThemeProvider from '@/design-system/root'
 import { EmbededContextProvider } from '@/hooks/useIsEmbedded'
 
-import * as safeLocalStorage from '../storage/safeLocalStorage'
 import { makeStore } from '../store/store'
-import { TrackingContext } from './ATInternetTracking'
-import { ATTracker, createTracker } from './ATInternetTracking/Tracker'
 import { ErrorFallback } from './ErrorPage'
 import { IframeResizer } from './IframeResizer'
 import { ServiceWorker } from './ServiceWorker'
@@ -105,52 +103,3 @@ function BrowserRouterProvider({
 		</HelmetProvider>
 	)
 }
-
-function TrackingProvider({ children }: { children: React.ReactNode }) {
-	const [tracker, setTracker] = useState<ATTracker | null>(null)
-
-	useEffect(() => {
-		const script = document.createElement('script')
-		script.src = 'https://tag.aticdn.net/piano-analytics.js'
-		script.type = 'text/javascript'
-		script.crossOrigin = 'anonymous'
-		script.async = true
-
-		script.onload = () => {
-			const siteId = import.meta.env.VITE_AT_INTERNET_SITE_ID
-
-			const ATTrackerClass = createTracker(
-				siteId,
-				safeLocalStorage.getItem('tracking:do_not_track') === '1' ||
-					navigator.doNotTrack === '1'
-			)
-
-			const instance = new ATTrackerClass({
-				language: i18next.language as 'fr' | 'en',
-			})
-
-			setTracker(instance)
-		}
-
-		script.onerror = () => {
-			// eslint-disable-next-line no-console
-			console.error('Failed to load Piano Analytics script')
-		}
-
-		document.body.appendChild(script)
-
-		return () => {
-			document.body.removeChild(script)
-		}
-	}, [])
-
-	if (!tracker) {
-		return <>{children}</>
-	}
-
-	return (
-		<TrackingContext.Provider value={tracker}>
-			{children}
-		</TrackingContext.Provider>
-	)
-}

site/source/components/TrackingProvider.tsx

@@ -0,0 +1,86 @@
+import i18next from 'i18next'
+import { useEffect, useState } from 'react'
+
+import { TrackingContext } from '@/components/ATInternetTracking'
+import {
+	ATTracker,
+	createTracker,
+} from '@/components/ATInternetTracking/Tracker'
+import * as safeLocalStorage from '@/storage/safeLocalStorage'
+
+export function TrackingProvider({ children }: { children: React.ReactNode }) {
+	const [tracker, setTracker] = useState<ATTracker | null>(null)
+	const [injected, setInjected] = useState<boolean>(false)
+
+	useEffect(() => {
+		console.log('Initialisation du TrackingProvider')
+		console.log('Constitution du script')
+		const script = document.createElement('script')
+		script.src = 'https://tag.aticdn.net/piano-analytics.js'
+		script.type = 'text/javascript'
+		script.crossOrigin = 'anonymous'
+		script.async = true
+
+		script.onload = () => {
+			console.log('Script Piano chargé')
+			const siteId = import.meta.env.VITE_AT_INTERNET_SITE_ID
+
+			const ATTrackerClass = createTracker(
+				siteId,
+				safeLocalStorage.getItem('tracking:do_not_track') === '1' ||
+					navigator.doNotTrack === '1'
+			)
+
+			const instance = new ATTrackerClass({
+				language: i18next.language as 'fr' | 'en',
+			})
+
+			setTracker(instance)
+			console.log('Tracker configuré')
+		}
+
+		script.onerror = () => {
+			// eslint-disable-next-line no-console
+			console.error('Failed to load Piano Analytics script')
+		}
+
+		if ('serviceWorker' in navigator) {
+			console.log('En attente du service worker')
+			navigator.serviceWorker.ready
+				.then(() => {
+					console.log("Service worker is ready, let's add the script")
+					requestIdleCallback(() => {
+						document.body.appendChild(script)
+						setInjected(true)
+					})
+				})
+				.catch((error) => {
+					console.error(
+						'Impossible d’initialiser le suivi car le service worker n’a pas démarré',
+						error
+					)
+				})
+		} else {
+			console.log("No support for service worker, let's add the script")
+			document.body.appendChild(script)
+			setInjected(true)
+		}
+
+		return () => {
+			console.log('Démontage du composant')
+			if (injected) {
+				document.body.removeChild(script)
+			}
+		}
+	}, [])
+
+	if (!tracker) {
+		return <>{children}</>
+	}
+
+	return (
+		<TrackingContext.Provider value={tracker}>
+			{children}
+		</TrackingContext.Provider>
+	)
+}

site/source/pages/_landing/Landing.tsx

@@ -47,7 +47,7 @@ export default function Landing() {
 				>
 					<Intro $xxl>
 						<Trans i18nKey="landing.subtitle">
-							Des assistants et simulateurs pour obtenir des{' '}
+							Des assistants et simulateurs pour peut-être obtenir des{' '}
 							<Strong>réponses personnalisées</Strong> à vos questions sur la{' '}
 							<Strong>création et la gestion</Strong> de votre entreprise.
 						</Trans>