From c7465cdd9fcf11d07972fc484148ce372bdeb9b4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Rodrigo?= Date: Mon, 2 Oct 2023 17:17:45 +0200 Subject: [PATCH] fix: fix gtm --- lib/tracker-google.ts | 55 ++++++++++++++++++++++--------------------- lib/tracker-matomo.ts | 14 ++++------- lib/trackers.ts | 6 +++-- plugins/tracking.ts | 8 +++---- 4 files changed, 41 insertions(+), 42 deletions(-) diff --git a/lib/tracker-google.ts b/lib/tracker-google.ts index 69b047470..6f5757d09 100644 --- a/lib/tracker-google.ts +++ b/lib/tracker-google.ts @@ -1,4 +1,5 @@ import { createGtm } from '@gtm-support/vue-gtm' +import { App } from 'nuxt/dist/app/compat/vue-demi' import urlSlug from 'url-slug' import { Event, Tracker } from '~/lib/trackers' @@ -6,39 +7,35 @@ import { Event, Tracker } from '~/lib/trackers' export default class Google implements Tracker { waitForConsent: boolean gtm: any - googleTagManagerId: string - constructor( - nuxtApp: any, - waitForConsent: boolean, - googleTagManagerId: string - ) { + constructor(app: App, waitForConsent: boolean, googleTagManagerId: string) { const gtm = createGtm({ id: googleTagManagerId, defer: true, compatibility: false, - enabled: false, + enabled: !waitForConsent, }) - nuxtApp.vueApp.use(gtm) + app.use(gtm) this.waitForConsent = waitForConsent - this.gtm = gtm - this.googleTagManagerId = googleTagManagerId - if (!waitForConsent) { - this.gtm.init(googleTagManagerId) - } } - consent() { + consent(app: App) { if (this.waitForConsent) { - this.gtm.init(this.googleTagManagerId) + const gtm = app.config.globalProperties.$gtm + gtm.enable(true) } } - track(event: Event) { + track(app: App, event: Event) { + const gtm = app.config.globalProperties.$gtm + if (!gtm.enabled()) { + return + } + switch (event.type) { case 'page': { - this.gtm.push({ + window.dataLayer?.push({ event: 'pageview', pageType: 'PageView', pageTitle: event.title, @@ -49,7 +46,7 @@ export default class Google implements Tracker { break } case 'menu': { - this.gtm.push({ + window.dataLayer?.push({ event: 'pageview', pageType: 'PageView', pageTitle: event.title, @@ -58,7 +55,7 @@ export default class Google implements Tracker { break } case 'category_event': { - this.gtm.push({ + window.dataLayer?.push({ event: event.type, action: event.event, categoryId: event.categoryId, @@ -68,7 +65,7 @@ export default class Google implements Tracker { } case 'notebook_event': case 'search': { - this.gtm.push({ + window.dataLayer?.push({ event: 'pageview', pageType: 'PageView', pageTitle: event.type, @@ -78,7 +75,7 @@ export default class Google implements Tracker { } // case 'search_query': {} case 'search_result_event': { - this.gtm.push({ + window.dataLayer?.push({ event: event.type, action: event.event, type: event.resultType, @@ -87,7 +84,7 @@ export default class Google implements Tracker { break } case 'popup': { - this.gtm.push({ + window.dataLayer?.push({ event: 'pageview', pageType: 'PageView', pageTitle: event.title, @@ -99,7 +96,7 @@ export default class Google implements Tracker { break } case 'popup_event': { - this.gtm.push({ + window.dataLayer?.push({ event: event.type, action: event.event, poiId: event.poiId, @@ -109,19 +106,23 @@ export default class Google implements Tracker { break } case 'map_control_event': { - this.gtm.push({ event: event.type, action: event.event }) + window.dataLayer?.push({ event: event.type, action: event.event }) break } case 'favorites_event': { - this.gtm.push({ event: event.type, action: event.event }) + window.dataLayer?.push({ event: event.type, action: event.event }) break } case 'external_link': { - this.gtm.push({ event: event.type, url: event.url, title: event.title }) + window.dataLayer?.push({ + event: event.type, + url: event.url, + title: event.title, + }) break } case 'details_event': { - this.gtm.push({ + window.dataLayer?.push({ event: event.type, action: event.event, poiId: event.poiId, diff --git a/lib/tracker-matomo.ts b/lib/tracker-matomo.ts index cf7ec6de3..f794d35b5 100644 --- a/lib/tracker-matomo.ts +++ b/lib/tracker-matomo.ts @@ -1,3 +1,4 @@ +import { App } from 'nuxt/dist/app/compat/vue-demi' import urlSlug from 'url-slug' // @ts-ignore import VueMatomo from 'vue-matomo' @@ -5,13 +6,8 @@ import VueMatomo from 'vue-matomo' import { Event, Tracker } from '~/lib/trackers' export default class Matomo implements Tracker { - constructor( - nuxtApp: any, - waitForConsent: boolean, - url: string, - siteId: string - ) { - nuxtApp.vueApp.use(VueMatomo, { + constructor(app: App, waitForConsent: boolean, url: string, siteId: string) { + app.use(VueMatomo, { host: url, siteId, requireConsent: waitForConsent, @@ -20,7 +16,7 @@ export default class Matomo implements Tracker { }) } - consent() { + consent(_app: App) { let delai = 1000 const timeout = () => { setTimeout(function () { @@ -44,7 +40,7 @@ export default class Matomo implements Tracker { set() } - track(event: Event) { + track(_app: App, event: Event) { // @ts-ignore const _paq = window._paq switch (event.type) { diff --git a/lib/trackers.ts b/lib/trackers.ts index 8116bdb7f..ba8559333 100644 --- a/lib/trackers.ts +++ b/lib/trackers.ts @@ -1,3 +1,5 @@ +import { App } from 'nuxt/dist/app/compat/vue-demi' + import { ApiPoiId } from './apiPois' import { ApiMenuCategory, MenuItem } from '~/lib/apiMenu' @@ -77,6 +79,6 @@ export type Event = } export interface Tracker { - consent(): void - track(event: Event): void + consent(app: App): void + track(app: App, event: Event): void } diff --git a/plugins/tracking.ts b/plugins/tracking.ts index a806d768e..b5aa692b8 100644 --- a/plugins/tracking.ts +++ b/plugins/tracking.ts @@ -15,7 +15,7 @@ export default defineNuxtPlugin((nuxtApp) => { if (googleTagManagerId) { trackers.push( new Google( - nuxtApp, + nuxtApp.vueApp, Boolean(config.COOKIES_CONSENT), googleTagManagerId ) @@ -27,7 +27,7 @@ export default defineNuxtPlugin((nuxtApp) => { if (matomoUrl && matomoIdsite) { trackers.push( new Matomo( - nuxtApp, + nuxtApp.vueApp, Boolean(config.COOKIES_CONSENT), matomoUrl, matomoIdsite @@ -40,7 +40,7 @@ export default defineNuxtPlugin((nuxtApp) => { tracking_consent: (): void => { if (trackers.length > 0) { trackers.forEach((tracker) => { - tracker.consent() + tracker.consent(nuxtApp.vueApp) }) } }, @@ -51,7 +51,7 @@ export default defineNuxtPlugin((nuxtApp) => { } trackers.forEach((tracker) => { - tracker.track(event) + tracker.track(nuxtApp.vueApp, event) }) }, },