Article

Introduction: Metrics and analytics are essential parts of modern web development. Understanding user interaction helps developers make better decisions to improve performance and user experience. One of the most popular tools for this is Google Analytics 4 (GA4).

In this article, I’ll walk you through integrating GA4 into a Nuxt 3 application using the nuxt-gtag module.

What is nuxt-gtag?

nuxt-gtag is the officially recommended Nuxt module to integrate Google’s Global Site Tag (gtag.js) into Nuxt 3. It simplifies the GA4 integration process without requiring manual script tags or direct head injections.

Prerequisites

An active Nuxt 3 project
A Google Analytics 4 account and Measurement ID (e.g., G-XXXXXXX)

      // Step 1: Install nuxt-gtag
// Open the terminal in your project root and run:
// yarn add nuxt-gtag
// or if you're using npm:
// npm install nuxt-gtag

// Step 2: Add the Module to nuxt.config.ts
// After installation, open the nuxt.config.ts file and add the following configuration:

export default defineNuxtConfig({
  modules: ['nuxt-gtag'],
  gtag: {
    id: 'G-XXXXXXXXXX', // Replace with your GA4 Measurement ID
    config: {
      anonymize_ip: true,   // Hides the user's IP address
      send_page_view: true  // Enables automatic page view tracking
    },
    debug: false // Set to true to see logs in the console during development
  }
})

// Step 3: Restart the Nuxt Server
// Once the configuration is done, restart the Nuxt development server:
// yarn dev
// or:
// npm run dev

// Step 4: Manually Track Events (Optional)
// To track custom events like button clicks or other user actions,
// you can use the useGtag() composable function.

const gtag = useGtag()
gtag?.event('click', {
  event_category: 'button',
  event_label: 'CTA Hero',
  value: 1
})

// You can place the code above inside a Vue component's event handler like @click.

// When to Use Debug Mode?
// Debug mode shows gtag logs in the browser console.
// Enable this only in development:
// debug: process.env.NODE_ENV !== 'production'

Additional Tips

send_page_view: true handles automatic page tracking even with middleware or dynamic routing.
For multilingual apps, adjust event labels according to user language.
Always verify tracking data in your GA4 dashboard.

Conclusion

The nuxt-gtag module makes it easy to integrate GA4 into Nuxt 3 apps without manually injecting scripts. It’s a powerful way to understand user behavior and improve app performance.

If you need help with advanced tracking like funnels, e-commerce, or custom dimensions, feel free to reach out or comment.

How to Integrate Google Analytics (GA4) in Nuxt 3 Using nuxt-gtag

Introduction