Ensure YouTube-hosted videos send expected GTM events

[maureenlholland]

Description

Reported from slack: https://mozilla.slack.com/archives/C019N6J8FGA/p1765215322919649

The Bedrock functionality was ported to Springfield here: #674
And there was a corresponding update to www.firefox.com tag manager configuration

For correct implementation, see events fired here*:
https://www.mozilla.org/en-US/firefox/136.0/whatsnew/

*You will need to be in a non-EU geo, no DNT or GPC preference, no decline cookies pref

In console, you can check dataLayer, but it is best to log into Tag Manager account and use Tag Assistant extension (Chrome only)

Use demo to test CMS (outlined banner with video): www-demo1.springfield.moz.works/en-US/tests-index-page/test-banner-page/

---

Success Criteria

• Static page YouTube videos send events, i.e. https://www.firefox.com/en-US/features/picture-in-picture/
• CMS YouTube videos send events

[maureenlholland]

For CMS: #844

[maureenlholland]

Confirmed GTM config between www.mozilla.org and www.firefox.com is the same for video events

Reports of extra CSP errors on www.firefox.com when playing YouTube video need some investigation

• most from www-widgetapi are warnings, not blockers
• one from iframe_api is blocking what might be a necessary cookie

We might also want to try a more custom video event setup (so self-hosted and YouTube videos both explicitly add events to dataLayer)

• this is dependent on whether we have access to event listening with YouTube iframe
• onStateChange likely helpful here: https://developers.google.com/youtube/iframe_api_reference#onStateChange (this is what we were using before GA4)
• we'd also like to keep the no-cookie embed: https://support.google.com/youtube/answer/171780?hl=en#zippy=%2Cturn-on-privacy-enhanced-mode

Next steps

Pending internal discussion. I think we'll want to do a proof-of-concept on custom JS for YouTube videos to cut out the magic auto-sending events that for some reason aren't sending for www.firefox.com but are sending double for www.mozilla.org [edit: the double counting is likely a bug in Google Tag Assistant extension. I see the correct events in dataLayer]

[maureenlholland]

Between Bedrock & Springfield

• inline video JS is the same (superficial difference of bedrock not having the deprecated modestbranding param anymore)
• no notable CSP setting differences (both Bedrock & Springfield show errors related to an image)
  • Loading the image 'https://i.ytimg.com/vi_webp/F-nFQryDB0s/mqdefault.webp' violates the following Content Security Policy directive: "img-src 'self' data: www.firefox.com www.google-analytics.com www.googletagmanager.com www.mozilla.org". The action has been blocked.
• we can test the same YT video across both:
  • Springfield: https://www.firefox.com/en-US/features/picture-in-picture/
  • Bedrock: https://www.mozilla.org/fr/firefox/136.0/whatsnew/

Confirmed events fire as expected locally on Springfield, and events continue to fire with nocookie domain on Bedrock

Need to figure out why the events fire on Springfield local but not on Springfield prod

[maureenlholland]

Demo

Springfield video events are firing on Demo 3 (with nocookie domain): https://www-demo3.springfield.moz.works/en-US/features/picture-in-picture/

Also firing on Demo 5 with existing prod implementation: https://www-demo5.springfield.moz.works/en-US/features/picture-in-picture/

Staging

⚠️ STAGING does not fire the expected video events: https://www.springfield.moz.works/en-US/features/picture-in-picture/

Notably, the dataLayer events are more reliable than the Google Tag Assistant extension