Google Analytics integration for Nuxt.js with vue-analytics
- 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'
}]
]
}
dependency
(No --dev
or --save-dev
flags) and use modules
section in nuxt.config.js
instead of buildModules
.
export default {
buildModules: [
'@nuxtjs/google-analytics'
],
googleAnalytics: {
id: 'UA-12301-2'
}
}
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
}
},
}
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 releases -
You can disable module for
nuxt dev
by settingdev: 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 innuxt.config.js
:debug: { enabled: true, sendHitTask: true }
- Clone this repository
- Install dependencies using
yarn install
ornpm install
- Start development server using
npm run dev
Copyright (c) Nuxt Community