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

Remove GA analytics.js add gtag.js script #1508

Merged
merged 6 commits into from
May 19, 2022
Merged

Conversation

Gnito
Copy link
Contributor

@Gnito Gnito commented Apr 22, 2022

Google analytics script changed

Universal Analytics (analytics.js + measurement id starting with "UA" prefix) is sunsetting in 2023.

This PR removes UA integration and adds Google Analytics 4 (GA4) instead:
gtag.js script + it expects measurement id starting with "G-" prefix.

In addition, the trackPageView method of analytics handlers now gets 2 parameters:

  • The first parameter still holds the canonicalPath of the (next) page.
  • The second parameter is a new one: it contains information about the previous path.
    This is needed for GA4, which by default always sends page_view event on page load, but in-app navigation after that should be sent manually. If the previous path is non-existent, this manual call should be omitted.

There are some notable issues related to GA4

Enhanced measurements

By default, Enhanced measurements are on. This means that gtag.js adds its own code to all kinds of event sources like links <a>. This seems to be slow code and most likely breaks in-app navigation.

Our links look like normal links but React Router adds its own click event listeners to them and bypasses the default link behavior that causes full page load. With the code attached by GA4, the event handling is too slow and the code probably doesn't prevent the default behavior (which should be prevented - otherwise, the event gets bubbled up to default behavior).

It's probably best to turn Enhanced measurements off.
Screenshot 2022-04-22 at 11 57 56
https://support.google.com/analytics/answer/9216061

If that's not an option, then you should at least turn

  • Outbound clicks events off and
  • Page changes based on browser history events off.

Screenshot 2022-04-22 at 11 35 07

Page title is sent to GA4

This is problematic because FTW's the routing first changes the location and then on a new location it renders the page and URL parameters (path params, search params, hash) are taken into account during rendering.

So, history.pushState happens before the page title (<title>) is rendered. Therefore, we have used setTimeout to give the page 300 milliseconds to render something after the 'LOCATION_CHANGED' action.

@Gnito Gnito force-pushed the remove-ga-add-gtag-script branch 3 times, most recently from e32972b to a4eae11 Compare April 25, 2022 10:19
@Gnito Gnito changed the title Remove ga add gtag script Remove GA analytics.js add gtag.js script Apr 25, 2022
@Gnito Gnito force-pushed the remove-ga-add-gtag-script branch from a4eae11 to 89b9390 Compare May 6, 2022 10:08
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

Successfully merging this pull request may close these issues.

1 participant