Need help with gtm-module?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

nuxt-community
241 Stars 48 Forks MIT License 62 Commits 72 Opened issues

Description

Google Tag Manager Module for Nuxt.js

Services available

!
?

Need anything else?

Contributors list

@nuxtjs/gtm

npm version npm downloads Checks Codecov License

Google Tag Manager Module for Nuxt.js

📖 Release Notes

ℹ️ If coming from v1 (

@nuxtjs/google-tag-manager
) please read v2 release notes.

Setup

  1. Add
    @nuxtjs/gtm
    dependency to your project
yarn add @nuxtjs/gtm # or npm install @nuxtjs/gtm
  1. Add
    @nuxtjs/gtm
    to the
    modules
    section of
    nuxt.config.js
export default {
  modules: [
    '@nuxtjs/gtm',
  ],
  gtm: {
    id: 'GTM-XXXXXXX'
  }
}

Runtime Config

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 } }, }

Options

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.

Manual GTM Initialization

There are several use cases that you may need more control over initialization:

  • Block Google Tag Manager before user directly allows (GDPR realisation or other)
  • Dynamic ID based on request path or domain
  • Initialize with multi containers
  • Enable GTM on page level

nuxt.config.js
:
export default {
 modules: [
  '@nuxtjs/gtm'
 ],
 plugins: [
  '~/plugins/gtm'
 ]
}

plugins/gtm.js
:
export default function({ $gtm, route }) {
  $gtm.init('GTM-XXXXXXX')
}
  • Note: All events will be still buffered in data layer but won't send until
    init()
    method getting called.
  • Note: Please consult with Google Tag Manager Docs for more information caveats using multiple containers.

Router Integration

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.

Usage

Pushing events

You can push events into the configured layer:

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

Development

  1. Clone this repository
  2. Install dependencies using
    yarn install
    or
    npm install
  3. Start development server using
    yarn dev
    or
    GTM_ID= yarn dev
    if you want to provide custom GTM_ID.

License

MIT License

Copyright (c) Nuxt.js Community

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.