feat: Ajoute le tracker Snapchat (#3463)

* feat: Ajoute le tracker Snapchat * fix: Fix les tests
DNUM-SocialGouv · Nov 22, 2024 · ec7df05 · ec7df05
1 parent 0e1551f
commit ec7df05
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 6 deletions.
diff --git a/public/scripts/tarteaucitron/lang/tarteaucitron.fr.js b/public/scripts/tarteaucitron/lang/tarteaucitron.fr.js
diff --git a/src/client/dependencies.container.ts b/src/client/dependencies.container.ts
@@ -39,6 +39,7 @@ import { MarketingService } from '~/client/services/marketing/marketing.service'
 import MetaMarketingService from '~/client/services/marketing/meta/meta.marketing.service';
 import { NullMarketingService } from '~/client/services/marketing/null/null.marketing.service';
 import SeedtagMarketingService from '~/client/services/marketing/seedtag/seedtag.marketing.service';
+import SnapchatMarketingService from '~/client/services/marketing/snapchat/snapchat.marketing.service';
 import TiktokMarketingService from '~/client/services/marketing/TikTok/tiktok.marketing.service';
 import { BffAlternanceMetierService } from '~/client/services/metiers/bff.alternance.metier.service';
 import { MetierService } from '~/client/services/metiers/metier.service';
@@ -103,6 +104,7 @@ export type Dependencies = {
 	amnetService: MarketingService
 	metaService: MarketingService
 	floodlightService: MarketingService
+	snapchatService: MarketingService
 }
 
 class DependencyInitException extends Error {
@@ -134,6 +136,7 @@ export default function dependenciesContainer(sessionId?: string): Dependencies
 	const seedtagService = new SeedtagMarketingService(cookiesService, googleTagManagerService);
 	const floodlightService = new FloodlightMarketingService(cookiesService, googleTagManagerService);
 	const tiktokService = new TiktokMarketingService(cookiesService);
+	const snapchatService = new SnapchatMarketingService(cookiesService);
 	const azerionService = new AzerionMarketingService(cookiesService);
 	const amnetService = new AmnetMarketingService(cookiesService);
 	const metaService = new MetaMarketingService(cookiesService);
@@ -204,6 +207,7 @@ export default function dependenciesContainer(sessionId?: string): Dependencies
 		rechercheClientService,
 		seedtagService,
 		sessionStorageService,
+		snapchatService,
 		stage3eEt2deService,
 		stageDeposerOffreEtape1PersistenceService,
 		stageDeposerOffreEtape2PersistenceService,

diff --git a/src/client/services/marketing/snapchat/snapchat.marketing.service.ts b/src/client/services/marketing/snapchat/snapchat.marketing.service.ts
@@ -0,0 +1,71 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+import { CookiesService } from '~/client/services/cookies/cookies.service';
+import { TarteAuCitron } from '~/client/services/cookies/tarteaucitron/tarteAuCitron.cookies.service';
+
+import { MarketingService } from '../marketing.service';
+
+export default class SnapchatMarketingService implements MarketingService {
+	private static SERVICE_NAME = 'snapchat-custom';
+	private ready = false;
+
+	constructor(private readonly cookiesService: CookiesService) {
+		this.cookiesService.addUser('snapchatId', 'd48efe29-caa9-4f0c-86e8-353fc35a8b3f');
+		// eslint-disable-next-line @typescript-eslint/no-this-alias
+		const service = this;
+		// eslint-disable-next-line
+		type ConfigObject = any;
+		const config: TarteAuCitron.ServiceConfig<ConfigObject> = {
+			cookies: [],
+			js: function () {
+				'use strict';
+
+				// eslint-disable-next-line no-undef
+				if (tarteaucitron.user.snapchatId === undefined) {
+					return;
+				}
+
+				const a = window.snaptr = function () {
+					// eslint-disable-next-line prefer-rest-params, prefer-spread
+					a.handleRequest ? a.handleRequest.apply(a, arguments) : a.queue.push(arguments);
+				};
+				a.queue = [];
+				// eslint-disable-next-line no-undef
+				window.snaptr('init', tarteaucitron.user.snapchatId, {});
+
+				// eslint-disable-next-line no-undef
+				tarteaucitron.addScript('https://sc-static.net/scevent.min.js', undefined, () => {
+					service.ready = true;
+					document.dispatchEvent(new CustomEvent('snapchat_ready'));
+				});
+
+				// eslint-disable-next-line no-undef
+				if (typeof tarteaucitron.user.snapchatMore === 'function') {
+					// eslint-disable-next-line no-undef
+					tarteaucitron.user.snapchatMore();
+				}
+			},
+			key: SnapchatMarketingService.SERVICE_NAME,
+			name: 'Snapchat',
+			needConsent: true,
+			type: 'analytic',
+			uri: 'https://snap.com/fr-FR/privacy/privacy-policy',
+		};
+		this.cookiesService.addService(SnapchatMarketingService.SERVICE_NAME, config);
+	}
+
+	// eslint-disable-next-line
+	trackPage(pagename: string): void {
+		const cookiesService = this.cookiesService;
+		function sendAnalytics() {
+			if (!cookiesService.isServiceAllowed(SnapchatMarketingService.SERVICE_NAME)) { return; }
+
+			window.snaptr('track', 'PAGE_VIEW');
+		}
+		if (this.ready) {
+			sendAnalytics();
+		} else {
+			document.addEventListener('snapchat_ready', sendAnalytics);
+		}
+	}
+}
diff --git a/src/pages/choisir-apprentissage/index.page.test.tsx b/src/pages/choisir-apprentissage/index.page.test.tsx
@@ -103,6 +103,7 @@ describe('Page Apprentissage Jeunes', () => {
 					tiktokService={aMarketingService()}
 					analyticsService={aManualAnalyticsService()}
 					floodlightService={aMarketingService()}
+					snapchatService={aMarketingService()}
 					youtubeService={aVideoService()}>
 					<ApprentissageJeunes videos={videos} />
 				</DependenciesProvider>);
@@ -130,6 +131,7 @@ describe('Page Apprentissage Jeunes', () => {
 					metaService={aMarketingService()}
 					tiktokService={aMarketingService()}
 					floodlightService={aMarketingService()}
+					snapchatService={aMarketingService()}
 					analyticsService={analyticsService}
 					youtubeService={aVideoService()}>
 					<ApprentissageJeunes videos={videos} />
@@ -149,6 +151,7 @@ describe('Page Apprentissage Jeunes', () => {
 					amnetService={aMarketingService()}
 					metaService={aMarketingService()}
 					tiktokService={aMarketingService()}
+					snapchatService={aMarketingService()}
 					floodlightService={aMarketingService()}
 					analyticsService={analyticsService}>
 					<ApprentissageJeunes videos={[]} />
@@ -167,6 +170,7 @@ describe('Page Apprentissage Jeunes', () => {
 					marketingService={aMarketingService()}
 					amnetService={aMarketingService()}
 					metaService={aMarketingService()}
+					snapchatService={aMarketingService()}
 					tiktokService={aMarketingService()}
 					floodlightService={aMarketingService()}
 					analyticsService={analyticsService}>
@@ -188,6 +192,7 @@ describe('Page Apprentissage Jeunes', () => {
 					marketingService={aMarketingService()}
 					amnetService={aMarketingService()}
 					metaService={aMarketingService()}
+					snapchatService={aMarketingService()}
 					tiktokService={aMarketingService()}
 					floodlightService={aMarketingService()}
 					analyticsService={analyticsService}>

diff --git a/src/pages/choisir-apprentissage/index.page.tsx b/src/pages/choisir-apprentissage/index.page.tsx
@@ -29,16 +29,16 @@ export default function ApprentissageJeunes(props: ApprentissageJeunesPageProps)
 		return () => adformService.trackPage(undefined);
 		// eslint-disable-next-line
 	}, []);
-	const tiktokService: MarketingService = useDependency('tiktokService');
-	tiktokService.trackPage('');
+	const snapchatService: MarketingService = useDependency('snapchatService');
 	useEffect(() => {
-		return () => {
-			tiktokService.trackPage('off');
-		};
+		snapchatService.trackPage('');
 		// eslint-disable-next-line
 	}, []);
 	const amnetService: MarketingService = useDependency('amnetService');
-	amnetService.trackPage('');
+	useEffect(() => {
+		amnetService.trackPage('');
+		// eslint-disable-next-line
+	}, []);
 	useEffect(() => {
 		return () => {
 			amnetService.trackPage('off');