├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .github └── workflows │ └── ci.yml ├── .gitignore ├── CHANGELOG.md ├── LICENSE ├── README.md ├── commitlint.config.js ├── docs ├── .env.example ├── .gitignore ├── README.md ├── content │ ├── en │ │ ├── index.md │ │ ├── options.md │ │ ├── setup.md │ │ └── usage │ │ │ ├── event-tracking.md │ │ │ ├── page-tracking.md │ │ │ ├── screen-tracking.md │ │ │ └── time-tracking.md │ └── settings.json ├── nuxt.config.js ├── package.json ├── static │ ├── icon.png │ ├── logo-dark.svg │ ├── logo-light.svg │ ├── preview-dark.png │ └── preview.png ├── tailwind.config.js └── yarn.lock ├── husky.config.js ├── jest.config.js ├── lib ├── module.js └── plugin.js ├── netlify.toml ├── package.json ├── renovate.json ├── test ├── dev.test.js ├── disabled-send-hit-task.test.js ├── disabled.test.js ├── fixture │ ├── dev │ │ ├── nuxt.config.js │ │ └── pages │ │ │ └── index.vue │ ├── disabled-send-hit-task │ │ ├── nuxt.config.js │ │ └── pages │ │ │ └── index.vue │ ├── disabled │ │ ├── nuxt.config.js │ │ └── pages │ │ │ └── index.vue │ ├── options │ │ ├── nuxt.config.js │ │ └── pages │ │ │ └── index.vue │ └── prod │ │ ├── nuxt.config.js │ │ └── pages │ │ └── index.vue ├── options.test.js └── prod.test.js ├── types ├── index.d.ts └── vuex.d.ts └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_size = 2 6 | indent_style = space 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | # Common 2 | node_modules 3 | dist 4 | .nuxt 5 | coverage 6 | 7 | # Plugin 8 | lib/plugin.js 9 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | extends: [ 4 | '@nuxtjs' 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: ci 2 | 3 | on: 4 | push: 5 | branches: 6 | - master 7 | pull_request: 8 | branches: 9 | - master 10 | 11 | jobs: 12 | ci: 13 | runs-on: ${{ matrix.os }} 14 | 15 | strategy: 16 | matrix: 17 | # os: [ubuntu-latest, macos-latest, windows-latest] 18 | os: [ubuntu-latest] 19 | node: [10] 20 | 21 | steps: 22 | - uses: actions/setup-node@v2 23 | with: 24 | node-version: ${{ matrix.node }} 25 | 26 | - name: checkout 27 | uses: actions/checkout@master 28 | 29 | - name: cache node_modules 30 | uses: actions/cache@v2 31 | with: 32 | path: node_modules 33 | key: ${{ matrix.os }}-node-v${{ matrix.node }}-deps-${{ hashFiles(format('{0}{1}', github.workspace, '/yarn.lock')) }} 34 | 35 | - name: Install dependencies 36 | if: steps.cache.outputs.cache-hit != 'true' 37 | run: yarn 38 | 39 | - name: Lint 40 | run: yarn lint 41 | 42 | - name: Test 43 | run: yarn test 44 | 45 | - name: Coverage 46 | uses: codecov/codecov-action@v1 47 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.iml 3 | .idea 4 | *.log* 5 | .nuxt 6 | .vscode 7 | .DS_Store 8 | coverage 9 | dist 10 | sw.js 11 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. 4 | 5 | ## [2.4.0](https://github.com/nuxt-community/analytics-module/compare/v2.3.0...v2.4.0) (2020-07-16) 6 | 7 | 8 | ### Features 9 | 10 | * **plugin:** support runtimeConfig ([#81](https://github.com/nuxt-community/analytics-module/issues/81)) ([8248e60](https://github.com/nuxt-community/analytics-module/commit/8248e602d881e2451c5b3e07f12acd99628c8260)) 11 | 12 | ## [2.3.0](https://github.com/nuxt-community/analytics-module/compare/v2.2.3...v2.3.0) (2020-05-19) 13 | 14 | 15 | ### Features 16 | 17 | * typescript typings ([#78](https://github.com/nuxt-community/analytics-module/issues/78)) ([5c75f37](https://github.com/nuxt-community/analytics-module/commit/5c75f37ae97d0fa4beb58d9a58befb224b38b2fc)) 18 | 19 | ### [2.2.3](https://github.com/nuxt-community/analytics-module/compare/v2.2.2...v2.2.3) (2020-01-10) 20 | 21 | ### [2.2.2](https://github.com/nuxt-community/analytics-module/compare/v2.2.1...v2.2.2) (2019-12-03) 22 | 23 | ### [2.2.1](https://github.com/nuxt-community/analytics-module/compare/v2.2.0...v2.2.1) (2019-10-25) 24 | 25 | 26 | ### Bug Fixes 27 | 28 | * send hits in production mode by default ([#60](https://github.com/nuxt-community/analytics-module/issues/60)) ([0871f84](https://github.com/nuxt-community/analytics-module/commit/0871f848051ce8f5646493552c405b0c4dd44e0a)) 29 | 30 | 31 | # [2.2.0](https://github.com/nuxt-community/analytics-module/compare/v2.1.0...v2.2.0) (2019-03-08) 32 | 33 | 34 | ### Features 35 | 36 | * **module:** inject $ga in ctx ([#40](https://github.com/nuxt-community/analytics-module/issues/40)) ([2c42bf3](https://github.com/nuxt-community/analytics-module/commit/2c42bf3)) 37 | * **plugin:** support id as a function (asyncID) ([#43](https://github.com/nuxt-community/analytics-module/issues/43)) ([6b6809e](https://github.com/nuxt-community/analytics-module/commit/6b6809e)) 38 | 39 | 40 | 41 | 42 | # [2.1.0](https://github.com/nuxt-community/analytics-module/compare/v2.0.4...v2.1.0) (2019-02-17) 43 | 44 | 45 | ### Bug Fixes 46 | 47 | * default dev option to true to prevent breaking change ([860a27c](https://github.com/nuxt-community/analytics-module/commit/860a27c)) 48 | 49 | 50 | ### Features 51 | 52 | * support `googleAnalytics` in `nuxt.config` ([bda825e](https://github.com/nuxt-community/analytics-module/commit/bda825e)) 53 | 54 | 55 | 56 | 57 | ## [2.0.4](https://github.com/nuxt-community/analytics-module/compare/v2.0.3...v2.0.4) (2019-02-17) 58 | 59 | 60 | ### Bug Fixes 61 | 62 | * disable on dev unless specified ([63e22e5](https://github.com/nuxt-community/analytics-module/commit/63e22e5)) 63 | 64 | 65 | 66 | 67 | ## [2.0.3](https://github.com/nuxt-community/analytics-module/compare/v2.0.2...v2.0.3) (2019-02-08) 68 | 69 | 70 | 71 | 72 | ## [2.0.2](https://github.com/nuxt-community/analytics-module/compare/v2.0.1...v2.0.2) (2017-11-24) 73 | 74 | 75 | 76 | 77 | ## [2.0.1](https://github.com/nuxt-community/analytics-module/compare/2.0.0...2.0.1) (2017-10-27) 78 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) Nuxt Community 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![@nuxtjs/google-analytics](https://google-analytics.nuxtjs.org/preview.png)](https://google-analytics.nuxtjs.org) 2 | 3 | 4 | > **⚠ WARNING: This package does not support GA4. ** 5 | > This package currently only supports GA3/UA 6 | 7 | # @nuxtjs/google-analytics 8 | 9 | [![npm version][npm-version-src]][npm-version-href] 10 | [![npm downloads][npm-downloads-src]][npm-downloads-href] 11 | [![Github Actions CI][github-actions-ci-src]][github-actions-ci-href] 12 | [![Codecov][codecov-src]][codecov-href] 13 | [![License][license-src]][license-href] 14 | 15 | > [Google Analytics](https://analytics.google.com/analytics/web/) integration for [Nuxt 2](https://nuxt.com) using [vue-analytics](https://github.com/MatteoGabriele/vue-analytics). 16 | 17 | - [✨  Release Notes](./CHANGELOG.md) 18 | - [📖  Documentation](https://google-analytics.nuxtjs.org) 19 | 20 | ## Nuxt 3 21 | 22 | If you need Nuxt 3 support can use the alternative module [nuxt-gtag](https://github.com/johannschopplich/nuxt-gtag). 23 | 24 | ## Features 25 | 26 | - Automatic page tracking 27 | - Event batching 28 | - User timings 29 | - Screen view 30 | - Multiple domain ID 31 | - Automatic Google Analytics script loading 32 | - E-commerce support 33 | 34 | [📖  Read more](https://google-analytics.nuxtjs.org) 35 | 36 | ## Contributing 37 | 38 | 1. Clone this repository 39 | 2. Install dependencies using `yarn install` or `npm install` 40 | 3. Start development server using `yarn dev` or `npm run dev` 41 | 42 | ## License 43 | 44 | [MIT License](./LICENSE) 45 | 46 | Copyright (c) Nuxt Community 47 | 48 | 49 | [npm-version-src]: https://img.shields.io/npm/v/@nuxtjs/google-analytics/latest.svg 50 | [npm-version-href]: https://npmjs.com/package/@nuxtjs/google-analytics 51 | 52 | [npm-downloads-src]: https://img.shields.io/npm/dm/@nuxtjs/google-analytics.svg 53 | [npm-downloads-href]: https://npmjs.com/package/@nuxtjs/google-analytics 54 | 55 | [github-actions-ci-src]: https://github.com/nuxt-community/analytics-module/workflows/ci/badge.svg 56 | [github-actions-ci-href]: https://github.com/nuxt-community/analytics-module/actions?query=workflow%3Aci 57 | 58 | [codecov-src]: https://img.shields.io/codecov/c/github/nuxt-community/analytics-module.svg 59 | [codecov-href]: https://codecov.io/gh/nuxt-community/analytics-module 60 | 61 | [license-src]: https://img.shields.io/npm/l/@nuxtjs/google-analytics.svg 62 | [license-href]: https://npmjs.com/package/@nuxtjs/google-analytics 63 | -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: [ 3 | '@commitlint/config-conventional' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /docs/.env.example: -------------------------------------------------------------------------------- 1 | 2 | # Create one with no scope selected on https://github.com/settings/tokens/new 3 | GITHUB_TOKEN= 4 | -------------------------------------------------------------------------------- /docs/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.iml 3 | .idea 4 | *.log* 5 | .nuxt 6 | .vscode 7 | .DS_Store 8 | coverage 9 | dist 10 | sw.* 11 | .env 12 | -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | # docs 2 | 3 | ## Setup 4 | 5 | Install dependencies: 6 | 7 | ```bash 8 | yarn install 9 | ``` 10 | 11 | ## Development 12 | 13 | ```bash 14 | yarn dev 15 | ``` 16 | 17 | ## Static Generation 18 | 19 | This will create the `dist/` directory for publishing to static hosting: 20 | 21 | ```bash 22 | yarn generate 23 | ``` 24 | 25 | To preview the static generated app, run `yarn start` 26 | 27 | For detailed explanation on how things work, checkout [nuxt/content](https://content.nuxtjs.org) and [@nuxt/content theme docs](https://content.nuxtjs.org/themes-docs). 28 | -------------------------------------------------------------------------------- /docs/content/en/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Introduction 3 | description: The Google Analytics module for Nuxt 4 | position: 1 5 | category: '' 6 | features: 7 | - Automatic page tracking 8 | - Event batching 9 | - User timings 10 | - Screen view 11 | - Multiple domain ID 12 | - Automatic Google Analytics script loading 13 | - E-commerce support 14 | --- 15 | 16 | 17 | 18 | 19 | [Google Analytics](https://analytics.google.com/analytics/web/) integration for [Nuxt](https://nuxtjs.org) using [vue-analytics](https://github.com/MatteoGabriele/vue-analytics). 20 | 21 | Track the visitors to your sites and applications, measure your ROI and provide in-depth analysis details about your visitors' behaviors. 22 | 23 | ## Features 24 | 25 | 26 | 27 |

