chore: remplace SmartTags PA par Piano Analytics

.prettierignore

@@ -3,5 +3,6 @@ dist
 storybook-static
 site/source/locales/*.yaml
 site/source/components/ATInternetTracking/smarttag.js
+site/source/components/ATInternetTracking/piano-analytics.js
 *.yaml.d.ts
 .yarnrc.yml

site/scripts/i18n/parser.config.js

@@ -79,6 +79,7 @@ export default {
 	input: [
 		'../../source/**/*.{jsx,tsx,js,ts}',
 		'!../../source/components/ATInternetTracking/smarttag.js',
+		'!../../source/components/ATInternetTracking/piano-analytics.js',
 	],
 	// An array of globs that describe where to look for source files
 	// relative to the location of the configuration file

site/source/components/ATInternetTracking/.eslintrc.yaml

@@ -1,2 +1,3 @@
 ignorePatterns:
   - smarttag.js
+  - piano-analytics.js

site/source/components/ATInternetTracking/Tracker.ts

@@ -1,8 +1,8 @@
 /* eslint-disable no-console */
-import './smarttag.js'
+import './piano-analytics.js'
 
 // Ci-dessous les indicateurs personnalisés de site et de page
-// https://developers.atinternet-solutions.com/javascript-fr/contenus-javascript-fr/indicateurs-de-site-et-de-page-javascript-fr/
+// https://developers.atinternet-solutions.com/as2-tagging-fr/javascript-fr/contenus-javascript-fr/indicateurs-de-site-et-de-page-javascript-fr/index.html
 export const INDICATOR = {
 	SITE: {
 		LANGAGE: 1,
@@ -23,34 +23,34 @@ type ClickHit = {
 	click_chapter1?: string
 	click_chapter2?: string
 	click_chapter3?: string
+	evenement_type?: 'telechargement'
 }
 
 export interface ATTracker {
-	setProp(prop: 'env_language', value: 'fr' | 'en', persistant: true): void
-	setProp(prop: 'n:simulateur_embarque', value: 1 | 0, persistant: true): void
-	setProp(
-		prop: 'evenement_type',
-		value: 'telechargement',
-		persistant: false
+	setProperties(
+		propertiesObject: {
+			env_language: 'fr' | 'en'
+			'n:simulateur_embarque': 1 | 0
+		},
+		options: {
+			persistent: true
+		}
 	): void
 
-	events: {
-		send(type: 'page.display', data: PageHit): void
-		send(
-			type:
-				| 'demarche.document'
-				| 'click.action'
-				| 'click.navigation'
-				| 'click.download'
-				| 'click.exit',
-			data: ClickHit & PageHit
-		): void
-	}
+	sendEvent(type: 'page.display', data: PageHit): void
+	sendEvent(
+		type:
+			| 'demarche.document'
+			| 'click.action'
+			| 'click.navigation'
+			| 'click.download'
+			| 'click.exit',
+		data: ClickHit & PageHit
+	): void
 
-	privacy: {
-		setVisitorMode(authority: 'cnil', type: 'exempt'): void
-		setVisitorOptout(): void
-		getVisitorMode(): { name: 'exempt' | 'optout' }
+	consent: {
+		setMode(type: 'exempt' | 'optout'): void
+		getMode(): { name: 'exempt' | 'optout' }
 	}
 }
 
@@ -71,35 +71,42 @@ export function createTracker(siteId?: string, doNotTrack = false) {
 		siteId && !import.meta.env.SSR ? ATInternet?.Tracker.Tag : Log
 
 	class Tag extends BaseTracker implements ATTracker {
-		#send: ATTracker['events']['send']
+		#sendEvent: ATTracker['sendEvent']
 
 		constructor(options: { language: 'fr' | 'en' }) {
 			super({ site })
-			this.#send = this.events.send.bind(this)
-			this.events.send = (type, data) => {
+			this.#sendEvent = this.sendEvent.bind(this)
+			this.sendEvent = (type, data) => {
 				if (type === 'page.display') {
 					this.#currentPageInfo = data
-					this.#send(type, data)
+					this.#sendEvent(type, data)
 
 					return
 				}
 				if (!('click' in data)) {
 					throw new Error('invalid argument error')
 				}
-				this.#send(type, { ...this.#currentPageInfo, ...data })
+				this.#sendEvent(type, { ...this.#currentPageInfo, ...data })
 			}
 
-			this.setProp('env_language', options.language, true)
-			this.setProp(
-				'n:simulateur_embarque',
-				document.location.pathname.includes('/iframes/') ? 1 : 0,
-				true
+			this.setProperties(
+				{
+					env_language: options.language,
+					'n:simulateur_embarque': document.location.pathname.includes(
+						'/iframes/'
+					)
+						? 1
+						: 0,
+				},
+				{
+					persistent: true,
+				}
 			)
 
 			if (import.meta.env.MODE === 'production' && doNotTrack) {
-				this.privacy.setVisitorOptout()
+				this.consent.setMode('optout')
 			} else {
-				this.privacy.setVisitorMode('cnil', 'exempt')
+				this.consent.setMode('exempt')
 			}
 		}
 
@@ -114,31 +121,33 @@ export class Log implements ATTracker {
 		console.debug('ATTracker::new', options)
 	}
 
-	setProp(name: string, value: unknown, persistent: boolean): void {
-		console.debug('ATTracker::setProp', { name, value, persistent })
+	setProperties(
+		propertiesObject: {
+			env_language: string
+			'n:simulateur_embarque': number
+		},
+		options: {
+			persistent: true
+		}
+	) {
+		console.debug('ATTracker::setProperties', {
+			...propertiesObject,
+			persistent: options.persistent,
+		})
 	}
 
-	events = {
-		send(name: string, data: Record<string, unknown>): void {
-			console.debug('ATTracker::events.send', name, data)
-		},
+	sendEvent(name: string, data: Record<string, unknown>): void {
+		console.debug('ATTracker::sendEvent', name, data)
 	}
 
-	privacy: ATTracker['privacy'] = {
-		setVisitorMode(...args) {
-			console.debug('ATTracker::privacy.setVisitorMode', ...args)
-		},
-		setVisitorOptout() {
-			console.debug('ATTracker::setVisitorOptout')
+	consent: ATTracker['consent'] = {
+		setMode(...args) {
+			console.debug('ATTracker::consent.setMode', ...args)
 		},
-		getVisitorMode() {
-			console.debug('ATTracker::privacy.getVisitorMode')
+		getMode() {
+			console.debug('ATTracker::consent.getMode')
 
 			return { name: 'exempt' }
 		},
 	}
-
-	dispatch(): void {
-		console.debug('ATTracker::dispatch')
-	}
 }

site/source/components/ATInternetTracking/index.tsx

@@ -80,7 +80,7 @@ export function TrackPage({
 	const { chapter1, chapter2, chapter3 } = useChapters(chapters)
 	const tag = useContext(TrackingContext)
 	useEffect(() => {
-		tag.events.send(
+		tag.sendEvent(
 			'page.display',
 			Object.fromEntries(
 				Object.entries({

site/source/components/Feedback/Feedback.tsx

@@ -66,7 +66,7 @@ export function Feedback({
 	const submitFeedback = useCallback(
 		(rating: FeedbackT) => {
 			setFeedbackGivenForUrl(url)
-			tag.events.send('click.action', {
+			tag.sendEvent('click.action', {
 				click_chapter1: 'satisfaction',
 				click: rating,
 			})

site/source/components/ShareSimulationBanner/ShareSimulationPopup.tsx

@@ -52,7 +52,7 @@ export function ShareSimulationPopup({ url }: { url: string }) {
 						<Button
 							size="XS"
 							onPress={() => {
-								tracker.events.send('click.action', {
+								tracker.sendEvent('click.action', {
 									click_chapter1: 'feature:partage',
 									click: 'lien copié',
 								})

site/source/components/ShareSimulationBanner/index.tsx

@@ -102,7 +102,7 @@ export default function ShareOrSaveSimulationBanner({
 									light
 									size="XS"
 									onPress={(e) => {
-										tracker.events.send('click.action', {
+										tracker.sendEvent('click.action', {
 											click_chapter1: 'feature:partage',
 											click: 'démarré',
 										})

site/source/components/layout/Footer/PrivacyPolicy.tsx

@@ -42,10 +42,10 @@ export default function PrivacyPolicy({
 	const handleChange = useCallback(
 		(checked: boolean) => {
 			if (checked) {
-				tracker.privacy.setVisitorOptout()
+				tracker.consent.setMode('optout')
 				safeLocalStorage.setItem('tracking:do_not_track', '1')
 			} else {
-				tracker.privacy.setVisitorMode('cnil', 'exempt')
+				tracker.consent.setMode('exempt')
 				safeLocalStorage.setItem('tracking:do_not_track', '0')
 			}
 			setValueChanged(true)
@@ -273,9 +273,10 @@ export default function PrivacyPolicy({
 			<Body>
 				<Trans i18nKey="privacyPolicy.tracking.content">
 					mon-entreprise.urssaf.fr ne dépose pas de cookies ou de traceurs.
-					Cependant, la plateforme utilise Matomo, une solution de mesure
-					d'audience, configurée en mode « exempté » et ne nécessitant pas le
-					recueil du consentement des personnes concernées conformément aux{' '}
+					Cependant, la plateforme utilise Piano Analytics, une solution de
+					mesure d'audience, configurée en mode « exempté » et ne nécessitant
+					pas le recueil du consentement des personnes concernées conformément
+					aux{' '}
 					<StyledLink
 						href="https://www.cnil.fr/fr/solutions-pour-les-cookies-de-mesure-daudience"
 						aria-label={t(
@@ -301,7 +302,7 @@ export default function PrivacyPolicy({
 				<Checkbox
 					name="opt-out mesure audience"
 					onChange={handleChange}
-					defaultSelected={tracker.privacy.getVisitorMode().name === 'optout'}
+					defaultSelected={tracker.consent.getMode().name === 'optout'}
 				>
 					{t(
 						'privacyPolicy.tracking.optOut.checkboxLabel',

site/source/locales/ui-en.yaml

@@ -1656,10 +1656,10 @@ privacyPolicy:
   tracking:
     ariaLabel: CNIL recommendations, see more information on the CNIL website, new window
     content: mon-entreprise.urssaf.fr does not use cookies or other tracking
-      devices. However, the platform uses Matomo, an audience measurement
-      solution, configured in “exempted” mode and not requiring the consent of
-      the persons concerned in accordance with the <2>recommendations of the
-      CNIL</2>.
+      devices. However, the platform uses Piano Analytics, an audience
+      measurement solution configured in "exempted" mode, which does not require
+      the consent of the persons concerned, in accordance with the
+      <2>recommendations of the CNIL</2>.
     optOut:
       checkboxLabel: I do not want to send anonymous data about my use of the platform
         for audience measurement purposes.

site/source/locales/ui-fr.yaml

@@ -1763,7 +1763,7 @@ privacyPolicy:
     ariaLabel: recommandations de la CNIL, voir plus d'informations à ce sujet sur
       le site de la CNIL, nouvelle fenêtre
     content: mon-entreprise.urssaf.fr ne dépose pas de cookies ou de traceurs.
-      Cependant, la plateforme utilise Matomo, une solution de mesure
+      Cependant, la plateforme utilise Piano Analytics, une solution de mesure
       d'audience, configurée en mode « exempté » et ne nécessitant pas le
       recueil du consentement des personnes concernées conformément aux
       <2>recommandations de la CNIL</2>.

site/source/pages/assistants/demande-mobilité/EndBlock.tsx

@@ -214,13 +214,9 @@ export default function EndBlock({ fields, missingValues }: EndBlockProps) {
 											href={url}
 											size="XL"
 											onPress={() => {
-												tracker.setProp(
-													'evenement_type',
-													'telechargement',
-													false
-												)
-												tracker.events.send('demarche.document', {
+												tracker.sendEvent('demarche.document', {
 													click: 'demande_formulaire_a1',
+													evenement_type: 'telechargement',
 												})
 											}}
 											download="demande-mobilité-internationale.pdf"