Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

GTM Identify with GA4 #199

Closed
DiogoBatista opened this issue Aug 13, 2021 · 8 comments
Closed

GTM Identify with GA4 #199

DiogoBatista opened this issue Aug 13, 2021 · 8 comments

Comments

@DiogoBatista
Copy link

Hello,

Awesome library!! I've been testing with it but I'm having some difficulties understanding how to use the analytics.identify.

I've been migrating my app to use GA4 using the GTM and I don't seem to be able to see the userID that I'm passing with the identify('USER_ID').

Is this working for the GTM + GA4?

Any idea on how to achieve this? I would like to know recurring users using GA4.

Thanks in advance

@DavidWells
Copy link
Owner

The google-analytics plugin is current for GA3

I haven't had time to look into GA4 yet. (Kind of bummed they pulled an angular on google analytics and made a completely separate product but called it the same thing..)

There is an open PR #125 and thread on GA4 #107

Mapping the analytics methods to GA4 calls should be pretty straightforward https://getanalytics.io/plugins/writing-plugins/#1-provider-plugins

@DiogoBatista
Copy link
Author

It's a weird setup by google now, but tbh the GA4 presents a whole set of new ways to help marketeers and even us developers to understand how the users use our websites, I think it was really a question of maintaining a old product or invest in a new one and from what I saw the GA4 is quite a leap forward.

With that said I wanted your opinion because I was able to have everything working with the page and track methods and the GTAG implementation that you describe in the documentation and I'm very satisfied but as for the identify the only way I see it is to use a custom variable on google tag manager such as a Javascript variable or a 1st party cookie and set that up in the frontend so google tag manager can actually consume it and send it in every event to GA4. This way works but I'm not sure if it's a good implementation vs security.

This might be a good "for now" solution until you crack the new GA4 implementation.

any thoughts?

once again congrats on the library :) love the effort and project, really nicely done 🙌

@DavidWells
Copy link
Owner

It looks like segment's version of this is using window.gtag('set', 'user_properties', userProperties) https://github.com/segmentio/analytics.js-integrations/blob/master/integrations/google-analytics-4/lib/index.js#L220

I'd check out that route.

I'm not sure what GA4's rules are on PII... GA3 was pretty specific about not including PII unless you are paying 100k+ for google analytics 360

@DiogoBatista
Copy link
Author

Thank you for the link.

I explored a bit more the google tag manager and GA4 integrations and with your link I found out that all you have to do is to push the userID to a data layer, so since the GTM plugin of analytics already does the heavy lifting all I had to do is to implement a custom identity function and push to a dataLayer variable the user information, in this case I will start with the userID. I leave my implementation here in case somebody want to take a look.

import Analytics from 'analytics';
import googleTagManager from '@analytics/google-tag-manager';

declare global {
  interface Window {
    Analytics: any;
    dataLayer: any;
  }
}
interface CustomIdentifyInterface {
  payload: { userId: string };
}

// Original google analytics plugin with no alterations
const originalGoogleTagManager = googleTagManager({
  containerId: process.env.REACT_APP_GOOGLE_TAG_MANAGER_ID,
});

function customIdentify({ payload }: CustomIdentifyInterface) {
  if (typeof window !== 'undefined') {
    window.dataLayer.push({ UserID: payload.userId });
  }
}

const myPluginOverrides = {
  identify: customIdentify,
};

const customGoogleTagManager = {
  ...originalGoogleTagManager,
  ...myPluginOverrides,
};

const analytics = Analytics({
  app: 'myapp',
  plugins: [customGoogleTagManager],
});

window.Analytics = analytics;

export default analytics;

In my case I created a DataLayer variable in GTM and then connected this variable with the GA4 tag using the options "Fields to set"
The following links helped me out.
https://support.google.com/tagmanager/answer/7683362?hl=en&ref_topic=9125128
https://support.google.com/tagmanager/answer/9442095
https://support.google.com/analytics/answer/9213390

After all this was hooked up I could see events coming in with the UserID set up.
About the PII from what I understood it cannot be descriptive and identifiable data such as emails, and names or other info in the same category. That's why I generate a public UUID for this sort of scenarios, much similar to the ones you generate in the anonymousId and that's the one I use and send.

Thank you for the help and I will be following the thread and wait for the GA4 implementation, although I do like the whole GTM setup. I will close this issue and once again thank you.

@hodlerhacks
Copy link

Hi @DiogoBatista,

With that said I wanted your opinion because I was able to have everything working with the page and track methods and the GTAG implementation that you describe in the documentation

For now, all I need for my application is to use page and track methods with GA4. I couldn't get it to work with the GA3 example code provided. Would you mind sharing how you got this working? Thanks in advance!

@DiogoBatista
Copy link
Author

Hello @hodlerhacks,
I shared my current implementation above but I am using the GTM instead of the GA3 or GA4.
Check the links I provided in my previous message to get a sense of how to connect the GTM to the GA4, but essentially you have to create the GA4 and the GTM separately, connect them and then using the getanalytics.io you send events to GTM and GTM will do the heavy lifting of routing them to the GA4.

My knowledge in the GTM is quite basic but I believe this is how it's done which could be very handy in case you want to use different GA's for example, GTM is the right spot to do all that.

I would advise you to go this path but you need to research a bit on GTM and it's inner works.

Let me know if you need any help 💪

@hodlerhacks
Copy link

Hi @DiogoBatista, thanks a lot for your quick response! I saw your code above, but I didn't see any page/track method calls, so I thought there was more to it. I don't know anything about GTM, so I'll do some digging and see if I can make it work for me.

@totalhack
Copy link

I also would be interested in seeing an implementation of a custom GA4 plugin that doesn't rely on GTM if anyone has done it already. I try to avoid putting GTM in the path of anything time-sensitive since it adds a bit of delay, so I work with GA directly in any case where page performance is important or other client code might be dependent on GA loading (although that's a little less common and something I try to avoid).

I will look into this myself eventually but it seems like a lot of people have already run into this GA4 support problem since it's been the default for new GA properties for a while...so maybe someone out there has already tackled it and can share an example.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants