scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2025-02-17 08:31:23 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Merge pull request #7702 from scratchfoundation/ga4-events

Browse source 
chore: replace UA with GA4 through GTM
This commit is contained in:
Christopher Willis-Ford 2023-06-30 09:52:44 -07:00 committed by GitHub
commit 62326c3aa7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 18 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
README.md
View file

@ -166,7 +166,8 @@ the beginning of the command, before `npm start`:
| `BACKPACK_HOST` | `https://backpack.scratch.mit.edu` | Hostname for backpack requests |
| `PROJECT_HOST` | `https://projects.scratch.mit.edu` | Hostname for project requests |
| `FALLBACK` | `''` | Pass-through location for old site |
| `GA_TRACKER` | `''` | Where to log Google Analytics data |
| `GTM_ID` | `''` | Google Tag Manager ID |
| `GTM_ENV_AUTH` | `''` | Google Tag Manager env and auth info |
| `NODE_ENV` | `null` | If not `production`, app acts like development |
| `PORT` | `8333` | Port for devserver (http://localhost:XXXX) |

14
src/components/join-flow/join-flow.jsx
View file

@ -221,15 +221,11 @@ class JoinFlow extends React.Component {
resetState () {
this.setState(this.initialState);
}
sendAnalytics (path) {
const gaID = window.GA_ID;
if (!window.ga) {
return;
}
window.ga('send', {
hitType: 'pageview',
page: path,
tid: gaID
sendAnalytics (joinFlowStep) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'join_flow',
joinFlowStep
});
}

8
src/template-config.js
View file

@ -30,14 +30,6 @@ module.exports = {
// Analytics & Monitoring
// ----------------------
// GA4 Measurement ID
// Looks like 'G-XXXXXXXX'
ga4_id: process.env.GA4_ID || '',
// Universal Analytics Property ID
// Looks like 'UA-99999999-9'
ga_tracker: process.env.GA_TRACKER || '',
// Google Tag Manager ID
// Looks like 'GTM-XXXXXXX'
gtm_id: process.env.GTM_ID || '',

16
src/template.ejs
View file

@ -47,22 +47,6 @@
<!-- Polyfills -->
<script src="/js/polyfill.min.js"></script>
<!-- Analytics (GA) -->
<script>
/* eslint-disable */
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', '<%- htmlWebpackPlugin.options.ga_tracker %>', {
'sampleRate': 10
});
ga('send', 'pageview');
window.GA_ID = '<%- htmlWebpackPlugin.options.ga_tracker %>';
/* eslint-enable */
</script>
</head>
<body>

14
src/views/splash/donate/donate-banner.jsx
View file

@ -16,17 +16,13 @@ const navigateToDonatePage = () => {
const SCRATCH_CELBRATION_BANNER_END_TIME = new Date(2022, 4, 21).getTime(); // May 21 2022 (months are zero indexed)
// Following the example in the Google Analytics doc here to track
// clicks going out to the donate page from this banner:
// https://support.google.com/analytics/answer/1136920?hl=en
// track clicks going out to the donate page from this banner
const captureOutboundLinkToDonate = () => {
// `ga` is a global we have thanks to src/template.ejs
// use this to send a tracking event for this outbound link
// eslint-disable-next-line no-undef
ga('send', 'event', 'outbound', 'click', donateURL, {
transport: 'beacon',
hitCallback: navigateToDonatePage
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'donate_banner_click'
});
setTimeout(navigateToDonatePage, 0);
};
const DonateTopBanner = ({

14
test/unit/components/join-flow.test.jsx
View file

@ -67,17 +67,15 @@ describe('JoinFlow', () => {
});
});
test('sendAnalytics calls google analytics with correct params', () => {
test('sendAnalytics calls GTM with correct params', () => {
const joinFlowInstance = getJoinFlowWrapper().instance();
global.window.ga = jest.fn();
global.window.dataLayer = {push: jest.fn()};
global.window.GA_ID = '1234';
joinFlowInstance.sendAnalytics('page-path');
const obj = {
hitType: 'pageview',
page: 'page-path',
tid: '1234'
};
expect(global.window.ga).toHaveBeenCalledWith('send', obj);
expect(global.window.dataLayer.push).toHaveBeenCalledWith({
event: 'join_flow',
joinFlowStep: 'page-path'
});
});
test('handleAdvanceStep', () => {