diff --git a/src/client/services/marketing/floodlight/floodlight.marketing.service.ts b/src/client/services/marketing/floodlight/floodlight.marketing.service.ts index 67d4c7c950..209483bd03 100644 --- a/src/client/services/marketing/floodlight/floodlight.marketing.service.ts +++ b/src/client/services/marketing/floodlight/floodlight.marketing.service.ts @@ -6,15 +6,24 @@ import { MarketingService } from '../marketing.service'; export default class FloodlightMarketingService implements MarketingService { static readonly SERVICE_NAME = 'floodlight'; + private ready = false; constructor(private readonly cookiesService: CookiesService, private readonly gtagService: GoogleTagManagerService) { + // eslint-disable-next-line @typescript-eslint/no-this-alias + const service = this; // eslint-disable-next-line type ConfigObject = any; const config: TarteAuCitron.ServiceConfig = { cookies: this.gtagService.cookies(), js: function () { 'use strict'; - gtagService.mount(); + gtagService.mount().then(() => { + // eslint-disable-next-line + // @ts-ignore + window.gtag('config', GoogleTagManagerService.ADS_ID); + service.ready = true; + document.dispatchEvent(new CustomEvent('floodlight_ready')); + }); }, key: FloodlightMarketingService.SERVICE_NAME, name: 'Floodlight', @@ -27,7 +36,10 @@ export default class FloodlightMarketingService implements MarketingService { // eslint-disable-next-line trackPage(pagename: string): void { + const cookiesService = this.cookiesService; function sendAnalytics() { + if (!cookiesService.isServiceAllowed(FloodlightMarketingService.SERVICE_NAME)) { return; } + // eslint-disable-next-line // @ts-ignore window.gtag('event', 'conversion', { @@ -35,8 +47,11 @@ export default class FloodlightMarketingService implements MarketingService { send_to: 'DC-3048978/appre0/24appren+unique', u1: '[URL]', }); - } - document.addEventListener('gtag_ready', sendAnalytics); + if (this.ready) { + sendAnalytics(); + } else { + document.addEventListener('floodlight_ready', sendAnalytics, { once: true }); + } } } diff --git a/src/client/services/marketing/googleTagManager.service.ts b/src/client/services/marketing/googleTagManager.service.ts index 5c7fc81fe4..263408fd01 100644 --- a/src/client/services/marketing/googleTagManager.service.ts +++ b/src/client/services/marketing/googleTagManager.service.ts @@ -3,11 +3,17 @@ export default class GoogleTagManagerService { static readonly ADS_ID = 'DC-10089018'; - private mounted = false; + private status: 'unmounted' | 'mounting' | 'mounted' = 'unmounted'; + private pending = []; - mount() { - if (this.mounted) { return; } + async mount() { + if (this.status === 'mounted') { return; } + // eslint-disable-next-line @typescript-eslint/no-this-alias + const service = this; + const result = new Promise((resolve) => {this.pending.push(resolve);}); + if (this.status === 'mounting') { return result; } + this.status = 'mounting'; window.dataLayer = window.dataLayer || []; window.tarteaucitron.addScript('https://www.googletagmanager.com/gtag/js?id=' + GoogleTagManagerService.ADS_ID, '', function () { window.gtag = function gtag() { @@ -15,19 +21,14 @@ export default class GoogleTagManagerService { window.dataLayer.push(arguments); }; window.gtag('js', new Date()); - const additional_config_info = (window.timeExpire !== undefined) ? { - anonymize_ip: true, - cookie_expires: window.timeExpire / 1000, - } : { anonymize_ip: true }; - - window.gtag('config', GoogleTagManagerService.ADS_ID, additional_config_info); if (typeof window.tarteaucitron.user.googleadsMore === 'function') { window.tarteaucitron.user.googleadsMore(); } - document.dispatchEvent(new CustomEvent('gtag_ready')); + service.pending.forEach((resolve) => resolve()); + service.status = 'mounted'; }); - this.mounted = true; + return result; } cookies() { diff --git a/src/client/services/marketing/seedtag/seedtag.marketing.service.ts b/src/client/services/marketing/seedtag/seedtag.marketing.service.ts index 23f9a3d712..b3a5941463 100644 --- a/src/client/services/marketing/seedtag/seedtag.marketing.service.ts +++ b/src/client/services/marketing/seedtag/seedtag.marketing.service.ts @@ -6,15 +6,25 @@ import { MarketingService } from '../marketing.service'; export default class SeedtagMarketingService implements MarketingService { static readonly SEEDTAG_SERVICE_NAME = 'seedtag'; + private ready = false; constructor(private readonly cookiesService: CookiesService, private readonly gtagService: GoogleTagManagerService) { + // eslint-disable-next-line @typescript-eslint/no-this-alias + const service = this; // eslint-disable-next-line type ConfigObject = any; const config: TarteAuCitron.ServiceConfig = { cookies: this.gtagService.cookies(), js: function () { 'use strict'; - gtagService.mount(); + const promise = gtagService.mount(); + promise.then(() => { + // eslint-disable-next-line + // @ts-ignore + window.gtag('config', GoogleTagManagerService.ADS_ID); + service.ready = true; + document.dispatchEvent(new CustomEvent('seedtag_ready')); + }); }, key: SeedtagMarketingService.SEEDTAG_SERVICE_NAME, name: 'Seedtag', @@ -27,7 +37,9 @@ export default class SeedtagMarketingService implements MarketingService { // eslint-disable-next-line trackPage(pagename: string): void { + const cookiesService = this.cookiesService; function sendAnalytics() { + if (!cookiesService.isServiceAllowed(SeedtagMarketingService.SEEDTAG_SERVICE_NAME)) { return; } // eslint-disable-next-line // @ts-ignore window.gtag('event', 'conversion', { @@ -35,8 +47,13 @@ export default class SeedtagMarketingService implements MarketingService { send_to: `${GoogleTagManagerService.ADS_ID}/invmedia/fr_ga005+standard`, u2: '[URL_Info]', }); + } + if (!this.cookiesService.isServiceAllowed(SeedtagMarketingService.SEEDTAG_SERVICE_NAME)) { return; } + if (this.ready) { + sendAnalytics(); + } else { + document.addEventListener('seedtag_ready', sendAnalytics, { once: true }); } - document.addEventListener('gtag_ready', sendAnalytics); } } diff --git a/src/pages/apprentissage-entreprises/index.page.tsx b/src/pages/apprentissage-entreprises/index.page.tsx index 63c9d5d81b..8e40320335 100644 --- a/src/pages/apprentissage-entreprises/index.page.tsx +++ b/src/pages/apprentissage-entreprises/index.page.tsx @@ -32,7 +32,8 @@ export default function ApprentissageEntreprises ({ videos }: ApprentissageEntre useEffect(() => { seedtagService.trackPage(''); floodlightService.trackPage(''); - }, [floodlightService, seedtagService]); + // eslint-disable-next-line + }, []); const azerionService: MarketingService = useDependency('azerionService'); azerionService.trackPage(''); diff --git a/src/pages/choisir-apprentissage/index.page.tsx b/src/pages/choisir-apprentissage/index.page.tsx index b9d11ec9cb..6a3affa08c 100644 --- a/src/pages/choisir-apprentissage/index.page.tsx +++ b/src/pages/choisir-apprentissage/index.page.tsx @@ -56,7 +56,8 @@ export default function ApprentissageJeunes(props: ApprentissageJeunesPageProps) const floodlightService = useDependency('floodlightService'); useEffect(() => { floodlightService.trackPage(''); - }); + // eslint-disable-next-line + }, []); return ( <>