Fix(Analytics): Remove GTM #5158

usame-algan · 2025-02-27T19:43:09Z

What it solves

Resolves #5159

How this PR fixes it

Removes TagManager class and moves required logic into the gtm.ts file
Adds @next/third-parties package
Adds new Analytics component to initialize GA
Replaces dataLayer calls with sendGAEvent

ToDos

Add env variables to CI

How to test it

Ensure that the same events are still sent to GA

Test this PR deployment vs. dev/staging/prod
Do the same action in both deployments e.g. Create new transaction
Compare collect network call data

Ensure events are still sent to the correct GA property

Test property on localhost, dev, staging, PRs
Prod property on prod
Safe apps property when inside a safe app

Checklist

I've tested the branch on mobile 📱
I've documented how it affects the analytics (if at all) 📊
I've written a unit/e2e test for it (if applicable) 🧑‍💻

github-actions · 2025-02-27T19:43:22Z

Branch preview

✅ Deploy successful!

Website:
https://gtm--walletweb.review.5afe.dev/home?safe=eth:0xA77DE01e157f9f57C7c4A326eeE9C4874D0598b6

Storybook:
https://gtm--walletweb.review.5afe.dev/storybook/

github-actions · 2025-02-27T19:50:12Z

📦 Next.js Bundle Analysis for @safe-global/web

This analysis was generated by the Next.js Bundle Analysis action. 🤖

⚠️ Global Bundle Size Increased

Page	Size (compressed)
`global`	`1.07 MB` (🟡 +83.67 KB)

Details

The global bundle is the javascript bundle that loads alongside every page. It is in its own category because its impact is much higher - an increase to its size means that every page on your website loads slower, and a decrease means every page loads faster.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

If you want further insight into what is behind the changes, give @next/bundle-analyzer a try!

Thirty-five Pages Changed Size

The following pages changed size from the code in this PR compared to its base branch:

Page	Size (compressed)	First Load
`/`	`509 B` (🟢 -1 B)	1.07 MB
`/address-book`	`23.21 KB` (🟡 +150 B)	1.09 MB
`/apps`	`35.75 KB` (🟡 +2.03 KB)	1.11 MB
`/apps/custom`	`33.82 KB` (🟡 +2.03 KB)	1.1 MB
`/apps/open`	`55.36 KB` (🟡 +1.75 KB)	1.12 MB
`/balances`	`29.71 KB` (🟡 +8 B)	1.1 MB
`/balances/nfts`	`9.31 KB` (🟢 -235 B)	1.08 MB
`/bridge`	`2.55 KB` (🟢 -4 B)	1.07 MB
`/cookie`	`8.77 KB` (🟡 +1 B)	1.08 MB
`/home`	`61.33 KB` (🟡 +2.07 KB)	1.13 MB
`/licenses`	`2.46 KB` (🟢 -1 B)	1.07 MB
`/new-safe/advanced-create`	`26.38 KB` (🟢 -78 B)	1.1 MB
`/new-safe/create`	`25.52 KB` (🟢 -71 B)	1.1 MB
`/privacy`	`14.57 KB` (🟡 +2 B)	1.08 MB
`/settings/appearance`	`2.25 KB` (🟡 +1 B)	1.07 MB
`/settings/cookies`	`1.87 KB` (🟡 +1 B)	1.07 MB
`/settings/data`	`1.79 KB` (🟢 -1 B)	1.07 MB
`/settings/environment-variables`	`3.28 KB` (🟡 +1 B)	1.07 MB
`/settings/modules`	`2.91 KB` (🟢 -1.14 KB)	1.07 MB
`/settings/notifications`	`7.56 KB` (🟢 -13.75 KB)	1.08 MB
`/settings/safe-apps`	`20.15 KB` (🟡 +1.87 KB)	1.09 MB
`/settings/security`	`2.34 KB` (🟡 +2 B)	1.07 MB
`/settings/setup`	`30.98 KB` (🟡 +256 B)	1.1 MB
`/share/safe-app`	`7.55 KB` (🟢 -9 B)	1.08 MB
`/stake`	`617 B` (🟢 -2 B)	1.07 MB
`/swap`	`763 B` (🟡 +3 B)	1.07 MB
`/terms`	`12.93 KB` (🟡 +1 B)	1.08 MB
`/transactions`	`99.39 KB` (🟡 +2.82 KB)	1.17 MB
`/transactions/history`	`99.35 KB` (🟡 +2.82 KB)	1.17 MB
`/transactions/messages`	`60.25 KB` (🟡 +1.95 KB)	1.13 MB
`/transactions/msg`	`56.5 KB` (🟡 +1.95 KB)	1.13 MB
`/transactions/queue`	`49.36 KB` (🟡 +1.96 KB)	1.12 MB
`/transactions/tx`	`48.72 KB` (🟡 +1.95 KB)	1.12 MB
`/welcome`	`6.93 KB` (🟢 -2 B)	1.08 MB
`/welcome/accounts`	`408 B` (🟡 +1 B)	1.07 MB

Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

Next to the size is how much the size has increased or decreased compared with the base branch of this PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this.

github-actions · 2025-02-27T19:51:13Z

Coverage report for `apps/web`

Caution

Test run failed

St.^❔	Category	Percentage	Covered / Total
🟡	Statements	77.25% (-0.07% 🔻)	14204/18387
🔴	Branches	56.11% (-0.01% 🔻)	3577/6375
🟡	Functions	62.42% (-0.17% 🔻)	2129/3411
🟡	Lines	78.71% (-0.07% 🔻)	12826/16295

