Vue.js - Google Analytics UTM Tracking. Need Help.

So, I have a Vue.js application with router. I've set up "vue-gtag" plugin, to enable page tracking. Now I need to track UTM source in my Google Analytics. But it does not work. What is worse, I did not find any information on Google regarding this problem. I really need to track UTM source and medium.
If you have any experience with Vue.js and Analytics tracking, please share your secrets. Thank you

I'm not familiar with Vue and vue-tag but did you try this?

https://matteo-gabriele.gitbook.io/vue-gtag/v/v2.0.0/auto-tracking

Or, do you need to set pageTrackerUseFullPath: true?

https://matteo-gabriele.gitbook.io/vue-gtag/plugin-options

cnick79 said:

I'm not familiar with Vue and vue-tag but did you try this?

https://matteo-gabriele.gitbook.io/vue-gtag/v/v2.0.0/auto-tracking

Or, do you need to set pageTrackerUseFullPath: true?

https://matteo-gabriele.gitbook.io/vue-gtag/plugin-options

Click to expand...

I think It is working, but not in real-time for some reason.

Well, I'm not familiar with Vue. But when you setup a campaign (Ads, Email, etc...) you would set UTMs on the URL for the campaign (source, medium, name). So if your campaign triggers you should be able to get the URLs parameters in real-time using JS which would contain source and medium values. Something like this:

wbalma said:

Well, I'm not familiar with Vue. But when you setup a campaign (Ads, Email, etc...) you would set UTMs on the URL for the campaign (source, medium, name). So if your campaign triggers you should be able to get the URLs parameters in real-time using JS which would contain source and medium values. Something like this:

Code:

const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
console.log(urlParams.get("utm_source"), urlParams.get("utm_medium"))

Click to expand...

It turns out, Analytics does not show it in real time. But I can see it after a day

Hey there!

For some reason, I still haven't figured out, vue-gtag is always a step behind the user. It mostly happens in the local environment; however, the production environment is not 100% either.

So if your customer is landed on your home page from Google or somewhere, you'd like to see the pageview event right away. However, in the case of this library, unless he moves to another page, you won't get the pageview event.

As a workaround, I'd suggest disabling the auto-tracking option and implementing the pageview event manually. You can also dig deeper into the library itself and hopefully find the issue.