gtm-support / vue-gtm

Simple implementation of Google Tag Manager for Vue
https://www.npmjs.com/package/@gtm-support/vue-gtm
MIT License
210 stars 27 forks source link

Using in Nuxt 3 project. `page_view` works, but `trackEvent` doesn't #324

Closed YosefMets closed 1 year ago

YosefMets commented 1 year ago

I'm using @gtm-support/vue-gtm in Nuxt 3 App

Info

Tool Version
Plugin v2.0.0
Vue v3.2.45

vue-gtm.client.js:

import { createGtm } from '@gtm-support/vue-gtm'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(createGtm({
    id: 'XXX-XXXXXXX',
    defer: false,
    compatibility: false,
    enabled: true,
    debug: true,
    loadScript: true,
    vueRouter: useRouter(),
    trackOnNextTick: false
  }))
})

Then page_view works. Then I try use trackEvent in the setup:

composables/useGTM.js:

import { useGtm as useVueGtm } from '@gtm-support/vue-gtm'

export default () => {
  const gtm = useVueGtm()
  return gtm;
}

myComponent.vue:

const $gtm = useGTM();
$gtm.trackEvent({
  event: 'add_to_cart',
  category: 'ecommerce',
  action: 'click',
  label: 'Adding item to cart',
  value: 5000,
  noninteraction: false,
})

When I'm adding item to cart nothing's happened in the Googlу Analytics. There is also no new request in the "Network". But in the console I see

[GTM-Support]: Dispatching event {event: 'add_to_cart', category: 'ecommerce', action: 'click', label: 'Adding item to cart', value: 5000}

What am I doing wrong?

Shinigami92 commented 1 year ago

Please make sure that you are in browser context and you have correctly enabled it

https://github.com/gtm-support/core/blob/9391b2d691dcff0dd75446c4ddbce3b916e60652/src/gtm-support.ts#L222-L238

You can test/debug/log $gtm.enabled() and $gtm.isInBrowserContext() and see if both returns true

The debugging is performed (by design) even if the trigger gets not executed

YosefMets commented 1 year ago

@Shinigami92, console.log:

$gtm.enabled(): true
$gtm.isInBrowserContext(): true
[GTM-Support]: Dispatching event {event: 'add_to_cart', category: 'ecommerce', action: 'click', label: 'Adding item to cart', value: 5000}

Looks like everything is ok but still not working

Shinigami92 commented 1 year ago

Okay, sadly in that case I don't know what's going on Feel free to also log what's happening with window.dataLayer, but I'm done with my knowledge

YosefMets commented 1 year ago

The datalayer gets new records every time the event is called, as expected

Shinigami92 commented 1 year ago

Then the issue is not anymore on the plugin's side, but on something with GTM itself Check your GTM-ID or anything like that, look into the account Search or ask on Stack Overflow ...