fix: fix gtm

teritorio · Oct 3, 2023 · c7465cd · c7465cd
1 parent edb611f
commit c7465cd
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 42 deletions.
diff --git a/lib/tracker-google.ts b/lib/tracker-google.ts
@@ -1,44 +1,41 @@
 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'
 
 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
@@ -1,17 +1,13 @@
+import { App } from 'nuxt/dist/app/compat/vue-demi'
 import urlSlug from 'url-slug'
 // @ts-ignore
 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
@@ -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
@@ -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)
         })
       },
     },