Setting Up Google Analytics in Nuxt 3 App

How to connect google analytics to Nuxt3 app?

In today's data-driven world, understanding your website's analytics is crucial for making informed business decisions. By implementing Google Analytics in your Nuxt 3 app, you gain access to powerful metrics and user behavior insights. This article provides a detailed, step-by-step tutorial on how to set up Google Analytics seamlessly in your Nuxt 3 application, allowing you to measure key performance indicators and optimize your app's performance.

Introduction:

Welcome to our comprehensive guide on setting up Google Analytics in your Nuxt 3 app! As an ambitious developer or website owner, you understand the importance of tracking and analyzing user behavior to enhance your app's performance. Google Analytics is an invaluable tool that offers a wealth of data and insights to help you make data-driven decisions.

Nuxt 3, the latest version of the popular Vue.js framework, provides an excellent foundation for building modern and performant web applications. By integrating Google Analytics into your Nuxt 3 app, you can gain a deeper understanding of your users, track conversions, measure engagement, and identify areas for improvement.

In this article, we will walk you through the step-by-step process of setting up Google Analytics in your Nuxt 3 app. Whether you're a seasoned developer or just starting your journey with Nuxt, this guide will provide you with the knowledge and tools you need to successfully implement analytics tracking in your application.

So, let's dive in and unlock the power of Google Analytics to gain valuable insights about your Nuxt 3 app's performance!

Installation

To add google analytics to your nuxt app you have to create Google Tag manager account first, than create Google Analytics account and add new property for your site.

Once you created property and have your property id we can move on.

To integrate google analytics we will use Vue Google Tag Manager Package

Install package:

yarn add --dev @gtm-support/vue-gtm

Then create new file named vue-gtm.client.ts in plugins directory. Paste that code into this newly created file:

import { createGtm } from '@gtm-support/vue-gtm'

export default defineNuxtPlugin((nuxtApp) => {
  // run only on production
  if (useRuntimeConfig().public.appEnv !== 'production') return
  nuxtApp.vueApp.use(createGtm({
    id: 'GTM-XXXXXXX', // paste your GTM id here
    defer: false,
    compatibility: false,
    enabled: true,
    debug: true,
    loadScript: true,
    vueRouter: useRouter(),
    trackOnNextTick: false,
  }))
})

Nuxt will autoimport created plugin.

Now move to your gtm account and click New tag, click Tag configuration and from list choose Google Analytics: GA4 Configuration, paste your Google Analytics property id into measurement id text field.

In trigger section choose trigger called All pages of type Page view

Save your tag, Submit changes and publish them.

Congratulations, you've just set up Google Analytics 🎉🎉🎉