Nuxt Page Views Module

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

# 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

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.
2. Create a new project or select an existing project.
3. Enable the Google Analytics API for your project:
4. Go to the APIs & Services dashboard, click on "Enable APIs and Services", and search for "Google Analytics API". Then click "Enable".
5. Create credentials for your project:
6. 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.
7. Make sure to add the appropriate scopes for the API you're using (in this case, https://www.googleapis.com/auth/analytics.readonly).
8. 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:

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:

<script lang="ts" setup>
const views = await usePageViews()
</script>

<template>
  <div>
    <div>Blog views: {{ views }}</div>
  </div>
</template>

You can also pull the counts for other paths:

<template>
  <div>
    <div>Page views: {{ views }}</div>
    <div>Blog views: {{ blogViews }}</div>
    <div>Project List views: {{ projectViews }}</div>
  </div>
</template>

<script setup>
const views = await usePageViews()
const blogViews = await usePageViews("/blog")
const projectViews = await usePageViews("/projects")
</script>

Development

# 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

License

This plugin is licensed under the MIT License. See the LICENSE file for more information.