GA4 Integration

[nozomione]

Context

Slab: refine.bio Analytics Strategy
Google sheet: Custom Event List

This epic is to track the following issues for GA integration:

1. https://github.com/AlexsLemonade/AdminItems/pull/899
2. Initial GA4 Analytics Configuration #209
3. Implement GA4 custom events script #303
   • Add GA custom event for Dataset to DOM elements #315
   • Add GA custom event for Compendia to DOM elements #316
   • Add GA custom event for Search to DOM elements #317
   • Add GA custom event for Email Subscription to DOM elements #318
   • Add GA custom event for Outbound click to DOM elements #319
   • Add GA custom event for Internal navigation to DOM elements #320
4. Setup GA definitions / filters / collections for Dev in analytics #310
   • 310 - Revise gtag script and add trackExperimentPageClick to search card components #374
5. Setup GA definitions / filters / collections for Staging and Production in analytics  #309
6. GA4 Production Deploy #312

Problem or idea

The integration steps are as follows:

1. Create a checklist for the analytics event tracking strategy
2. Set up GA4 script in our project (initial config)
3. Implement required events for GA4 (implement custom events script)
   • Add the events to DOMs
   • Debug and test the implementation locally
4. Set up GA4 properties (for dev, staging, production) in analytics
   • dev: CCDL > Refine.bio Web - Dev
   • staging & production: CCDL > Refine.bio Web
5. Perform QA test on staging and review GA4 reports before the production deploy
6. Production deploy