More Premium Hugo Themes Premium Nuxt Themes

Nuxt Gtag

Google Analytics & Ads integration made easy

Nuxt Gtag

Google Analytics & Ads integration made easy

Github Stars Github Stars: 329
Last Commit Last Commit: Jan 14, 2025 -
First Commit Created: Dec 18, 2023 -
default image

Overview:

The Nuxt Gtag module is a Nuxt module that allows you to integrate Google Analytics 4 into your Nuxt application. It has several key features including no dependencies except for Google’s gtag.js, manual consent management for GDPR compliance, the ability to track events manually with composables, fully typed gtag.js API, SSR-ready, and .env file support.

Features:

  • No dependencies except Google’s gtag.js: The Nuxt Gtag module does not have any dependencies other than Google’s gtag.js, making it lightweight and efficient.
  • Manual consent management for GDPR compliance: This module allows you to manually manage consent for tracking, ensuring that your application is compliant with GDPR regulations.
  • Track events manually with composables: The module provides composables that allow you to track events manually, giving you more control over the tracking process.
  • Fully typed gtag.js API: The gtag.js API is fully typed, providing better developer experience and reducing the risk of errors.
  • SSR-ready: The module is SSR-ready, meaning it works well with server-side rendered applications.
  • .env file support: You can configure the module using the .env file in your project, making it easier to manage configuration options.

Installation:

To install the Nuxt Gtag module, follow these steps:

  1. Add the nuxt-gtag module to the modules section of your Nuxt configuration.
  2. Provide your Google Analytics measurement ID.
  3. Enable the Enhanced measurement feature in Google Analytics.
  4. Configure the module options using the gtag key in your Nuxt configuration.
  5. Optionally, set the initialConsent option to false if you want to disable tracking by default.
  6. Use the provided composables to access the gtag.js instance and manage consent.

Here is an example code snippet to add the nuxt-gtag module to your Nuxt configuration:

export default {
  modules: [
    'nuxt-gtag',
  ],
  gtag: {
    id: 'YOUR_MEASUREMENT_ID',
  },
}

Summary:

The Nuxt Gtag module is a useful tool for integrating Google Analytics 4 into your Nuxt application. It provides a simple and efficient way to track events, manage consent, and configure your Google Analytics settings. With its SSR compatibility and .env file support, it is a versatile and flexible solution for adding analytics tracking to your Nuxt application.