How to pass custom user dimension in Google Analytics 4 via VueJS application?

Question

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.

Emunctory

The "age" dimensions in User scope from your "user scoped custom dimension setup" could be tagged by this.$gtag.query('set', 'user_properties', { age_dimension: '35' }). You have this tagging example: this.$gtag.event('age_dimension', { age: 35 }). This tagging specifies the event name is age_dimension, the event parameter is age, and the event parameter age's value is 35. – Undulant

@Undulant Its not working i tried that. – Oreilly

@Undulant It is giving this error Argument of type "set" is not assignable to parameter of type "event" on using this.$gtag.query('set', 'user_properties', { age_dimension: '35' }) – Oreilly

Answer 1

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?

Undulant

Solution provided by you is not working. By mistake I gave bounty to your answer. – Oreilly

Getting this error while trying to use the gtag.query ` Argument of type '"set"' is not assignable to parameter of type '"event"'` – Oreilly

Answer 2

In the vueJs file script, 

<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'GA_MEASUREMENT_ID');
</script>

Replace GA_MEASUREMENT_ID with your actual Google Analytics 4 Measurement ID.

Add the custom dimensions using the below code:

gtag('set', {'user_properties': {'custom_dimension_name': 'custom_dimension_value'}});

Souvaine