Reply To: Guide to integrating Google Analytics 4 with Vue.js 2

[Logan]

Sure, I can certainly break that down for you!

You’ve actually got a solution already: vue-gtag version 1.16.1 will work with GA4 in Vue2. You can install it easily in your terminal by typing npm install vue-gtag@1.16.1.

After it’s installed, you need to configure vue-gtag in your main.js:

First things first, import Vue, VueGtag, and your router (assuming that you already implemented a router).

Then, in the same main.js file, you use Vue.use to call VueGtag with your personal analytics ID where ‘G-XXXXXXXXXX’ is. The 'send_page_view': false parameter ensures a page view isn’t automatically sent when a route is navigated to.

Here’s how the setup looks:

`javascript
import Vue from ‘vue’
import VueGtag from ‘vue-gtag’
import router from ‘@/router’

// …

Vue.use(VueGtag, {
config: {
id: ‘G-XXXXXXXXXX’,
params: {
send_page_view: false
}
}
}, router)

// …
`

Swap out ‘G-XXXXXXXXXX’ with your actual GA4 ID, and you’re all set!
Keep in mind spaces or any irregular characters in your id might lead to errors, so double check your quotes and commas.

Good luck, let me know if you have any other questions!