Google Tag Manager Module for Nuxt.js
ℹ️ If coming from v1 (@nuxtjs/google-tag-manager
) please read v2 release notes.
@nuxtjs/gtm
dependency to your projectyarn add @nuxtjs/gtm # or npm install @nuxtjs/gtm
@nuxtjs/gtm
to the modules
section 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.config
anymore.
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 $gtm
during development (nuxt dev
).
You can explicitly enable or disable it using enabled
option:
export default {
gtm: {
// Always send real GTM events (also when using `nuxt dev`)
enabled: true
}
}
debug
Whether $gtm
API calls like init
and push
are 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 pageTracking
option to true
to 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 pageViewEventName
option.
You can push events into the configured layer:
this.$gtm.push({ event: 'myEvent', ...someAttributes })
yarn install
or npm install
yarn dev
or GTM_ID=<your gtm id> yarn dev
if you want to provide custom GTM_ID.Copyright (c) Nuxt.js Community