feat(google-tag-manager): refactor, dev option and $gtm.pushEvent

[syffs]

@pi0 @manniL extracted module logic to a dedicated class for better readability and extensibility

Features:

• pushing event from $gtm.pushEvent()

• enabled option to allow dev debugging

[pi0]

I think it would be enough to add dev option and not adding such complexity. Anyway, this plugin only works in client mode. Setting dev: true can cause plugin to also added in nuxt dev for debugging.

[syffs]

@pi0 Thanks for the quick feedback ! Updated with requested changes.

fixed

[pi0]

@syffs Looks good so far. Other the little change if you can confirm current changes works fine in your project i can merge and release it.

[syffs]

@pi0 agreed and updated !

[syffs]

@pi0 I can confirm that it works great in my project:

[shikinen]

It seems after adding the gtm module in nuxt.config I have no access to this.$gtm.pushEvent() from my layout component <- should I create $gtm object myself or is it 'shipped' with the gtm module?

[syffs]

It seems after adding the gtm module in nuxt.config I have no access to this.$gtm.pushEvent() from my layout component <- should I create $gtm object myself or is it 'shipped' with the gtm module?

@shikinen how do you configure it exactly ? here's how I set it up in nuxt.config.js

...
export default {
...
  modules: [
    ['@nuxtjs/google-tag-manager', {
      id: process.env.GTM_ID,
      pageTracking: true, // disabled by default to prevent double events when using alongside with GA
      dev: true // enable dev
    }]
  ]
...
}

then from your nuxt/vue pages/components:

<script>
export default {
  methods: {
    pushSpecificEvent() {
      this.$gtm.pushEvent({...})
    }
  }
}
</script>

[gablittledevshop]

@syffs I'm currently having the same problem as shikinen. Currently have it setup as your examples, but console logging this.$gtm outputs undefined so I can't push custom events. Is there something I'm missing?

[woutercouvaras]

@syffs I'm currently having the same problem as shikinen. Currently have it setup as your examples, but console logging this.$gtm outputs undefined so I can't push custom events. Is there something I'm missing?

I've also battled with this module a bit, but I think that's largely because of my own assumptions. I still have pageTracking to figure out - which I'm working on right now, seeing as I've deployed a pretty massive site and it's using this module. I'll put in a pull request for some additional info in the README, to help those that might face similar things.

Having said all that, I managed to push events. My config is setup as described in the readme and by @syffs. Then, in my component, I have something like this (altered to be shared here):

await this.$axios
  .$post(process.env.baseUrl + '/api/send-mail', this.form)
  .then(async () => {
    await this.$gtm.pushEvent({
      event: 'contact',
      formName: 'Contact Enquiry'
    })
    this.$router.push({ name: 'thank-you' })
  })

I'm not saying this is the case for you, but I certainly made HUGE assumptions with how GTM works (I thought it was plug & play like Google Analytics). What I didn't know was that I had to setup the Tags on GTM, and then setup actions on GA for it all to work. I'm only mentioning this in case it helps someone else:)

[pi0]

Please migrate to https://github.com/nuxt-community/gtm-module