Skip to content

Commit baf3ba8

Browse files
mayashavinatinux
mayashavin
and
atinux
authored
docs: migration to Nuxt Content Docs (#90)
* docs: migrate to new docs * docs: add theming and pages * chore(docs): lint comma * fix(docs): add asyncID and fix README * docs: improvements * fix: links and readme Co-authored-by: Sébastien Chopin <seb@nuxtjs.com>
1 parent f87704f commit baf3ba8

22 files changed

+10282
-76
lines changed

‎README.md‎

Lines changed: 16 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,91 +1,31 @@
1-
# Google Analytics
1+
# @nuxtjs/google-analytics
2+
3+
[![@nuxtjs/google-analytics](https://google-analytics.nuxtjs.org/preview.png)](https://google-analytics.nuxtjs.org)
24

35
[![npm version][npm-version-src]][npm-version-href]
46
[![npm downloads][npm-downloads-src]][npm-downloads-href]
57
[![Github Actions CI][github-actions-ci-src]][github-actions-ci-href]
68
[![Codecov][codecov-src]][codecov-href]
79
[![License][license-src]][license-href]
810

9-
> Google Analytics integration for Nuxt.js with [vue-analytics](https://github.com/MatteoGabriele/vue-analytics)
10-
11-
[📖 **Release Notes**](./CHANGELOG.md)
12-
13-
## Setup
14-
15-
1. Add `@nuxtjs/google-analytics` dependency to your project
16-
17-
```bash
18-
yarn add --dev @nuxtjs/google-analytics # or npm install --save-dev @nuxtjs/google-analytics
19-
```
20-
21-
2. Add `@nuxtjs/google-analytics` to the `buildModules` section of `nuxt.config.js`
22-
23-
```js
24-
export default {
25-
buildModules: [
26-
['@nuxtjs/google-analytics', {
27-
id: 'UA-12301-2'
28-
}]
29-
]
30-
}
31-
```
32-
33-
: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`.
34-
35-
### Using top level options
36-
37-
```js
38-
export default {
39-
buildModules: [
40-
'@nuxtjs/google-analytics'
41-
],
42-
googleAnalytics: {
43-
id: 'UA-12301-2'
44-
}
45-
}
46-
```
47-
48-
### Runtime Config
49-
50-
You can use [runtime config](https://nuxtjs.org/guide/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.
51-
52-
```js
53-
export default {
54-
buildModules: [
55-
'@nuxtjs/google-analytics'
56-
],
57-
58-
googleAnalytics: {
59-
id: 'UA-12301-2', // Used as fallback if no runtime config is provided
60-
},
61-
62-
publicRuntimeConfig: {
63-
googleAnalytics: {
64-
id: process.env.GOOGLE_ANALYTICS_ID
65-
}
66-
},
67-
}
68-
```
69-
70-
## Usage
11+
> [Google Analytics](https://analytics.google.com/analytics/web/) integration for [Nuxt](https://nuxtjs.org) using [vue-analytics](https://github.com/MatteoGabriele/vue-analytics).
7112
72-
Click [here](https://matteogabriele.gitbooks.io/vue-analytics/) for all options and features of vue-analytics
13+
[✨ &nbsp;Release Notes](./CHANGELOG.md)
14+
[📖 &nbsp;Documentation](https://google-analytics.nuxtjs.org)
7315

74-
Differences between vue-analytics and the Nuxt.js implementation:
16+
## Features
7517

76-
- The router instance is already added out of the box (read [here](https://github.com/MatteoGabriele/vue-analytics/blob/master/docs/page-tracking.md#disable-page-auto-tracking) if you need to disable it)
77-
- The `id` and `ua` properties have the exact same behaviour. The `ua` property has been added for backwards compatibily with previous releases
78-
- You can disable module for `nuxt dev` by setting `dev: false` option in module options
79-
- 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`:
18+
- Automatic page tracking
19+
- Event batching
20+
- User timings
21+
- Screen view
22+
- Multiple domain ID
23+
- Automatic Google Analytics script loading
24+
- E-commerce support
8025

81-
```js
82-
debug: {
83-
enabled: true,
84-
sendHitTask: true
85-
}
86-
```
26+
[📖 &nbsp;Read more](https://google-analytics.nuxtjs.org)
8727

88-
## Development
28+
## Contributing
8929

9030
1. Clone this repository
9131
2. Install dependencies using `yarn install` or `npm install`

‎docs/.env.example‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
2+
# Create one with no scope selected on https://github.com/settings/tokens/new
3+
GITHUB_TOKEN=

‎docs/.gitignore‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
node_modules
2+
*.iml
3+
.idea
4+
*.log*
5+
.nuxt
6+
.vscode
7+
.DS_Store
8+
coverage
9+
dist
10+
sw.*
11+
.env

‎docs/README.md‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
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).

‎docs/content/en/index.md‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
---
2+
title: Introduction
3+
description: 'What is 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+
<img src="/preview.png" class="light-img" width="1280" height="640" alt=""/>
17+
<img src="/preview-dark.png" class="dark-img" width="1280" height="640" alt=""/>
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+
<list :items="features"></list>
26+
27+
<p class="flex items-center">Enjoy light and dark mode:&nbsp;<app-color-switcher class="inline-flex ml-2"></app-color-switcher></p>

‎docs/content/en/options.md‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
---
2+
title: Options
3+
description: a list of configuration options for Google Analytics 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+
<alert type="info">
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+
</alert>
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+
<alert type="info">
43+
44+
For backwards compatibilities, use `ua` instead.
45+
46+
</alert>
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+
<alert type="warning">
68+
69+
If both `id` and `asyncID` are present, the returned value from `asyncID` will override the value of `id`.
70+
71+
</alert>
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+
<alert type="info">
114+
115+
For a full list of options, please see [Vue Analytics](https://matteogabriele.gitbooks.io/vue-analytics) documentation.
116+
117+
</alert>

0 commit comments

Comments
 (0)