Add PageView events for Google Analytics 4

[batpad]

To get pageview events in Google Analytics 4, we need to explicitly send a pageview Analytics event to the GA API. This blog post explains roughly what code needs to do: https://www.kevinleary.net/blog/unique-pageviews-google-analytics-4/

There seem to be some react-ga4 plugins like https://www.npmjs.com/package/react-ga4 .

My hope is this should be fairly easy to wire up - add the react plugin and ideally it has some automatic handling for sending pageview events on route navigations.

@frozenhelium do you folks have any experience with working with google analytics 4 in a react app?

This would be nice to look into - it seems like with Analytics 4, the default page view metric no longer works, and needs some custom code to explicitly send pageview events, which means a really important metric for the site - unique page views, no longer works.

cc @tovari

[thenav56]

Update.

For each page route change in the front end, this needs to be triggered.

gtag('event', 'unique_page_views', {
    page_location: location.href,
    page_referrer: document.referrer,
});

Then the custom event are available in google analytics and then we should be able to use them in report generation used by go-analytics

Filter: eventName = unique_page_views
Dimensions: eventName, pagePath
Metrics: eventCount

NOTE: It can take up to 48 hours for data to be visible in google analytics. For a quick view, use realtime or debug view.

Ref:

• Report
  • Dimensions: https://developers.google.com/analytics/devguides/reporting/data/v1/api-schema#dimensions
  • Metrics: https://developers.google.com/analytics/devguides/reporting/data/v1/api-schema#metrics
• Custom events:
  • https://support.google.com/analytics/answer/12229021?hl=en
  • https://developers.google.com/analytics/devguides/collection/ga4/events?client_type=gtag