Google Analytics
Google Analytics integration for Nuxt.js with vue-analytics
📖 Release Notes
Setup
- Add
@nuxtjs/google-analytics
dependency to your project
yarn add --dev @nuxtjs/google-analytics
- Add
@nuxtjs/google-analytics
to the buildModules
section of nuxt.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',
},
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
and ua
properties have the exact same behaviour. The ua
property has been added for backwards compatibily with previous releases
-
You can disable module for nuxt dev
by setting dev: false
option in module options
-
Note: 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 in nuxt.config.js
:
debug: {
enabled: true,
sendHitTask: true
}
License
MIT License
Copyright (c) Nuxt Community