0
419
ViewsHow to pass custom user dimension in Google Analytics 4 via VueJS application?
I have a VueJS SPA in which I have user specific information which I want to send in GA once user logged-in as a custom dimension for each and every hit.
I have used VueGtag plugin to integrate GA 4 with my SPA.
Vue.use(VueGtag, {
config: {
id: "G-XXXXXXXXXX" // Data stream measurement ID
},
}, router);
User scoped custom dimension setup:
vue-gtag plugin provides a way to send custom dimensions via customMap like below :
this.$gtag.customMap({ 'dimension2': 'age' })
this.$gtag.event('age_dimension', { age: 35 })
Also tried as per the gtag documentaion for GA4:
this.$gtag.query('set', { dimension2: 'age' })
this.$gtag.event('age_dimension', { age: 35 })
With above mentioned approaches. I can see the event data in Realtime but it is showing (not set) if looking in Engagement tab along with some other class. For Ex: Pages and Screens.
1 answers
Answer question0
User-specific information is best tagged by creating a user-property in tagging. In GA4 reporting, a user-property is reported as a User-scoped custom dimension (Learn more about Custom dimensions and metrics in GA4).
Here's an example of tagging a user_location user-property via gtag.js in GA4 on Optimize Smart's GA4 User Properties Tutorial.
Here's an example of tagging a favorite_composer, favorite_instrument, and season_ticketholder user-properties via gtag.js in GA4 on Tips for upgrading from analytics.js to gtag.js.
The vue-gtag gives full access to gtag API via the query method (vue-gtag's reference on query). If favorite_composer is the "user specific information which I want to send in GA once user logged-in as a custom dimension for each and every hit", you can accomplish that with code similar to:
this.$gtag.query('set', 'user_properties', {
favorite_composer: 'Mahler'
})
Does this solve your problem?