Gtag, access user-id config inside redux-beacon, React

[MatteoGioioso]

This is a...

• 🪲 Bug Report
• 🚀 Feature Request
• 📜 Documentation Request

Which version of Redux Beacon are you using?

• v 2.0.5

Which target(s) are you using?

• Google Analytics
• Google Analytics (gtag)
• React Native Google Analytics
• Google Tag Manager
• React Native Google Tag Manager
• Amplitude
• Segment
• Other/Third Party: ...(please specify here)

---

...Describe the feature or documentation you wish you had.
Hello

I would like to track the user_id with gtag

<!-- Global site tag (gtag.js) - Google Analytics -->
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'TRACKING-D', {
  	'user_id': 'USER_ID'	// Please set the ID of the logged-in user to "USER_ID"
  });
</script>

I am using React and I unfortunately cannot access my the currently logged user_id in my index.html.
Is is possible to set the user_id inside redux-beacon?
Something like this perhaps:
GoogleAnalyticsGtag(trackingId, {user_id: 'USER_ID'});

If not, is it possible to add this feature?

Thanks

Can you help out?

• 🌟 I am a legend and can get started on a pull request right away given the go-ahead.
• ⭐ I am a superstar and would like to help out given some guidance.
• 😞 I won't be able to help out on this one.

[ttmarek]

Hi @MatteoGioioso.

Thanks for taking the time to open up a feature request!

We don't currently have that feature, but I'm totally open to adding it in. Here's what I'm thinking as an implementation plan:

In https://github.com/rangle/redux-beacon/blob/master/packages/google-analytics-gtag/src/google-analytics-gtag.ts

Add a line like this on L21:

const userTracking = events.filter(event => event.type === 'userId');

This isn't the most efficient way to go about this, but I'd like to be consistent with the way the target has already been written. We aren't adding much logic here, so I'm okay with it.

Then anywhere below that line (could be before, after, or between the pageTracking and eventTracking loops). We'd add a loop for userTracking:

userTracking.forEach(event => {
  gtag('config', defaultTrackingId, {
    'user_id': event.userId
  });
});

we could probably live without the defaultTrackingId part, but I'm adding it in to remain consistent with Google's docs here: https://developers.google.com/analytics/devguides/collection/gtagjs/cookies-user-id

Then a unit test to verify that it'll work:
https://github.com/rangle/redux-beacon/blob/master/packages/google-analytics-gtag/src/__tests__/google-analytics-gtag.test.ts

describe('userTracking', () => {
  test("given { type: 'userId', userId: 'some user id' }", () => {
    const events = [{ type: 'userId', userId: 'some user id' }];
    const target = GoogleAnalyticsGtag('GA_TRACKING_ID');

    target(events);

    expect(window.gtag).toHaveBeenCalledWith('config', 'GA_TRACKING_ID', { user_id: 'some user id' });
 });
});

We should probably also add an event helper to make the feature easy to use.

https://github.com/rangle/redux-beacon/blob/master/packages/google-analytics-gtag/src/event-helpers.ts

const trackUserId = (
  eventDef: EventDefinition<{
    userId: string;
  }>
): EventDefinition => (action, prevState, nextState) => {
  const event = eventDef(action, prevState, nextState);
  return {
    type: 'userId',
    userId: event.userId,
  }
};

Last but not least, we'll need docs!

[MatteoGioioso]

@ttmarek So, as I have understood correctly you want to add it as an event?

For now I have monkey patched like this

const userSession = trackEvent((action, prevState, nextState) => {
  window.gtag('set', {'user_id': action.payload.user.username});
  return {};
});

Also another question. Instead of gtag('config',...)' could we use gtag('set',...) ?

userTracking.forEach(event => {
  gtag('set',  {'user_id': event.userId });
});

I could try to make a pull request, later this week, if you are ok. Thanks

[ttmarek]

Hey @MatteoGioioso.

Thanks for getting back to me. Yeah, I think it makes more sense as an event no? In that way we could set the user_id on the fly. If we didn't set it as an event then there'd be no way to switch a user right?

The docs use config, is there a particular reason why set is better?