Remove GA analytics.js add gtag.js script #1508
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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: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://user-images.githubusercontent.com/717315/164672866-a0b073ba-4eea-4709-8b5b-56d78c682ca8.png)
https://support.google.com/analytics/answer/9216061
If that's not an option, then you should at least turn
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.