Migrate analytics from UA+gtag.js to Google Tag Manager (GA4)

[amit-fytq]

Fixes mozilla/addons#16083

Replace Universal Analytics+gtag.js with Google Tag Manager (GTM)

• Tracking singleton now uses window.dataLayer.push() instead of ga()
• sendEvent() signature changed to { category, params } (GA4 style)
• All event names normalized to lowercase_underscore convention
• Added trusted param via getPromotedCategory() for install events
• Added getAddonEventParams() / getAddonNameParam() helpers
• withExperiment enrollment sends experiment_id + experiment_variant
• GTM snippet loaded in ServerHtml with duplicate guard
• Remove web vitals custom code — GTM events will handle web vitals
• Rename install-completion event categories to include _completed suffix

[amit-fytq]

@diox - New PR with GTM core migration changes

[codecov]

Codecov Report

❌ Patch coverage is 98.95833% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 98.13%. Comparing base (a2a152c) to head (a8518ac).
⚠️ Report is 28 commits behind head on master.

Files with missing lines	Patch %	Lines
src/amo/tracking.js	97.22%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master   #14060      +/-   ##
==========================================
- Coverage   98.15%   98.13%   -0.02%     
==========================================
  Files         265      265              
  Lines       10680    10627      -53     
  Branches     3280     3278       -2     
==========================================
- Hits        10483    10429      -54     
- Misses        184      185       +1     
  Partials       13       13              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[diox]

@amit-fytq How are you testing this locally? This doesn't appear to be working for me. I checked out the branch and started clicking around and while I see the gtm.js being included on my pages, I don't see any outside request going to google-analytics, either at initial load or subsequent client-side navigation. I don't even see sendEvent() calls in the console, I only see the initial [GA] Google Analytics is enabled.

[amit-fytq]

@diox To test locally you will need access to AMO property on Google Tag Manager

Scott arranged access for us.

The AMO property on GTM has been configured with a lookup table which will send the events to the correct Google Analytics property depending on the hostname

Once you have access start the application locally yarn amo:dev (or stage). On the GTM console you will see a "Preview" button on the top right

Click that and then in the next step input the localhost url for the app and now GTM should start sending events.

If you have Scott give you access to AMO account on Google Analytics you should also see the events appearing there.

[diox]

Just a quick update: I'm still waiting to be given access to Tag Manager to properly test this.

[diox]

Still broken for me after being given access ; this must be something on the Google Tag Manager side but I'm not sure what.

I've disabled CSP (!) and when going through the Preview feature, that leads to the Google Tag Assistant (beta!) page, entering the URL for my localhost instance opens it in a new tab, but then says Tag Assistant Not Connected / error / Could not connect to Tag Assistant. Tried the instructions over at https://support.google.com/tagassistant/answer/10039345 but that didn't help...

[amit-fytq]

@diox - You shouldn't need to disable CSP. The PR does not make any changes in that domain.

In my experience this happens usually because the Google tracking domains/scripts are getting blocked. Try disabling any ad or content blocker add-ons. Are you behind a network layer ad-blocker like pi-hole?

Can you also try testing on Chrome? If that works then it is something related to your Firefox config that is blocking otherwise If that doesn't work either then it could be something in your network

[diox]

@diox - You shouldn't need to disable CSP. The PR does not make any changes in that domain.

If I keep CSP enabled then I get a ton of errors caused by the Tag Manager assistant.

I have disabled my content-blocker and I am not blocking anything at the network level - No requests are shown are blocked anymore once I disabled the CSP, but I'm still not getting the Tag Assistant to connect.

[amit-fytq]

Try testing on Chrome with no extensions except this one installed. It will help us narrow down the issue.

[diox]

It does work in Chrome w/ the extension... I'll keep debugging and worry about this later...