Enjoy light and dark mode: 

28 | -------------------------------------------------------------------------------- /docs/content/en/options.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Options 3 | description: Learn how to configure the Google Analytics module in Nuxt 4 | position: 3 5 | category: Guide 6 | fullscreen: false 7 | --- 8 | 9 | To configure the module, you can use `googleAnalytics` section in `nuxt.config.js`. 10 | 11 | ```js{}[nuxt.config.js] 12 | export default { 13 | googleAnalytics: { 14 | // Options 15 | } 16 | } 17 | ``` 18 | 19 | 20 | 21 | `router` instance is added out of the box. You can refer [here](https://github.com/MatteoGabriele/vue-analytics/blob/master/docs/page-tracking.md#disable-page-auto-tracking) on to how to disable it if needed. 22 | 23 | 24 | 25 | ## Google Analytics options 26 | 27 | ### `id` 28 | 29 | * Type: `String` 30 | * **Required** 31 | 32 | The tracking ID of your Google Analytics account. It is required to have Google Analytics (GA) know which account and property to send the data to. 33 | 34 | ```js[nuxt.config.js] 35 | export default { 36 | googleAnalytics: { 37 | id: 'UA-XXX-X' 38 | } 39 | } 40 | ``` 41 | 42 | 43 | 44 | For backwards compatibilities, use `ua` instead. 45 | 46 | 47 | 48 | ### `asyncID` 49 | 50 | * Type: `Function` 51 | * Should return a `String` as tracking `id` for GA account. 52 | 53 | Allow an asynchronous function to load the `id` 54 | 55 | ```js[nuxt.config.js] 56 | export default { 57 | googleAnalytics: { 58 | asyncID: async (context) => { 59 | /* do something */ 60 | 61 | return 'UA-XXX-X' 62 | } 63 | } 64 | } 65 | ``` 66 | 67 | 68 | 69 | If both `id` and `asyncID` are present, the returned value from `asyncID` will override the value of `id`. 70 | 71 | 72 | 73 | ### `debug` 74 | 75 | * Type: `Object` 76 | * `enabled`: `Boolean` - to enable the debug mode 77 | * `sendHitTask`: `Boolean` - to sent GA hits. Default is `false` for development mode. 78 | 79 | ### `dev` 80 | 81 | * Type: `Boolean` 82 | 83 | Turn on the development mode and disable the module. 84 | 85 | ### `checkDuplicatedScript` 86 | 87 | * Type: `Boolean` 88 | 89 | It will detect if any analytics script has been added in your HTML page. 90 | 91 | ```js[nuxt.config.js] 92 | export default { 93 | googleAnalytics: { 94 | checkDuplicatedScript: true 95 | } 96 | } 97 | ``` 98 | 99 | ### `disableScriptLoader` 100 | 101 | * Type: `Boolean` 102 | 103 | Disable the script loader 104 | 105 | ```js[nuxt.config.js] 106 | export default { 107 | googleAnalytics: { 108 | disableScriptLoader: true 109 | } 110 | } 111 | ``` 112 | 113 | 114 | 115 | For a full list of options, please see [Vue Analytics](https://matteogabriele.gitbooks.io/vue-analytics) documentation. 116 | 117 | 118 | -------------------------------------------------------------------------------- /docs/content/en/setup.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Setup 3 | description: Learn how to setup the Google Analytics module in Nuxt 4 | position: 2 5 | category: Guide 6 | --- 7 | 8 | 9 | > **⚠ WARNING: This package does not support GA4. ** 10 | > This package currently only supports GA3/UA 11 | 12 | 13 | Check the [Nuxt.js documentation](https://nuxtjs.org/guides/configuration-glossary/configuration-modules) for more information about installing and using modules in Nuxt.js. 14 | 15 | ## Installation 16 | 17 | 1. Add `@nuxtjs/google-analytics` dependency to your project: 18 | 19 | 20 | 21 | 22 | ```bash 23 | yarn add --dev @nuxtjs/google-analytics 24 | ``` 25 | 26 | 27 | 28 | 29 | ```bash 30 | npm install --save-dev @nuxtjs/google-analytics 31 | ``` 32 | 33 | 34 | 35 | 36 | 37 | 38 | If you are using Nuxt **< v2.9**, you have to install the module as `dependency` (**without** `--dev` or `--save-dev`) 39 | 40 | 41 | 42 | 2. Add `@nuxtjs/google-analytics` to the `buildModules` section of `nuxt.config.js`: 43 | 44 | ```js[nuxt.config.js] 45 | { 46 | buildModules: [ 47 | '@nuxtjs/google-analytics' 48 | ], 49 | } 50 | ``` 51 | 52 | 53 | 54 | If you are using Nuxt **< v2.9**, you have to add it to `modules` section instead of `buildModules`. 55 | 56 | 57 | 58 | ### Configure 59 | 60 | Add `googleAnalytics` section in `nuxt.config.js` to set the module options: 61 | 62 | ```js[nuxt.config.js] 63 | export default { 64 | googleAnalytics: { 65 | // Options 66 | } 67 | } 68 | ``` 69 | 70 | Then pass your Google Analytics ID to `id` field of `googleAnalytics`: 71 | 72 | ```js[nuxt.config.js] 73 | export default { 74 | googleAnalytics: { 75 | id: 'UA-XXX-X' 76 | } 77 | } 78 | ``` 79 | 80 | 81 | 82 | `router` instance is added out of the box. You can refer [here](https://github.com/MatteoGabriele/vue-analytics/blob/master/docs/page-tracking.md#disable-page-auto-tracking) on to how to disable it if needed. 83 | 84 | 85 | 86 | ### Runtime Config 87 | 88 | You can use `publicRuntimeConfig`(from [runtime config](https://nuxtjs.org/guide/runtime-config)) to have dynamic environment variables available in production. Otherwise, the configuration options passed in `nuxt.config.js` will be read and hard-coded during the build once only. 89 | 90 | ```js[nuxt.config.js] 91 | export default { 92 | buildModules: [ 93 | '@nuxtjs/google-analytics' 94 | ], 95 | googleAnalytics: { 96 | id: process.env.GOOGLE_ANALYTICS_ID, // Use as fallback if no runtime config is provided 97 | }, 98 | publicRuntimeConfig: { 99 | googleAnalytics: { 100 | id: process.env.GOOGLE_ANALYTICS_ID 101 | } 102 | } 103 | } 104 | ``` 105 | 106 | 107 | 108 | For a full list of usage, refer to [Vue Analytics Documentation](https://matteogabriele.gitbooks.io/vue-analytics). 109 | 110 | 111 | -------------------------------------------------------------------------------- /docs/content/en/usage/event-tracking.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Event tracking 3 | description: Learn how to send event to Google Analytics with the Nuxt module 4 | position: 5 5 | category: Usage 6 | --- 7 | 8 | This module injects `$ga` instance globally. 9 | 10 | You can access the instance anywhere using: 11 | - `this.$ga` within a component 12 | - `context.$ga` for plugins, `asyncData`, `nuxtServerInit` and [middleware](https://nuxtjs.org/guides/directory-structure/middleware) 13 | 14 | ## `event()` 15 | 16 | The received parameters can be: 17 | 18 | * Event `Object` contains: 19 | * `eventCategory` - the object that user interacted with. 20 | * Type: `String` 21 | * `required` 22 | * `eventAction` - the type of interaction (`click`, `play`, etc.) 23 | * Type: `String` 24 | * `required` 25 | * `eventLabel` - for categorizing events 26 | * Type: `String` 27 | * `eventValue` - a numberic value associated with the event 28 | * Type: `Number` 29 | 30 | ```js 31 | this.$ga.event({ 32 | eventCategory: 'category', 33 | eventAction: 'action', 34 | eventLabel: 'label', 35 | eventValue: 123 36 | }) 37 | ``` 38 | 39 | Or the Event's information can be spread directly as separate arguments, in the exact order 40 | 41 | ```js 42 | event(eventCategory, eventAction, eventLabel, eventValue) 43 | ``` 44 | 45 | For example: 46 | 47 | ```js 48 | this.$ga.event('category', 'action', 'label', 123) 49 | ``` 50 | -------------------------------------------------------------------------------- /docs/content/en/usage/page-tracking.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Page tracking 3 | description: Learn how to track a page in Google Analytics with the Nuxt module 4 | position: 4 5 | category: Usage 6 | --- 7 | 8 | This module injects `$ga` instance globally. You can access the instance anywhere using `this.$ga` (within a component), or `context.$ga` (for plugins, `asyncData`, `fetch`, `nuxtServerInit` ,and middleware) 9 | 10 | ## Automatic page tracking 11 | 12 | Since `router` instance is added out of the box during installation of the module, it will handle page tracking automatically for you. 13 | 14 | ## Manual page tracking 15 | 16 | ### `page(options)` 17 | 18 | * Type: `String` | `Object` | `VueRouter instance` 19 | 20 | Track and send event on a single page. 21 | 22 | 23 | 24 | You can read more about page tracking on [Google Analytics Documentation](https://developers.google.com/analytics/devguides/collection/analyticsjs/pages) 25 | 26 | 27 | 28 | The most standard is to pass the page path: 29 | 30 | ```js 31 | this.$ga.page('/') 32 | ``` 33 | 34 | Or to pass an `Object` containing the page details: 35 | 36 | ```js 37 | this.$ga.page({ 38 | page: '/', 39 | title: 'Home page', 40 | location: window.location.href 41 | }) 42 | ``` 43 | 44 | Or to pass a `VueRouter` instance existing in the component. The module will auto-detect related information about the page. 45 | 46 | ```js 47 | this.$ga.page(this.$router) 48 | ``` 49 | 50 | 51 | 52 | For other page tracking setting up options, please refer [Vue Analytics Documentation - Page tracking](https://matteogabriele.gitbooks.io/vue-analytics/content/docs/page-tracking.html) 53 | 54 | 55 | -------------------------------------------------------------------------------- /docs/content/en/usage/screen-tracking.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Screen tracking 3 | description: Learn how to track screen views using the Google Analytics module for Nuxt 4 | position: 6 5 | category: Usage 6 | --- 7 | 8 | This module injects `$ga` instance globally. You can access the instance anywhere using `this.$ga` (within a component), or `context.$ga` (for plugins, `asyncData`, `fetch`, `nuxtServerInit` ,and middleware) 9 | 10 | ## `screenview(options)` 11 | 12 | * `options` 13 | * Type: `String` | `Object` 14 | * `required` 15 | * The screen view event of a component 16 | 17 | Track the screen hits of a page or a component. 18 | 19 | You can pass a string as the `screenName` property for the screenview event sent to GA. 20 | 21 | ```js 22 | this.$ga.screenview('home') 23 | ``` 24 | 25 | Or you can pass the event object with customized fields 26 | 27 | ```js 28 | this.$ga.screenview({ 29 | screenName: 'home', 30 | ... // other properties 31 | }) 32 | ``` 33 | 34 | 35 | 36 | You can turn on auto-tracking for screen view by adding `screenview` property to `autoTracking` field in `googleAnalytics` section. 37 | 38 | ```js[nuxt.config.js] 39 | export { 40 | googleAnalytics: { 41 | id: 'UA-XXX-X', 42 | autoTracking: { 43 | screenview: true 44 | } 45 | } 46 | } 47 | ``` 48 | 49 | 50 | -------------------------------------------------------------------------------- /docs/content/en/usage/time-tracking.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: User timings tracking 3 | description: Learn how to track and measure user interactive time with the Google Analytics module for Nuxt 4 | position: 7 5 | category: Usage 6 | --- 7 | 8 | This module injects `$ga` instance globally. You can access the instance anywhere using `this.$ga` (within a component), or `context.$ga` (for plugins, `asyncData`, `fetch`, `nuxtServerInit` ,and middleware) 9 | 10 | ## `time()` 11 | 12 | The received parameters can be: 13 | 14 | * Event `Object` contains: 15 | * `timingCategory` - for categorizing all user timing variables into logical groups 16 | * Type: `String` 17 | * `required` 18 | * `timingVar` - identify the variable being recorded ('load' for instance) 19 | * Type: `String` 20 | * `required` 21 | * `timingValue` - number of milliseconds in elapsed time to report 22 | * Type: `Number` 23 | * `required` 24 | * `timingLabel` - used to add flexibility in visualizing user timings in the reports 25 | * Type: `String` 26 | 27 | ```js 28 | this.$ga.time({ 29 | timingCategory: 'category', 30 | timingVar: 'variable', 31 | timingValue: 123, 32 | timingLabel: 'label' 33 | }) 34 | ``` 35 | 36 | Or the Event's information can be spread directly as separate arguments, in the exact order 37 | 38 | ```js 39 | event(timingCategory, timingVar, timingValue, timingLabel) 40 | ``` 41 | 42 | For example: 43 | 44 | ```js 45 | this.$ga.time('category', 'variable', 123, 'label') 46 | ``` 47 | -------------------------------------------------------------------------------- /docs/content/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": "Google Analytics Module for Nuxt", 3 | "url": "https://google-analytics.nuxtjs.org", 4 | "logo": { 5 | "light": "/logo-light.svg", 6 | "dark": "/logo-dark.svg" 7 | }, 8 | "github": "nuxt-community/analytics-module", 9 | "twitter": "@nuxt_js" 10 | } 11 | -------------------------------------------------------------------------------- /docs/nuxt.config.js: -------------------------------------------------------------------------------- 1 | import theme from '@nuxt/content-theme-docs' 2 | 3 | export default theme({ 4 | docs: { 5 | primaryColor: '#E37400' 6 | }, 7 | buildModules: ['nuxt-ackee'], 8 | ackee: { 9 | server: 'https://ackee.nuxtjs.com', 10 | domainId: '79213d80-7ac2-47c6-ba6b-0025a7a0ee35', 11 | detailed: true 12 | }, 13 | pwa: { 14 | manifest: { 15 | name: 'Nuxt Google Analytics' 16 | } 17 | } 18 | }) 19 | -------------------------------------------------------------------------------- /docs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nuxt-google-analytics-docs", 3 | "version": "1.0.0", 4 | "description": "Google Analytics Module for Nuxt.js", 5 | "private": true, 6 | "scripts": { 7 | "dev": "nuxt", 8 | "build": "nuxt build", 9 | "start": "nuxt start", 10 | "generate": "nuxt generate" 11 | }, 12 | "dependencies": { 13 | "@nuxt/content-theme-docs": "^0.8.2", 14 | "nuxt": "^2.14.12" 15 | }, 16 | "devDependencies": { 17 | "nuxt-ackee": "^2.0.0" 18 | } 19 | } -------------------------------------------------------------------------------- /docs/static/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nuxt-community/google-analytics-module/3b1cebd394a3be9453795cea6d7780037f0eca14/docs/static/icon.png -------------------------------------------------------------------------------- /docs/static/logo-dark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /docs/static/logo-light.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /docs/static/preview-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nuxt-community/google-analytics-module/3b1cebd394a3be9453795cea6d7780037f0eca14/docs/static/preview-dark.png -------------------------------------------------------------------------------- /docs/static/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nuxt-community/google-analytics-module/3b1cebd394a3be9453795cea6d7780037f0eca14/docs/static/preview.png -------------------------------------------------------------------------------- /docs/tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | future: { 3 | removeDeprecatedGapUtilities: true, 4 | purgeLayersByDefault: true, 5 | defaultLineHeights: true, 6 | standardFontWeights: true 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /husky.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | hooks: { 3 | 'commit-msg': 'commitlint -E HUSKY_GIT_PARAMS', 4 | 'pre-commit': 'yarn lint', 5 | 'pre-push': 'yarn lint' 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | collectCoverage: true, 3 | collectCoverageFrom: ['lib/**/*.js', '!lib/plugin.js'], 4 | forceExit: true, 5 | testEnvironment: 'node' 6 | } 7 | -------------------------------------------------------------------------------- /lib/module.js: -------------------------------------------------------------------------------- 1 | const { resolve } = require('path') 2 | 3 | function analyticsModule (moduleOptions) { 4 | const options = { 5 | dev: true, 6 | debug: { 7 | sendHitTask: this.options.dev ? undefined : true 8 | }, 9 | ...this.options['google-analytics'], 10 | ...this.options.googleAnalytics, 11 | ...moduleOptions 12 | } 13 | 14 | // Dev mode 15 | if (this.options.dev) { 16 | // Disable unless dev: true specified for module option 17 | if (!options.dev) { 18 | return 19 | } 20 | // Disable sendHitTask 21 | if (options.debug.sendHitTask === undefined) { 22 | options.debug.sendHitTask = false 23 | } 24 | } 25 | 26 | // see https://github.com/nuxt-community/analytics-module/issues/2 27 | if (options.ua) { 28 | options.id = options.ua 29 | delete options.ua 30 | } 31 | 32 | this.addPlugin({ 33 | ssr: false, 34 | src: resolve(__dirname, 'plugin.js'), 35 | fileName: 'google-analytics.js', 36 | options 37 | }) 38 | } 39 | 40 | module.exports = analyticsModule 41 | module.exports.meta = require('../package.json') 42 | -------------------------------------------------------------------------------- /lib/plugin.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueAnalytics from 'vue-analytics' 3 | 4 | export default async (ctx, inject) => { 5 | const runtimeConfig = ctx.$config && ctx.$config.googleAnalytics || {} 6 | const moduleOptions = <%= serialize(options) %> 7 | const options = {...moduleOptions, ...runtimeConfig} 8 | 9 | if (typeof options.asyncID === 'function') { 10 | options.id = await options.asyncID(ctx) 11 | } 12 | 13 | Vue.use(VueAnalytics, {...{ router: ctx.app.router }, ...options}) 14 | 15 | ctx.$ga = Vue.$ga 16 | inject('ga', Vue.$ga) 17 | } 18 | -------------------------------------------------------------------------------- /netlify.toml: -------------------------------------------------------------------------------- 1 | # Global settings applied to the whole site. 2 | # 3 | # “base” is the directory to change to before starting build. If you set base: 4 | # that is where we will look for package.json/.nvmrc/etc, not repo root! 5 | # “command” is your build command. 6 | # “publish” is the directory to publish (relative to the root of your repo). 7 | 8 | [build] 9 | base = "docs" 10 | command = "yarn && yarn generate" 11 | publish = "dist" 12 | ignore = "git diff --quiet HEAD^ HEAD . ../package.json" -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@nuxtjs/google-analytics", 3 | "version": "2.4.0", 4 | "description": "Google Analytics Module for Nuxt.js", 5 | "repository": "nuxt-community/analytics-module", 6 | "license": "MIT", 7 | "contributors": [ 8 | "Matteo Gabriele ", 9 | "Ricardo Gobbo de Souza " 10 | ], 11 | "main": "lib/module.js", 12 | "types": "types/index.d.ts", 13 | "files": [ 14 | "lib", 15 | "types/*.d.ts" 16 | ], 17 | "scripts": { 18 | "dev": "nuxt test/fixture/dev", 19 | "lint": "eslint --ext .js,.vue .", 20 | "release": "yarn test && standard-version && git push --follow-tags && npm publish", 21 | "test": "yarn lint && jest" 22 | }, 23 | "dependencies": { 24 | "vue-analytics": "^5.22.1" 25 | }, 26 | "devDependencies": { 27 | "@commitlint/cli": "latest", 28 | "@commitlint/config-conventional": "latest", 29 | "@nuxtjs/eslint-config": "latest", 30 | "@nuxtjs/module-test-utils": "latest", 31 | "eslint": "latest", 32 | "husky": "latest", 33 | "jest": "latest", 34 | "nuxt-edge": "latest", 35 | "standard-version": "latest" 36 | }, 37 | "publishConfig": { 38 | "access": "public" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "@nuxtjs" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /test/dev.test.js: -------------------------------------------------------------------------------- 1 | const { setup, loadConfig, get } = require('@nuxtjs/module-test-utils') 2 | 3 | describe('dev', () => { 4 | let nuxt, addTemplate 5 | 6 | beforeAll(async () => { 7 | const beforeNuxtReady = (nuxt) => { 8 | addTemplate = nuxt.moduleContainer.addTemplate = jest.fn( 9 | nuxt.moduleContainer.addTemplate 10 | ) 11 | } 12 | ({ nuxt } = (await setup(loadConfig(__dirname, 'dev'), { beforeNuxtReady }))) 13 | }, 60000) 14 | 15 | afterAll(async () => { 16 | await nuxt.close() 17 | }) 18 | 19 | test('render', async () => { 20 | const html = await get('/') 21 | expect(html).toContain('Works!') 22 | }) 23 | 24 | test('option id', () => { 25 | expect(addTemplate).toBeDefined() 26 | const call = addTemplate.mock.calls.find(args => args[0].src.includes('plugin.js')) 27 | expect(call).toBeDefined() 28 | const options = call[0].options 29 | expect(options.id).toBe('UA-XXX') 30 | }) 31 | }) 32 | -------------------------------------------------------------------------------- /test/disabled-send-hit-task.test.js: -------------------------------------------------------------------------------- 1 | const { setup, loadConfig, get } = require('@nuxtjs/module-test-utils') 2 | 3 | describe('disabled sendHitTask', () => { 4 | let nuxt, addTemplate 5 | 6 | beforeAll(async () => { 7 | const beforeNuxtReady = (nuxt) => { 8 | addTemplate = nuxt.moduleContainer.addTemplate = jest.fn( 9 | nuxt.moduleContainer.addTemplate 10 | ) 11 | } 12 | ({ nuxt } = (await setup(loadConfig(__dirname, 'disabled-send-hit-task'), { beforeNuxtReady }))) 13 | }, 60000) 14 | 15 | afterAll(async () => { 16 | await nuxt.close() 17 | }) 18 | 19 | test('render', async () => { 20 | const html = await get('/') 21 | expect(html).toContain('Works!') 22 | }) 23 | 24 | test('sendHitTask should be false', () => { 25 | expect(addTemplate).toBeDefined() 26 | const call = addTemplate.mock.calls.find(args => args[0].src.includes('plugin.js')) 27 | expect(call).toBeDefined() 28 | const options = call[0].options 29 | expect(options.debug.sendHitTask).toBe(false) 30 | }) 31 | }) 32 | -------------------------------------------------------------------------------- /test/disabled.test.js: -------------------------------------------------------------------------------- 1 | const { setup, loadConfig, get } = require('@nuxtjs/module-test-utils') 2 | 3 | describe('disabled', () => { 4 | let nuxt, addTemplate 5 | 6 | beforeAll(async () => { 7 | const beforeNuxtReady = (nuxt) => { 8 | addTemplate = nuxt.moduleContainer.addTemplate = jest.fn( 9 | nuxt.moduleContainer.addTemplate 10 | ) 11 | } 12 | ({ nuxt } = (await setup(loadConfig(__dirname, 'disabled'), { beforeNuxtReady }))) 13 | }, 60000) 14 | 15 | afterAll(async () => { 16 | await nuxt.close() 17 | }) 18 | 19 | test('render', async () => { 20 | const html = await get('/') 21 | expect(html).toContain('Works!') 22 | }) 23 | 24 | test('plugin should be undefined', () => { 25 | expect(addTemplate).toBeDefined() 26 | const call = addTemplate.mock.calls.find(args => args[0].src.includes('plugin.js')) 27 | expect(call).toBeUndefined() 28 | }) 29 | }) 30 | -------------------------------------------------------------------------------- /test/fixture/dev/nuxt.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | dev: true, 3 | rootDir: __dirname, 4 | buildModules: [ 5 | { handler: require('../../../') } 6 | ], 7 | googleAnalytics: { 8 | id: 'UA-XXX' 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /test/fixture/dev/pages/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | -------------------------------------------------------------------------------- /test/fixture/disabled-send-hit-task/nuxt.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | dev: true, 3 | rootDir: __dirname, 4 | buildModules: [ 5 | { handler: require('../../../') } 6 | ], 7 | googleAnalytics: { 8 | id: 'UA-XXX', 9 | debug: { 10 | sendHitTask: false 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /test/fixture/disabled-send-hit-task/pages/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | -------------------------------------------------------------------------------- /test/fixture/disabled/nuxt.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | dev: true, 3 | rootDir: __dirname, 4 | buildModules: [ 5 | { handler: require('../../../') } 6 | ], 7 | googleAnalytics: { 8 | dev: false 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /test/fixture/disabled/pages/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | -------------------------------------------------------------------------------- /test/fixture/options/nuxt.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | rootDir: __dirname, 3 | buildModules: [ 4 | { handler: require('../../../') } 5 | ], 6 | googleAnalytics: { 7 | ua: 'UA-YYY' 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /test/fixture/options/pages/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | -------------------------------------------------------------------------------- /test/fixture/prod/nuxt.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | rootDir: __dirname, 3 | buildModules: [ 4 | { handler: require('../../../') } 5 | ], 6 | googleAnalytics: { 7 | id: 'UA-XXX' 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /test/fixture/prod/pages/index.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | -------------------------------------------------------------------------------- /test/options.test.js: -------------------------------------------------------------------------------- 1 | const { setup, loadConfig, get, url } = require('@nuxtjs/module-test-utils') 2 | 3 | describe('options', () => { 4 | let nuxt, addTemplate 5 | 6 | beforeAll(async () => { 7 | const beforeNuxtReady = (nuxt) => { 8 | addTemplate = nuxt.moduleContainer.addTemplate = jest.fn( 9 | nuxt.moduleContainer.addTemplate 10 | ) 11 | } 12 | ({ nuxt } = (await setup(loadConfig(__dirname, 'options'), { beforeNuxtReady }))) 13 | }, 60000) 14 | 15 | afterAll(async () => { 16 | await nuxt.close() 17 | }) 18 | 19 | test('render', async () => { 20 | const html = await get('/') 21 | expect(html).toContain('Works!') 22 | }) 23 | 24 | test('$ga should be defined', async () => { 25 | const window = await nuxt.renderAndGetWindow(url('/')) 26 | expect(window.$nuxt.$ga).toBeDefined() 27 | }) 28 | 29 | test('option ua converted to id', () => { 30 | expect(addTemplate).toBeDefined() 31 | const call = addTemplate.mock.calls.find(args => args[0].src.includes('plugin.js')) 32 | expect(call).toBeDefined() 33 | const options = call[0].options 34 | expect(options.id).toBe('UA-YYY') 35 | }) 36 | }) 37 | -------------------------------------------------------------------------------- /test/prod.test.js: -------------------------------------------------------------------------------- 1 | const { setup, loadConfig, get, url } = require('@nuxtjs/module-test-utils') 2 | 3 | describe('prod', () => { 4 | let nuxt, addTemplate 5 | 6 | beforeAll(async () => { 7 | const beforeNuxtReady = (nuxt) => { 8 | addTemplate = nuxt.moduleContainer.addTemplate = jest.fn( 9 | nuxt.moduleContainer.addTemplate 10 | ) 11 | } 12 | ({ nuxt } = (await setup(loadConfig(__dirname, 'prod'), { beforeNuxtReady }))) 13 | }, 60000) 14 | 15 | afterAll(async () => { 16 | await nuxt.close() 17 | }) 18 | 19 | test('render', async () => { 20 | const html = await get('/') 21 | expect(html).toContain('Works!') 22 | }) 23 | 24 | test('$ga should be defined', async () => { 25 | const window = await nuxt.renderAndGetWindow(url('/')) 26 | expect(window.$nuxt.$ga).toBeDefined() 27 | }) 28 | 29 | test('option id', () => { 30 | expect(addTemplate).toBeDefined() 31 | const call = addTemplate.mock.calls.find(args => args[0].src.includes('plugin.js')) 32 | expect(call).toBeDefined() 33 | const options = call[0].options 34 | expect(options.id).toBe('UA-XXX') 35 | }) 36 | }) 37 | -------------------------------------------------------------------------------- /types/index.d.ts: -------------------------------------------------------------------------------- 1 | import type Vue from 'vue' 2 | import type { default as VueAnalytics, InstallOptions } from 'vue-analytics' 3 | import './vuex' 4 | 5 | declare module '@nuxt/vue-app' { 6 | interface Context { 7 | $ga: VueAnalytics 8 | } 9 | interface NuxtAppOptions { 10 | $ga: VueAnalytics 11 | } 12 | } 13 | 14 | // Nuxt 2.9+ 15 | declare module '@nuxt/types' { 16 | interface Context { 17 | $ga: VueAnalytics 18 | } 19 | 20 | interface NuxtAppOptions { 21 | $ga: VueAnalytics 22 | } 23 | 24 | interface Configuration { 25 | googleAnalytics?: InstallOptions 26 | } 27 | } 28 | 29 | declare module 'vue/types/vue' { 30 | interface Vue { 31 | $ga: VueAnalytics 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /types/vuex.d.ts: -------------------------------------------------------------------------------- 1 | import type VueAnalytics from 'vue-analytics' 2 | 3 | declare module 'vuex' { 4 | interface Store { 5 | $ga: VueAnalytics, 6 | } 7 | } 8 | --------------------------------------------------------------------------------