Adds support for GA4 properties and load gtag.js instead of analytics.js

[BingWangEd]

I see that under the hood, @analytics/google-analytics loads analytics.js. With Google now making the gtag.js its official JavaScript tagging framework, any plan to update it with gtag?

Happy to contribute.

[BastienBabar]

Turns out, if I am not mistaken, with the new gtag used for for google analytics, the API is different and the current library implementation does not work with GA4. New script snippet to include, the ga function is now gtag, and so on...
Not sure if this requires a brand new plugin or if the existing one could be adapted, but this will be good to have, if not a must.

[BingWangEd]

Based on my research, most of the Universal Analysis (ga) functionalities work with gtag. The syntax is different. For example, adding custom dimensions:

In analytics.js, you can do:

const gaTracker = tracker.get(tracker_name);
gaTracker.set('dimension5', 'custom dimension data');

In gtag it becomes:

gtag('config', 'GA_MEASUREMENT_ID', {
  'custom_map': {'dimension5': 'custom dimension data'}
});

Universal Analysis properties' tracking ID starts with UA and GA4 properties' starts with 'G'. But you can use gtag.js to send data to UA properties.

However, GA4 and UA properties use fundamentally different way to track user interaction. Also some of the ga functions like debugging may not exist in gtag. The safest way is probably to create a new type of plugin for users who want to use the gtag snippet. My guess is sooner or later Google will deprecate ga.

This is a nice library. Happy to create a new PR and help add a new type of plugin like @analytics/google-tag-analytics if people agree on the approach @DavidWells

[DavidWells]

Yeah happy to take contributions on this update.

A couple of questions

• Is this a breaking change from folks current GA implementations? (tons of folks are using this with "old non GA4" sites)
• Is this change for the client-side only? Server implementation uses 'universal-analytics' pkg under the hood. IDK if it needs changing as well.
• Does this impact anything with google tag manager plugin?

Thanks for bringing this up. I missed the GA update announcement

[BastienBabar]

This is not breaking current implementation of GA, but when creating a new property on google analytics, the GA4 property is now the default way. We can still create a "hybrid" version that is creating a universal analytics property along with a GA4 property though (for now). They seem to want to push to upgrade to GA4 in general anyway, including existing accounts I guess.

[BingWangEd]

Is this a breaking change from folks current GA implementations? (tons of folks are using this with "old non GA4" sites)

You have to use gtag.js to track things for new GA4 properties. But you have been using analytics.js for pushing data to UA properties, it does not break anything and for now Google will continue to support both types of properties.

Is this change for the client-side only? Server implementation uses 'universal-analytics' pkg under the hood. IDK if it needs changing as well.

I don't think it matters if it's server or client side. If the property type is GA4, you have to use the gtag.js snippet.

Does this impact anything with google tag manager plugin?

I don't know too much about how that works. I've never used it, but my assumption and based on this answer, if the property type is GA4, you'll need to use these two tags designed for GA4.

I'll work on adding a new type of plugin soon. I'd only have time during the weekend for this. If you haven't heard back from me in three weeks, feel free to check in. If you'd like this to happen on a tighter timeframe, let me know as well.

One thing I noticed about this library, (correct me if I'm wrong) you can only initialize one account with each type of supported platform. Is this correct? This surprised me a bit, as I would think some of these projects might be using multiple GA accounts. So instead of taking in one trackId, it can take an array of trackIds. This is out of scope of this ticket. I'm happy to create a new one addressing this. @DavidWells

[DavidWells]

Sounds good.

One thing I noticed about this library, (correct me if I'm wrong) you can only initialize one account with each type of supported platform. Is this correct?

Nope. You can load multiple GA instances https://getanalytics.io/plugins/google-analytics/#using-multiple-instances

Not every provider plugin supports multiple instances but they could if the underlying analytics provider supports it.

[BingWangEd]

I see. Didn't know this doc existed before. Thanks for creating this neat and well-documented library.

I'm pretty junior. So will need some hand-holding for this project. Hopefully it'll be a good learning experience for me and help mitigate some of the maintaining work of this lib on your side

[sgcullen]

@BingWangEd how are you doing with this? Do shout back if you get stuck or need some help 👍

[BingWangEd]

yes I'm working on it. will let folks know if I run into issues. Hopefully I'll get it done by 11/29 Sunday

[BingWangEd]

Just a headsup that I'm still working on this. Need some more time. But I'm on it~

[BingWangEd]

Hi @DavidWells and folks, some update on this ticket. This is far from being done, but I left some comments/questions here.

In particular, I need to think more about a good api to implement the ga4 properties's parameters that are scoped at three different levels with the corresponding commands: event, config and set. See doc here. More details please see the pr comment.

I'm pretty junior. Any comments/suggestions regarding the code style, infrastructure, the way I set up babel, etc. are welcome. I'll continue to make changes. Thanks~

[nicolaszimmer]

AFAIK the new API doesn't allow to disable protocol checks (they are hardcoded now) thus making it unusable in Electron, Cordova etc. serving pages from file:// That's a major drawback for some people.

[lordlpua]

Hi, sorry how to connect analytics to the new google analytics 4 version?

[BingWangEd]

Sorry I took a break from this project because of another personal project.

Basically the current library doesn't load gtag.js, which is the script you have to use in order to update a GA4 property. Unless there's been another update that I'm not aware of

Give me some time to finish this up. I'll send an official request for review by then

[lordlpua]

Sorry I took a break from this project because of another personal project.

Basically the current library doesn't load gtag.js, which is the script you have to use in order to update a GA4 property. Unless there's been another update that I'm not aware of

Give me some time to finish this up. I'll send an official request for review by then

Thanks!

[mauriciabad]

Why don't we update the library to always use gtag and drop support for analytics.js?
Google is clearly showing that is moving away from it, there's no point on supporting it.
If some dinosaur wants to still use analytics.js, he'll have to use an older version of this plugin.

As an example, many plugins that updated from Webpack 4 to 5, released a new major release and added a message in the README.md saying that to use Webpack 4 you have to use an older version.

[emilio-martinez]

Agreed @mauriciabad — this should just go out as a major version bump in this plugin.

[jjoyce0510]

Bumping the thread. Do we know how big a lift this will be?

[totalhack]

Just wanted to note that universal analytics is now scheduled for sunset on July 1 2023. I believe GA4 properties are completely separate from universal analytics properties and don't share data/history, so folks likely won't want to wait until the last minute to transition.