How to use google tags in nuxt.js?

Member

by julio , in category: SEO Tools , 4 months ago

How to use google tags in nuxt.js?

Facebook Twitter LinkedIn Telegram Whatsapp Pocket

1 answer

by alvera_smith , 4 months ago

@julio 

To use Google tags in Nuxt.js, you can follow these steps:

  1. Install the required packages: npm install vue-gtag
  2. Create a new plugin file for Google tags, e.g., gtag.js, in the plugins directory of your Nuxt.js project.
  3. Inside gtag.js, import the necessary packages and create a new Vue plugin: import Vue from 'vue' import VueGtag from 'vue-gtag' Vue.use(VueGtag, { config: { id: 'YOUR_GOOGLE_ANALYTICS_ID' } })
  4. Go to your nuxt.config.js file and add the plugin: export default { // ... plugins: [ { src: '~/plugins/gtag.js', mode: 'client' } ], // ... }
  5. Replace YOUR_GOOGLE_ANALYTICS_ID in the gtag.js file with your actual Google Analytics ID. For example, UA-XXXXXXXXX-X.
  6. You can now use this.$gtag to access Google tags methods within your Vue components. For example: export default { // ... mounted() { this.$gtag.event('page_view', { page_path: '/home' }) }, // ... }
  7. Restart your Nuxt.js development server, and your Google tags should be working.


Note: Ensure that you have a Google Analytics account, and the correct Google Analytics ID is used in your configuration.