syffs / nuxt-gtm

Google Tag Manager for Nuxt.js

@nuxtjs/gtm

Google Tag Manager for Nuxt.js - inspired by Nuxt.js Google Tag Manager official module which seemed incomplete to me

📖 Release Notes

Add Google Tag Manager (GTM) to your nuxt.js application. This plugins automatically sends first page and route change events to GTM.

Setup

• Add @nuxtjs/google-tag-manager dependency using yarn or npm to your project
• Add @nuxtjs/google-tag-manager to modules section of nuxt.config.js

  modules: [
   ['@nuxtjs/gtm', { id: 'GTM-XXXXXXX' }],
  ]

Options

id

• Required
• Can be String in form of GTM-XXXXXXX
• Can be function returning Promise or String:

// Returns Promise
id: () => {
  return axios.get('http://example.com/')
    .then(({ data }) => {
      return data.gtm_id
    })
}

// Returns String
const code = '1234567'
id: () => {
  return 'GTM-' + code
}

All options

{
  id: 'GTM-XXXXXXX',
  layer: 'dataLayer',
  pageTracking: false,
  dev: true,
  query: {
    // query params...
    gtm_auth:        '...',
    gtm_preview:     '...',
    gtm_cookies_win: '...'
  },
  scriptURL: '//example.com'
}

Router Integration

You can optionally set pageTracking option to true to track page views.

This is disabled by default to prevent double events when using alongside with Google Analytics so take care before enabling this option.

Usage

Pushing events

You can push events into the configured layer:

this.$gtm.pushEvent({ event: 'myEvent', ...someAttributes })

License

MIT License

Copyright (c) syffs