Google Tag Manager Module for Nuxt.js
Google Tag Manager Module for Nuxt.js
ℹ️ If coming from v1 (
@nuxtjs/google-tag-manager) please read v2 release notes.
@nuxtjs/gtmdependency to your project
yarn add @nuxtjs/gtm # or npm install @nuxtjs/gtm
@nuxtjs/gtmto the
modulessection of
nuxt.config.js
export default { modules: [ '@nuxtjs/gtm', ], gtm: { id: 'GTM-XXXXXXX' } }
You can use runtime config if need to use dynamic environment variables in production. Otherwise, the options will be hardcoded during the build and won't be read from
nuxt.configanymore.
export default { modules: [ '@nuxtjs/gtm' ],gtm: { id: 'GTM-XXXXXXX', // Used as fallback if no runtime config is provided },
publicRuntimeConfig: { gtm: { id: process.env.GOOGLE_TAG_MANAGER_ID } }, }
Defaults:
export default { gtm: { enabled: undefined, /* see below */ debug: false,id: undefined, layer: 'dataLayer', variables: {}, pageTracking: false, pageViewEventName: 'nuxtRoute', autoInit: true, respectDoNotTrack: true, scriptId: 'gtm-script', scriptDefer: false, scriptURL: 'https://www.googletagmanager.com/gtm.js', crossOrigin: false, noscript: true, noscriptId: 'gtm-noscript', noscriptURL: 'https://www.googletagmanager.com/ns.html'
} }
enabled
GTM module uses a debug-only version of
$gtmduring development (
nuxt dev).
You can explicitly enable or disable it using
enabledoption:
export default { gtm: { // Always send real GTM events (also when using `nuxt dev`) enabled: true } }
debug
Whether
$gtmAPI calls like
initand
pushare logged to the console.
There are several use cases that you may need more control over initialization:
nuxt.config.js:
export default { modules: [ '@nuxtjs/gtm' ], plugins: [ '~/plugins/gtm' ] }
plugins/gtm.js:
export default function({ $gtm, route }) { $gtm.init('GTM-XXXXXXX') }
init()method getting called.
You can optionally set
pageTrackingoption to
trueto track page views.
Note: This is disabled by default to prevent double events when using alongside with Google Analytics so take care before enabling this option.
The default event name for page views is
nuxtRoute, you can change it by setting the
pageViewEventNameoption.
You can push events into the configured layer:
this.$gtm.push({ event: 'myEvent', ...someAttributes })
yarn installor
npm install
yarn devor
GTM_ID= yarn devif you want to provide custom GTM_ID.
Copyright (c) Nuxt.js Community