Unable to set dimensions across all requests

[tloszabno]

Hello,

Previously I used react-ga lib where I could use ReactGA.set command ( in my case it was ReactGA.set({ dimension1: data.userJobTitle}) and after that dimention1 with proper value was added to each event automatically.

I tried to do a similar thing in react-ga4 but it did not work.

What I tried:

ReactGA4.gtag('set', { dimension1: data.userJobTitle})
ReactGA4.set({ dimension1: data.userJobTitle})
ReactGA4.set({ jobTitle: data.userJobTitle})

I also found in some reported issues that I need to add custom dimensions to the initialization phase like that:

ReactGA4.initialize(data.ga4MeasurementId, {
    gaOptions: { userId: data.userId,  },
    gtagOptions: {
      custom_map: {
        dimension1: "jobTitle",   // or "dimension"
        dimension2: "dimension2",
        metric1: "metric1",
        metric2: "metric2",
      }
    }
  })

but after all that combinations I see in the console only clear events without additional dimensions sent. Could you advise me on how I can set this dimension to be added to each event?

[Ofwood]

try sending your custom dimension as props of gtagOptions.

ReactGA.initialize(environment.MeasurementId, { 
  gaOptions: { userId: data.userId,  },
  gtagOptions: { 
    dimension1: "jobTitle",   
    dimension2: "dimension2",
  },
});

[fehbari]

Had the same issue. You can keep your own reference to a dimensions object, and send it with events.

import ReactGA from 'react-ga4';

// Keep this in memory in your module.
let currentDimensions= {};

 // Update only changed properties.
function updateDimensions(dimensions: any) {
    currentDimensions = {
        dimension1: dimensions.dimension1 || currentDimensions.dimension1,
        dimension2: dimensions.dimension1 || currentDimensions.dimension2, 
    }
}

// Send dimensions with events.
function sendEvent(event: any) {
    ReactGA.event(event.action, {
        event_category: event.category,
        event_label: event.label,
        value: event.value,
        non_interaction: event.nonInteraction,
        ...currentDimensions,
    }
}

// Example usage
function clickedButton() {
    updateDimensions({ dimension2: 'new_value' });
    sendEvent({ action: 'clicked_button', category: 'ui', label: 'buttons', value: 1 });
}

[jpyoda]

@fehbari does sending it as an event, the custom dimensions works at session level? What scope are you using in your custom dimensions?

I cannot use my custom dimension when initializing G4, anyone with another solution?

[jpyoda]

@tloszabno there is another PR where they solve the problem.
#34
here is the docs of G4 for more info:
https://support.google.com/analytics/answer/12370404?sjid=11463633870218006008-NA#zippy=%2Cgoogle-tag-websites

[arisyo13]

Was anyone able to log custom dimensions?

[codler]

#2 (comment)