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

Update Google analytics to support google tag manager and GA4 #3469

Draft
wants to merge 3 commits into
base: master
Choose a base branch
from

Conversation

taysea
Copy link
Collaborator

@taysea taysea commented Jul 10, 2023

Deploy Preview

What does this PR do?

Adds support for google tag manager, GA4 to collect page views on Design System site.

Key changes:

  • Removing dependency on react-ga which does not support GA4.
  • Adding support in _app.js for page views based on resources listed in Update Google Analytics #3444
  • Google now recommends using Google Tag Manager to capture events and stream that data to Google Analytics. This adjusts in that fashion.

Resources for CSP changes: https://developers.google.com/tag-platform/tag-manager/csp#google_analytics_4_google_analytics

Where should the reviewer start?

aries-site/src/pages/_app.js

What testing has been done on this PR?

The script is being loaded successfully (checked Network tab). Need to merge to see if the data is flowing properly.

In addition to the feature you are implementing, have you checked the following:

General UX Checks

  • Small, medium, and large screen sizes
  • Cross-browsers (FireFox, Chrome, and Safari)
  • Light & dark modes
  • All hyperlinks route properly

Accessibility Checks

  • Keyboard interactions
  • Screen reader experience
  • Run WAVE accessibility plugin (Chrome)

Code Quality Checks

  • Console is free of warnings and errors
  • Passes E2E commit checks
  • Visual snapshots are reasonable

How should this be manually tested?

Any background context you want to provide?

What are the relevant issues?

Closes #3444

Screenshots (if appropriate)

Should this PR be mentioned in Design System updates?

Is this change backwards compatible or is it a breaking change?

@taysea taysea requested a review from jcfilben July 10, 2023 17:24
@taysea
Copy link
Collaborator Author

taysea commented Jul 10, 2023

@taysea
Copy link
Collaborator Author

taysea commented Jul 10, 2023

https://developers.google.com/tag-platform/tag-manager/csp#:~:text=Content%20Security%20Policy%20(CSP)%20is,sites%20that%20use%20a%20CSP.

Seems like "nonce" approach doesn't work for static site builds (which is what our site is). Wondering if we move forward as is since we're only collecting page views just to see if the pipeline is working? Can adjust the CSP as necessary following.

Copy link
Collaborator

@MikeKingdom MikeKingdom left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note that according to Sherry, we'll probably have to disable google analytics altogether until we we enable the opt in/out banner (GDPR etc).

Comment on lines +11 to +24
export const pageview = url => {
window.gtag('config', GA_TRACKING_ID, {
page_path: url,
});
};

// https://developers.google.com/analytics/devguides/collection/gtagjs/events
export const event = ({ action, category, label, value }) => {
window.gtag('event', action, {
event_category: category,
event_label: label,
value,
});
};
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of hard coding calls to these inside _app.js and such you could simply look at the event in line 5 above (in the analytics callback) and send the appropriate ga event there. That's what that callback is intended for.

@taysea taysea marked this pull request as draft July 11, 2023 16:50
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.

Update Google Analytics
3 participants