feat(glean): port missing measurements by caugner · Pull Request #1279 · mdn/fred

Setup: Enable Glean by setting FRED_GLEAN_ENABLED=true in .env and monitor gleanClick() calls in the browser console (e.g. breakpoint in hooks/glean-init.js).

Accessibility Menu (`a11y-menu`)

Tab into the a11y menu and click "Skip to main content" — fires a11y_menu: click #content
Tab into the a11y menu and click "Skip to search" — fires a11y_menu: click #search

Theme Switcher (`color-theme`)

Open the theme dropdown — fires theme_switcher: open
Close the theme dropdown without changing — fires theme_switcher: close
Switch to dark theme — fires theme_switcher: switch -> dark
Switch to light theme — fires theme_switcher: switch -> light
Switch to OS default — fires theme_switcher: switch -> os-default

Menu Bar (`menu`)

Click each top-level menu dropdown (e.g. References, Guides) — fires menu_toggle: <tab-id> for each

Login (`login-button`, `user-menu`)

Click login button in top nav (logged-out state) — fires top_nav: login
~~Click login button elsewhere — fires login_button~~ (we don't use it anywhere else)

Breadcrumbs (`breadcrumbs`)

Click a breadcrumb link — fires breadcrumb_click: <position>/<total> (e.g. 2/3)

Table of Contents (`generic-toc`, `reference-toc`)

Click a TOC link on an article page — fires toc_click: #<id>
Click a TOC link on a reference page — fires toc_click: #<id>

Sidebar (`sidebar-filter`, `hooks/glean-init.js`)

Focus the sidebar filter input — fires sidebar_filter_focus
Type into the sidebar filter — fires sidebar_filter_typed (once, on first non-empty input)
Click any link in the left sidebar — fires sidebar_click: sidebar <href>

Footer (`footer`)

Click a social media icon (e.g. GitHub) — fires footer: social -> <icon>
Click a footer section link — fires footer: link -> <href>
Click a Mozilla-related footer link — fires footer: mozilla -> <href>

Language Switcher (`language-switcher`, `language-always-redirect-button`, `translation-banner`)

On a translated page, click a language link — fires language: <from> -> <to>
Toggle "remember preference" on — fires language_remember: <old> -> <locale>
Toggle "remember preference" off — fires language_remember: <old> -> 0
Click "Always redirect" button — fires language: <from> -> <to> (always)
Click "View in English" on translation banner — fires language: <locale> -> en-US (view)

Homepage (`featured-articles`, `latest-news`, `recent-contributions`)

Click a featured article tag — fires homepage: article_tag <n>
Click a featured article title — fires homepage: article <n>
Click a news source link — fires homepage: news_source <n>
Click a news item title — fires homepage: news <n>
Click a recent contribution link — fires homepage: contribution <n>

About Tabs (`about-tabs`)

Navigate to an About page and click a tab — fires about: tab -> <panel-id>

Playground (`playground`)

Click the Share button — fires playground: share-click
Click Reset and confirm — fires playground: reset-click
In share modal, click "Copy as Markdown" — fires playground: share-markdown
In share modal, click "Create permalink" — fires playground: share-permalink
Click the Report/Flag button — fires playground: flag-click
Click Login from share modal (logged-out state) — fires playground: banner-login

Collections (`collection-save-button`)

Click Save to Collection — fires article_actions_collections_opened
Open the collection select dropdown — fires article_actions_collection_select_opened
Select "Add new collection" — fires article_actions_new_collection
Submit saving to a collection — fires new_collection_modal_submit_article_actions

Observatory (`observatory-form`, `observatory-results`, `observatory-results/rating`)

Submit a scan — fires observatory: scan
Trigger a scan error — fires observatory: error -> <message>
Click Rescan — fires observatory: rescan
Click a results tab — fires observatory: tab -> <key>
Click "Scan another website" — fires observatory: scan-another
~~Trigger API failure for scan results — fires observatory: error -> Observatory API request for scan data failed~~ (we'll catch this with Sentry in the future)

View/Impression Measurements (scroll into viewport, fires once)

Scroll a BCD table into view — fires bcd: view -> <query>
Scroll Scrimba placement banner into view — fires banner_scrimba_view
Scroll a Scrim inline embed into view — fires curriculum: scrim view id:<scrim-id>
Scroll curriculum partner banner into view — fires curriculum: partner banner view
Verify view measurements only fire once per element (scroll away and back)

Infrastructure (`hooks/glean-init.js`)

Verify data-glean-id attribute works on click
Verify data-glean-toggle-open fires only when a <details> element opens (not on close)
Verify data-glean-view fires once when element scrolls into 50% visibility
Verify external link clicks still fire external-link: <href>

caugner · 2026-02-11T18:31:47Z

Close the theme dropdown without changing — fires theme_switcher: close

🐛 Also fires when selecting an item.
🔥 Fires on page load.

Click each top-level menu dropdown (e.g. References, Guides) — fires menu_toggle: <tab-id> for each

🐛 Fires both on open and close.

Click login button in top nav (logged-out state) — fires top_nav: login

Click login button elsewhere — fires login_button

🐛 No event observed (maybe because the data-glean-id is on the mdn-button, not on the a inside).

Click "Always redirect" button — fires language: <from> -> <to> (always)

Click "View in English" on translation banner — fires language: <locale> -> en-US (view)

Need to test locally.

Click a news source link — fires homepage: news_source <n>

Click a news item title — fires homepage: news <n>

Need to test locally.

Click Reset and confirm — fires playground: reset-click

🐛 No event.

Open the collection select dropdown — fires article_actions_collection_select_opened

🐛 Fires when item is selected, not when the select is opened.

Scroll a Scrim inline embed into view — fires curriculum: scrim view id:<scrim-id>

Need to test locally.

On first Lit render, `open` changes from `undefined` to `false`, which was incorrectly triggering a `toggle` event and causing `theme_switcher: close` (and similar) to fire on page load.

Selecting an option programmatically closes the dropdown, which was incorrectly firing a `close` event in addition to the `switch` event.

The button's data-glean-id fired on every click (both open and close). Moved tracking to data-glean-toggle-open on mdn-dropdown and extended glean-init's toggle handler to support any element with an `open` property (not only <details>).

caugner · 2026-03-27T14:09:37Z

Close the theme dropdown without changing — fires theme_switcher: close

🐛 Also fires when selecting an item. 🔥 Fires on page load.

✅ Fixed via ed7ff87.

Click each top-level menu dropdown (e.g. References, Guides) — fires menu_toggle: <tab-id> for each

🐛 Fires both on open and close.

✅ Fixed via 7cfb63b.

Click login button in top nav (logged-out state) — fires top_nav: login

Click login button elsewhere — fires login_button

🐛 No event observed (maybe because the data-glean-id is on the mdn-button, not on the a inside).

✅ Fixed via f738244.

Click "Always redirect" button — fires language: <from> -> <to> (always)

Click "View in English" on translation banner — fires language: <locale> -> en-US (view)

Need to test locally.

✅ Works as expected.

Click a news source link — fires homepage: news_source <n>

Click a news item title — fires homepage: news <n>

Need to test locally.

The news don't render locally, but those are just links, so I have high confidence that it works.

Click Reset and confirm — fires playground: reset-click

🐛 No event.

✅ Fixed via db8005f.

Open the collection select dropdown — fires article_actions_collection_select_opened

🐛 Fires when item is selected, not when the select is opened.

✅ Fixed via f857a2d.

Scroll a Scrim inline embed into view — fires curriculum: scrim view id:<scrim-id>

Need to test locally.

✅ Fixed via 2855bdd (didn't fire).

data-glean-id on mdn-button is unreachable via closest() when the click originates from the nested <a> inside mdn-button's shadow DOM. Using a direct gleanClick call avoids the shadow boundary limitation.

The event was gated behind a controller null-check, so it could be silently dropped. Fire gleanClick as soon as the user confirms the dialog, independent of the controller reference.

The event was firing on the change event (item selected) rather than when the select dropdown is opened. Moved it to focus on the select element, which fires when the select gains focus (once per open action).

The dialog element is not visible in the viewport when the user hasn't opened it yet, so the IntersectionObserver never fired. Moving the ref to the body div ensures the element is in flow and observable.

LeoMcA

Still going through it, but one comment so far:

LeoMcA · 2026-03-27T17:22:53Z

+    this.addEventListener("click", () => {
+      const gleanId = this.dataset.gleanId;
+      if (gleanId) {
+        gleanClick(gleanId);
+      }
+    });


I'm interested why this is necessary, as I would've thought our shadow dom workaround code in glean-init.js would cover this case:

fred/hooks/glean-init.js

Lines 28 to 38 in 88f55bc

if (composedTarget !== event.target && composedTarget instanceof Element) {

// Workaround for automatic click events in shadow DOM.

// See: https://bugzil.la/1988206

const taggedElement = composedTarget.closest("[data-glean-id]");

if (taggedElement instanceof HTMLElement) {

const gleanId = taggedElement.dataset.gleanId;

if (gleanId) {

gleanClick(gleanId);

}

}

}

The workaround works if the element with data-glean-id is inside the shadow DOM, but in this case the attribute is set on the host element, so closest() returns null.

I think this article describes this.

But we might be able to do something like this instead:

event.composedPath().find(el => el instanceof Element && el.matches(selector)) ?? null;

4447fb7: Use composedPath() instead of closest()

96da56f: Reverts the mdn-button click handler.

3508870: Measure all data-glean-ids along the path (e.g. the login button in Playground should be measured both as login_button (via <mdn-login-button>) and playground: banner-login (via <mdn-playground>).

This reverts commit f738244.

caugner added 2 commits February 4, 2026 12:13

feat(glean): measure TOC clicks

e2cfa0f

Fixes #1030

feat(glean): measure sidebar filter

9fe1ea9

Fixes #1031

caugner commented Feb 4, 2026

View reviewed changes

Comment thread components/playground/element.js Outdated

caugner changed the title ~~feat(glean): add missing measurements~~ feat(glean): port missing measurements Feb 4, 2026

caugner added 18 commits February 4, 2026 13:30

feat(glean): measure a11y menu

f5fd571

Fixes #1032

feat(glean): measure theme switcher

c395adf

Fixes #1033

feat(glean): measure menu bar login

372c3fd

Fixes #1034

fix(glean): fix baseline banner measurement

2c4723d

Add missing toggle event handler for data-glean-toggle-open attribute. Fixes #1035

feat(glean): measure breadcrumb clicks

43e18d9

Fixes #1036

feat(glean): add homepage measurements

5711e37

Fixes #1037

feat(glean): measure language switcher

f58d0e3

Fixes #1038

feat(glean): add Observatory measurements

7b415e0

Fixes #1039

feat(glean): port view measurements

09c3aea

Fixes #1040

feat(glean): measure About tab changes

084166e

Fixes #1041

feat(glean): measure menu dropdown clicks

2ea560f

Fixes #1062

feat(glean): measure sidebar clicks

7b20a7e

Fixes #1063

feat(glean): measure footer links

9fd76f3

Fixes #1064

feat(glean): add playground measurements

29328b4

Fixes #1028

feat(glean): add collections measurements

9414848

Fixes #1029

chore(hooks/glean-init): refine comments

66b9688

feat(dropdown): dispatch toggle event

4282e3b

chore(color-theme): measure via toggle event handler

e453d13

caugner force-pushed the add-missing-measurements branch from 7f33adc to e453d13 Compare February 4, 2026 12:30

caugner added 2 commits February 4, 2026 13:35

chore(login-button): use separate measurement ID

95a1931

Instead, measure the top nav login in the `user-menu` component, which does NOT use the `login-button` component.

chore(menu): rename toggle measurement ID

505bef5

caugner commented Feb 4, 2026

View reviewed changes

Merge branch 'main' into add-missing-measurements

afa5f24

caugner added 4 commits March 27, 2026 13:52

Merge branch 'main' into add-missing-measurements

88f7ac0

fix(glean): don't fire toggle event on dropdown initial render

7cfb63b

On first Lit render, `open` changes from `undefined` to `false`, which was incorrectly triggering a `toggle` event and causing `theme_switcher: close` (and similar) to fire on page load.

fix(glean): don't fire theme_switcher: close when an option is selected

ed7ff87

Selecting an option programmatically closes the dropdown, which was incorrectly firing a `close` event in addition to the `switch` event.

caugner added 2 commits March 27, 2026 15:14

fix(glean): fire login_button event via click handler

f738244

data-glean-id on mdn-button is unreachable via closest() when the click originates from the nested <a> inside mdn-button's shadow DOM. Using a direct gleanClick call avoids the shadow boundary limitation.

fix(glean): always fire playground: reset-click after user confirms

db8005f

The event was gated behind a controller null-check, so it could be silently dropped. Fire gleanClick as soon as the user confirms the dialog, independent of the controller reference.

caugner force-pushed the add-missing-measurements branch from d8c185e to 875f6ed Compare March 27, 2026 14:16

caugner added 2 commits March 27, 2026 16:03

fix(glean): fire article_actions_collection_select_opened on select open

f857a2d

The event was firing on the change event (item selected) rather than when the select dropdown is opened. Moved it to focus on the select element, which fires when the select gains focus (once per open action).

fix(glean): move ref to body so scrim view is observed correctly

2855bdd

The dialog element is not visible in the viewport when the user hasn't opened it yet, so the IntersectionObserver never fired. Moving the ref to the body div ensures the element is in flow and observable.

caugner force-pushed the add-missing-measurements branch from 875f6ed to 2855bdd Compare March 27, 2026 15:04

caugner marked this pull request as ready for review March 27, 2026 15:09

caugner requested a review from a team as a code owner March 27, 2026 15:09

caugner requested a review from LeoMcA March 27, 2026 15:09

caugner commented Mar 27, 2026

View reviewed changes

Comment thread components/playground/element.js

caugner and others added 2 commits March 27, 2026 16:20

feat(glean): measure "Share Data URL" clicks

e5dfa6f

chore(scrim-inline): rename _{ref => bodyRef}

f5841e4

LeoMcA reviewed Mar 27, 2026

View reviewed changes

caugner added 8 commits April 3, 2026 08:48

fix(glean): use composedPath() instead of closest()

4447fb7

Revert "fix(glean): fire login_button event via click handler"

96da56f

This reverts commit f738244.

Merge branch 'main' into add-missing-measurements

fb7688a

fix(glean): measure click for all data-glean-ids

3508870

chore(about-tabs): measure via data-glean-id

eb89ef5

fixup! feat(glean): port view measurements

f1dcc9b

chore(playground): measure via data-glean-id

d53db63

chore(playground): revert reset handler

e00f75c

	if (composedTarget !== event.target && composedTarget instanceof Element) {
	// Workaround for automatic click events in shadow DOM.
	// See: https://bugzil.la/1988206
	const taggedElement = composedTarget.closest("[data-glean-id]");
	if (taggedElement instanceof HTMLElement) {
	const gleanId = taggedElement.dataset.gleanId;
	if (gleanId) {
	gleanClick(gleanId);
	}
	}
	}

Conversation

caugner commented Feb 4, 2026

Description

Motivation

Additional details

Related issues and pull requests

Uh oh!

github-actions bot commented Feb 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

caugner left a comment

Choose a reason for hiding this comment

Uh oh!

caugner commented Feb 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Glean Measurement Testing Checklist

Accessibility Menu (a11y-menu)

Theme Switcher (color-theme)

Menu Bar (menu)

Login (login-button, user-menu)

Breadcrumbs (breadcrumbs)

Table of Contents (generic-toc, reference-toc)

Sidebar (sidebar-filter, hooks/glean-init.js)

Footer (footer)

Language Switcher (language-switcher, language-always-redirect-button, translation-banner)

Homepage (featured-articles, latest-news, recent-contributions)

About Tabs (about-tabs)

Playground (playground)

Collections (collection-save-button)

Observatory (observatory-form, observatory-results, observatory-results/rating)

View/Impression Measurements (scroll into viewport, fires once)

Infrastructure (hooks/glean-init.js)

Uh oh!

caugner commented Feb 11, 2026

Uh oh!

caugner commented Mar 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

LeoMcA left a comment

Choose a reason for hiding this comment

Uh oh!

LeoMcA Mar 27, 2026

Choose a reason for hiding this comment

Uh oh!

caugner Apr 3, 2026

Choose a reason for hiding this comment

Uh oh!

caugner Apr 3, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

github-actions bot commented Feb 4, 2026 •

edited

Loading

caugner commented Feb 11, 2026 •

edited

Loading

Accessibility Menu (`a11y-menu`)

Theme Switcher (`color-theme`)

Menu Bar (`menu`)

Login (`login-button`, `user-menu`)

Breadcrumbs (`breadcrumbs`)

Table of Contents (`generic-toc`, `reference-toc`)

Sidebar (`sidebar-filter`, `hooks/glean-init.js`)

Footer (`footer`)

Language Switcher (`language-switcher`, `language-always-redirect-button`, `translation-banner`)

Homepage (`featured-articles`, `latest-news`, `recent-contributions`)

About Tabs (`about-tabs`)

Playground (`playground`)

Collections (`collection-save-button`)

Observatory (`observatory-form`, `observatory-results`, `observatory-results/rating`)

Infrastructure (`hooks/glean-init.js`)

caugner commented Mar 27, 2026 •

edited

Loading