@nuxtjs/google-analytics
v2.4.0
Published
Google Analytics Module for Nuxt.js
Downloads
60,808
Keywords
Readme
Google Analytics
Google Analytics integration for Nuxt.js with vue-analytics
Setup
- Add
@nuxtjs/google-analytics
dependency to your project
yarn add --dev @nuxtjs/google-analytics # or npm install --save-dev @nuxtjs/google-analytics
- Add
@nuxtjs/google-analytics
to thebuildModules
section ofnuxt.config.js
export default {
buildModules: [
['@nuxtjs/google-analytics', {
id: 'UA-12301-2'
}]
]
}
:warning: If you are using Nuxt < v2.9 you have to install the module as a dependency
(No --dev
or --save-dev
flags) and use modules
section in nuxt.config.js
instead of buildModules
.
Using top level options
export default {
buildModules: [
'@nuxtjs/google-analytics'
],
googleAnalytics: {
id: 'UA-12301-2'
}
}
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 {
buildModules: [
'@nuxtjs/google-analytics'
],
googleAnalytics: {
id: 'UA-12301-2', // Used as fallback if no runtime config is provided
},
publicRuntimeConfig: {
googleAnalytics: {
id: process.env.GOOGLE_ANALYTICS_ID
}
},
}
Usage
Click here for all options and features of vue-analytics
Differences between vue-analytics and the Nuxt.js implementation:
The router instance is already added out of the box (read here if you need to disable it)
The
id
andua
properties have the exact same behaviour. Theua
property has been added for backwards compatibily with previous releasesYou can disable module for
nuxt dev
by settingdev: false
option in module optionsNote: By default, you won't see hits going out in dev mode. For testing analytics in dev mode, you must add the following to the
googleAnalytics
options innuxt.config.js
:debug: { enabled: true, sendHitTask: true }
License
Copyright (c) Nuxt Community