Show files with reduced coverage 🔻

St.^❔	File	Statements	Branches	Functions	Lines
🟡	`...` / gtm.ts	61.97% (-8.8% 🔻)	77.78% (+14.14% 🔼)	30.77% (-19.23% 🔻)	67.8% (-9.98% 🔻)

Test suite run failed

Failed tests: 2/1838. Failed suites: 1/250.

  ● gtm › gtmTrack › should send correct data to the dataLayer

    expect(jest.fn()).toHaveBeenCalledWith(...expected)

    Expected: "event", "testAction", ObjectContaining {"appVersion": Any<String>, "chainId": "1234", "deviceType": "desktop", "event": "customClick", "eventAction": "testAction", "eventCategory": "testCategory", "eventLabel": "testLabel"}
    Received: "event", "customClick", {"appVersion": "1.51.1", "chainId": "1234", "deviceType": "desktop", "event": "customClick", "eventAction": "testAction", "eventCategory": "testCategory", "eventLabel": "testLabel", "eventType": "customClick", "safeAddress": "", "send_to": ""}

    Number of calls: 1

      25 |       gtm.gtmTrack(mockEventData)
      26 |
    > 27 |       expect(GA.sendGAEvent).toHaveBeenCalledWith(
         |                              ^
      28 |         'event',
      29 |         'testAction',
      30 |         expect.objectContaining({

      at Object.toHaveBeenCalledWith (src/services/analytics/__tests__/gtm.test.ts:27:30)

  ● gtm › gtmTrack › should set the chain ID correctly

    expect(jest.fn()).toHaveBeenCalledWith(...expected)

    Expected: "event", "testAction", ObjectContaining {"appVersion": Any<String>, "chainId": "1234", "deviceType": "desktop", "event": "customClick", "eventAction": "testAction", "eventCategory": "testCategory", "eventLabel": "testLabel"}
    Received: "event", "customClick", {"appVersion": "1.51.1", "chainId": "1234", "deviceType": "desktop", "event": "customClick", "eventAction": "testAction", "eventCategory": "testCategory", "eventLabel": "testLabel", "eventType": "customClick", "safeAddress": "", "send_to": ""}

    Number of calls: 1

      53 |       gtm.gtmTrack(mockEventData)
      54 |
    > 55 |       expect(GA.sendGAEvent).toHaveBeenCalledWith(
         |                              ^
      56 |         'event',
      57 |         'testAction',
      58 |         expect.objectContaining({

      at Object.toHaveBeenCalledWith (src/services/analytics/__tests__/gtm.test.ts:55:30)

Report generated by 🧪jest coverage report action from 440d833

katspaugh · 2025-02-28T07:55:31Z

apps/web/src/services/analytics/Analytics.tsx

+    })
+  }, [])
+
+  return <GoogleAnalytics gaId={GA_TRACKING_ID} debugMode={true} />


Should debugMode be false in prod?

katspaugh · 2025-02-28T07:56:43Z

apps/web/src/services/analytics/Analytics.tsx

+    // This needs to be added once in order for events with send_to: SAFE_APPS_GA_TRACKING_ID to work
+    window.gtag?.('config', SAFE_APPS_GA_TRACKING_ID, { debug_mode: true })
+
+    window.gtag?.('consent', 'default', {


How does this work wrt cookies? The current code upgrades the cookie consent once it's given via the banner, and also cookies were deleted once the consent is withdrawn.

This is the default consent config we set whenever we called gtmInit which we did regardless of cookies being set or not so I think the behaviour should still be the same.

katspaugh · 2025-02-28T07:57:02Z

Please rebase it to the release branch.

usame-algan · 2025-02-28T09:10:10Z

Closing this in favour of #5164

fix: Remove GTM

440d833

katspaugh reviewed Feb 28, 2025

View reviewed changes

usame-algan closed this Feb 28, 2025

github-actions bot locked and limited conversation to collaborators Feb 28, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix(Analytics): Remove GTM #5158

Fix(Analytics): Remove GTM #5158

usame-algan commented Feb 27, 2025 •

edited

Loading

github-actions bot commented Feb 27, 2025 •

edited

Loading

github-actions bot commented Feb 27, 2025

github-actions bot commented Feb 27, 2025

katspaugh Feb 28, 2025

katspaugh Feb 28, 2025

usame-algan Feb 28, 2025

katspaugh commented Feb 28, 2025

usame-algan commented Feb 28, 2025

Fix(Analytics): Remove GTM #5158

Fix(Analytics): Remove GTM #5158

Conversation

usame-algan commented Feb 27, 2025 • edited Loading

What it solves

How this PR fixes it

ToDos

How to test it

Checklist

github-actions bot commented Feb 27, 2025 • edited Loading

Branch preview

github-actions bot commented Feb 27, 2025

📦 Next.js Bundle Analysis for @safe-global/web

⚠️ Global Bundle Size Increased

Thirty-five Pages Changed Size

github-actions bot commented Feb 27, 2025

Coverage report for apps/web

Test suite run failed

katspaugh Feb 28, 2025

Choose a reason for hiding this comment

katspaugh Feb 28, 2025

Choose a reason for hiding this comment

usame-algan Feb 28, 2025

Choose a reason for hiding this comment

katspaugh commented Feb 28, 2025

usame-algan commented Feb 28, 2025

usame-algan commented Feb 27, 2025 •

edited

Loading

github-actions bot commented Feb 27, 2025 •

edited

Loading

Coverage report for `apps/web`