Regresar

Agregar Google Analytics a una aplicación de Nuxt3

por Jorge, 24-Mar-2023

Nuxt3 ha introducido muchas mejoras, una de las cuales es el uso de plugins en la aplicación. Esto permite una fácil integración de herramientas y servicios de terceros, como Google Analytics.

Para agregar Google Analytics a tu aplicación de Nuxt3, sigue estos sencillos pasos:

Instala el paquete vue-gtag-next ejecutando el siguiente comando:


npm install --save-dev vue-gtag-next

Crea un nuevo archivo en la carpeta plugins llamado vue-gtag.client.js.

Agrega el siguiente código al archivo de plugin:


import VueGtag from 'vue-gtag-next'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueGtag, {
    property: {
      id: 'GA_MEASUREMENT_ID'
    }
  })
})

Reemplaza 'GA_MEASUREMENT_ID' con tu ID de medición de Google Analytics real.

Cuando ejecutes tu sitio web en el cliente, verás que Google Analytics se ha importado a tu sitio web.

Nuxt leerá automáticamente los archivos en tu directorio de plugins y los cargará. Puedes definir qué plugins se usarán en el servidor o en el cliente agregando un sufijo de .server o .client al nombre del archivo. Estos se registran automáticamente en tu aplicación de Nuxt, por lo que ya no es necesario definirlos en el archivo nuxt.config.

El uso de plugins en Nuxt3 facilita la integración con servicios externos, como Google Analytics, y mejora el rendimiento y la escalabilidad general de tu aplicación.