https://github.com/L422Y/nuxt-pageviews
Nuxt module that provides page view counts using Google Analytics Data API (GA4)
https://github.com/L422Y/nuxt-pageviews
analytics google-analytics-api nuxt nuxt-module typescript vue
Last synced: 5 months ago
JSON representation
Nuxt module that provides page view counts using Google Analytics Data API (GA4)
- Host: GitHub
- URL: https://github.com/L422Y/nuxt-pageviews
- Owner: L422Y
- Created: 2023-02-28T11:38:07.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-01-03T00:49:39.000Z (about 2 years ago)
- Last Synced: 2024-12-05T00:01:48.958Z (about 1 year ago)
- Topics: analytics, google-analytics-api, nuxt, nuxt-module, typescript, vue
- Language: TypeScript
- Homepage:
- Size: 385 KB
- Stars: 24
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# Nuxt Page Views Module
[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]
[![Nuxt][nuxt-src]][nuxt-href]
This is a module for Nuxt that provides page views tracking using Google Analytics Data API.
Built with Nuxt/Vue 3, TypeScript, and H3.
### Features
- Quick setup if you're already running Google Analytics
- SSR Support
- Cached responses from the Google Analytics Data API
- Expose `usePageViews()` composable
## Installation
1. Add `nuxt-pageviews` dependency to your project
```bash
# Using pnpm
pnpm add -D nuxt-pageviews
# Using yarn
yarn add --dev nuxt-pageviews
# Using npm
npm install --save-dev nuxt-pageviews
```
2. Add `nuxt-pageviews` to the `modules` section of `nuxt.config.ts`
```js
export default defineNuxtConfig({
modules: [
'nuxt-pageviews'
]
})
```
## Configuration
### Google Analytics Setup
You will need to configure a new service account, and add its email address to the GA property you would like to access.
Here are the steps to set up credentials for use with @google-analytics/data:
1. Go to the [Google Cloud Console](https://console.cloud.google.com/).
1. Create a new project or select an existing project.
1. Enable the Google Analytics API for your project:
2. Go to the APIs & Services dashboard, click on "Enable
APIs and Services", and search for "Google Analytics API". Then click "Enable".
1. Create credentials for your project:
2. Go to the "Credentials" page in the APIs & Services dashboard and
click "Create credentials". Select "Service Account" as the credential type and enter the required information.
3. Make sure to add the appropriate scopes for the API you're using (in this case,` https://www.googleapis.com/auth/analytics.readonly`).
1. Once you've created the service account, download the JSON key file for the service account. This file will contain
the private key that you'll need to authenticate with the API, as well as the service account "email" address you will need to add as a user to your Analytics property.
### Nuxt Configuration
To use this plugin, you need to provide a Google service account credentials file, a Google Analytics property ID, and
an endpoint for the API that will serve the data.
In your `nuxt.config.ts` file, configure the options for the module:
```ts
export default defineNuxtConfig({
pageViews: {
credentialsFile: "./src/creds.json",
// OR
credentials: {/* contents of credentials file */},
propertyId: "12345678",
endpoint: "/api/views",
preload: true, // preload analytics data on startup (default: true)
exact: false, // if exact is false, the module will merge urls that are the same when the trailing slash is removed
startDate: "2021-01-01", // Get data starting at this date
cacheTimeout: 15 * 60, // Cache half-life (in seconds)
debug: false // Debug mode, will show timings and refreshes
}
})
```
## Using
You can use the `usePageViews` composable to access the page views count for a specific page:
```vue
const views = await usePageViews()
Blog views: {{ views }}
```
You can also pull the counts for other paths:
```vue
Page views: {{ views }}
Blog views: {{ blogViews }}
Project List views: {{ projectViews }}
const views = await usePageViews()
const blogViews = await usePageViews("/blog")
const projectViews = await usePageViews("/projects")
```
## Development
```bash
# Install dependencies
npm install
# Generate type stubs
npm run dev:prepare
# Develop with the playground
npm run dev
# Build the playground
npm run dev:build
# Run ESLint
npm run lint
# Run Vitest
npm run test
npm run test:watch
# Release new version
npm run release
```
## [✨ Change Log](/CHANGELOG.md)
## License
This plugin is licensed under the MIT License. See the LICENSE file for more information.
[npm-version-src]: https://img.shields.io/npm/v/nuxt-pageviews/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-version-href]: https://npmjs.com/package/nuxt-pageviews
[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-pageviews.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-downloads-href]: https://npmjs.com/package/nuxt-pageviews
[license-src]: https://img.shields.io/npm/l/nuxt-pageviews.svg?style=flat&colorA=18181B&colorB=28CF8D
[license-href]: https://npmjs.com/package/nuxt-pageviews
[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
[nuxt-href]: https://nuxt.com