From e2cfa0f4150567930a5d379dab6fa547a89b2787 Mon Sep 17 00:00:00 2001 From: Claas Augner Date: Wed, 4 Feb 2026 11:17:33 +0100 Subject: [PATCH 01/22] feat(glean): measure TOC clicks Fixes #1030 --- components/generic-toc/server.js | 7 ++++++- components/reference-toc/server.js | 6 +++++- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/components/generic-toc/server.js b/components/generic-toc/server.js index 54f893d65..5e35def83 100644 --- a/components/generic-toc/server.js +++ b/components/generic-toc/server.js @@ -25,7 +25,12 @@ export class GenericToc extends ServerComponent { ${context.hyData.toc.map( ({ id, text }) => html`
  • - ${text} + ${text}
    • `, )} diff --git a/components/reference-toc/server.js b/components/reference-toc/server.js index 666d55530..f2cf73e7d 100644 --- a/components/reference-toc/server.js +++ b/components/reference-toc/server.js @@ -21,7 +21,11 @@ export class ReferenceToc extends ServerComponent { `; From 9fe1ea93936edffcbc7744cadbde062ae16f836e Mon Sep 17 00:00:00 2001 From: Claas Augner Date: Wed, 4 Feb 2026 11:18:24 +0100 Subject: [PATCH 02/22] feat(glean): measure sidebar filter Fixes #1031 --- components/sidebar-filter/element.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/components/sidebar-filter/element.js b/components/sidebar-filter/element.js index eb9a39348..bbf01e4c3 100644 --- a/components/sidebar-filter/element.js +++ b/components/sidebar-filter/element.js @@ -5,6 +5,7 @@ import { LitElement, html } from "lit"; import { L10nMixin } from "../../l10n/mixin.js"; +import { gleanClick } from "../../utils/glean.js"; import cancelIcon from "../icon/cancel.svg?lit"; import styles from "./element.css?lit"; @@ -91,6 +92,7 @@ class MDNSidebarFilter extends L10nMixin(LitElement) { // Mark that the user has typed if the query is non-empty. if (this.query && this.query.trim().length > 0 && !this.hasTyped) { this.hasTyped = true; + gleanClick("sidebar_filter_typed"); } if (this._quicklinks) { @@ -116,6 +118,14 @@ class MDNSidebarFilter extends L10nMixin(LitElement) { } } + /** + * Event handler for focus events on the text field. + * @private + */ + _onFocus() { + gleanClick("sidebar_filter_focus"); + } + /** * Event handler for input events on the text field. * @param {Event} event The input event. @@ -150,6 +160,7 @@ class MDNSidebarFilter extends L10nMixin(LitElement) { type="text" placeholder=${this.l10n`Filter`} .value=${this.query} + @focus=${this._onFocus} @input=${this._onInput} /> ${this.matchCount === undefined From f5fd5711d354f4d27246e9621a54ab9ceb78f726 Mon Sep 17 00:00:00 2001 From: Claas Augner Date: Wed, 4 Feb 2026 11:19:01 +0100 Subject: [PATCH 03/22] feat(glean): measure a11y menu Fixes #1032 --- components/a11y-menu/server.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/components/a11y-menu/server.js b/components/a11y-menu/server.js index 18104c998..ab90cceb0 100644 --- a/components/a11y-menu/server.js +++ b/components/a11y-menu/server.js @@ -8,8 +8,16 @@ export class A11yMenu extends ServerComponent { */ render(context) { return html``; } } From c395adfa7a1c908e2a48f06f302be54b47b2e43e Mon Sep 17 00:00:00 2001 From: Claas Augner Date: Wed, 4 Feb 2026 11:20:57 +0100 Subject: [PATCH 04/22] feat(glean): measure theme switcher Fixes #1033 --- components/color-theme/element.js | 21 +++++++++++++++++++++ components/dropdown/element.js | 2 +- 2 files changed, 22 insertions(+), 1 deletion(-) diff --git a/components/color-theme/element.js b/components/color-theme/element.js index 639017a99..0615667b3 100644 --- a/components/color-theme/element.js +++ b/components/color-theme/element.js @@ -1,6 +1,7 @@ import { LitElement, html } from "lit"; import { L10nMixin } from "../../l10n/mixin.js"; +import { gleanClick } from "../../utils/glean.js"; import styles from "./element.css?lit"; @@ -30,6 +31,8 @@ export class MDNColorTheme extends L10nMixin(LitElement) { const mode = target.dataset.mode; if (mode === "light dark" || mode === "light" || mode === "dark") { this._mode = mode; + const gleanMode = mode === "light dark" ? "os-default" : mode; + gleanClick(`theme_switcher: switch -> ${gleanMode}`); try { localStorage.setItem("theme", mode); } catch (error) { @@ -43,6 +46,11 @@ export class MDNColorTheme extends L10nMixin(LitElement) { } } + /** @param {boolean} open */ + _onDropdownToggle(open) { + gleanClick(`theme_switcher: ${open ? "open" : "close"}`); + } + /** * @param {import("lit").PropertyValues} changedProperties */ @@ -114,6 +122,19 @@ export class MDNColorTheme extends L10nMixin(LitElement) { if (mode === "light dark" || mode === "light" || mode === "dark") { this._mode = mode; } + + // Observe dropdown open/close for Glean + const dropdown = this.shadowRoot?.querySelector("mdn-dropdown"); + if (dropdown) { + const observer = new MutationObserver((mutations) => { + for (const mutation of mutations) { + if (mutation.attributeName === "open") { + this._onDropdownToggle(dropdown.hasAttribute("open")); + } + } + }); + observer.observe(dropdown, { attributes: true }); + } } } diff --git a/components/dropdown/element.js b/components/dropdown/element.js index d4f1bb98c..7a08e4140 100644 --- a/components/dropdown/element.js +++ b/components/dropdown/element.js @@ -22,7 +22,7 @@ export class MDNDropdown extends LitElement { static styles = styles; static properties = { - open: { type: Boolean }, + open: { type: Boolean, reflect: true }, loaded: { type: Boolean, reflect: true }, }; From 372c3fd73a37f8356f9206afe5c15121778f0a0e Mon Sep 17 00:00:00 2001 From: Claas Augner Date: Wed, 4 Feb 2026 11:21:31 +0100 Subject: [PATCH 05/22] feat(glean): measure menu bar login Fixes #1034 --- components/login-button/element.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/components/login-button/element.js b/components/login-button/element.js index c292d5fcf..aa651c3ee 100644 --- a/components/login-button/element.js +++ b/components/login-button/element.js @@ -16,7 +16,9 @@ export class MDNLoginButton extends L10nMixin(LitElement) { } render() { - return html`${this.l10n`Login`}`; } From 2c4723d7ec8ff10c53587e43c4819c7ad06a4cbb Mon Sep 17 00:00:00 2001 From: Claas Augner Date: Wed, 4 Feb 2026 11:22:10 +0100 Subject: [PATCH 06/22] fix(glean): fix baseline banner measurement Add missing toggle event handler for data-glean-toggle-open attribute. Fixes #1035 --- hooks/glean-init.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/hooks/glean-init.js b/hooks/glean-init.js index e01494c45..2320bbb9e 100644 --- a/hooks/glean-init.js +++ b/hooks/glean-init.js @@ -23,6 +23,16 @@ Glean.initialize(GLEAN_APP_ID, uploadEnabled, { channel: GLEAN_CHANNEL, }); +document.addEventListener("toggle", (event) => { + const target = event.target; + if (target instanceof HTMLDetailsElement) { + const gleanId = target.dataset.gleanToggleOpen; + if (gleanId && target.open) { + gleanClick(gleanId); + } + } +}); + document.addEventListener("click", (event) => { const composedTarget = event.composedPath()?.[0]; if (composedTarget !== event.target && composedTarget instanceof Element) { From 43e18d9fa10787c8c2d542f06d3f04593f24e2a9 Mon Sep 17 00:00:00 2001 From: Claas Augner Date: Wed, 4 Feb 2026 11:22:44 +0100 Subject: [PATCH 07/22] feat(glean): measure breadcrumb clicks Fixes #1036 --- components/breadcrumbs/server.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/components/breadcrumbs/server.js b/components/breadcrumbs/server.js index a709313b9..f4b74e1bf 100644 --- a/components/breadcrumbs/server.js +++ b/components/breadcrumbs/server.js @@ -18,6 +18,7 @@ export class Breadcrumbs extends ServerComponent { return nothing; } + const total = parents.length; return html`
      html`
    1. - ${title} From 5711e37ea0b1b889e8b713557e2d51441891d4bf Mon Sep 17 00:00:00 2001 From: Claas Augner Date: Wed, 4 Feb 2026 11:23:34 +0100 Subject: [PATCH 08/22] feat(glean): add homepage measurements Fixes #1037 --- components/featured-articles/server.js | 13 ++++++++++--- components/latest-news/server.js | 11 ++++++++--- components/recent-contributions/server.js | 5 ++++- 3 files changed, 22 insertions(+), 7 deletions(-) diff --git a/components/featured-articles/server.js b/components/featured-articles/server.js index f4e13a29e..58ba441c4 100644 --- a/components/featured-articles/server.js +++ b/components/featured-articles/server.js @@ -10,16 +10,23 @@ export class FeaturedArticles extends ServerComponent { render(articles) { return html`
        ${articles.map( - (article) => + (article, index) => html`
      • diff --git a/components/latest-news/server.js b/components/latest-news/server.js index 8c3c02194..22e18d2ff 100644 --- a/components/latest-news/server.js +++ b/components/latest-news/server.js @@ -14,16 +14,21 @@ export class LatestNews extends ServerComponent { return html`
          ${items.map( - (item) => + (item, index) => html`
        • ${item.source - ? html`${item.source.name}` : nothing}

          - ${item.title} + ${item.title}

          - ${contribution.title}
          From f58d0e3c8d940d4a05554ed498e7c44c5b96ee3a Mon Sep 17 00:00:00 2001 From: Claas Augner Date: Wed, 4 Feb 2026 11:25:22 +0100 Subject: [PATCH 09/22] feat(glean): measure language switcher Fixes #1038 --- components/language-always-redirect-button/element.js | 2 ++ components/language-switcher/element.js | 5 +++++ components/translation-banner/server.js | 5 ++++- 3 files changed, 11 insertions(+), 1 deletion(-) diff --git a/components/language-always-redirect-button/element.js b/components/language-always-redirect-button/element.js index e44f2b2ca..63a889f39 100644 --- a/components/language-always-redirect-button/element.js +++ b/components/language-always-redirect-button/element.js @@ -1,5 +1,6 @@ import { LitElement, html } from "lit"; +import { gleanClick } from "../../utils/glean.js"; import { setPreferredLocale } from "../preferred-locale/utils.js"; export class MDNLanguageAlwaysRedirectButton extends LitElement { @@ -15,6 +16,7 @@ export class MDNLanguageAlwaysRedirectButton extends LitElement { } _handleClick() { + gleanClick(`language: ${this.locale} -> ${this.to} (always)`); setPreferredLocale(this.to); const url = document.location.pathname.replace( `/${this.locale}/`, diff --git a/components/language-switcher/element.js b/components/language-switcher/element.js index 646c2ef83..4683ba4ab 100644 --- a/components/language-switcher/element.js +++ b/components/language-switcher/element.js @@ -2,6 +2,7 @@ import { Task } from "@lit/task"; import { LitElement, html, nothing } from "lit"; import { L10nMixin } from "../../l10n/mixin.js"; +import { gleanClick } from "../../utils/glean.js"; import infoIcon from "../icon/info.svg?lit"; import { getEnglishDoc } from "../not-found/utils.js"; @@ -63,12 +64,15 @@ export class MDNLanguageSwitcher extends L10nMixin(LitElement) { _togglePreferredLocale() { if (this.notFound) return; + const oldValue = this._preferredLocale ?? "0"; if (this._isLocalePreferred) { resetPreferredLocale(); this._preferredLocale = undefined; + gleanClick(`language_remember: ${oldValue} -> 0`); } else { setPreferredLocale(this.locale); this._preferredLocale = this.locale; + gleanClick(`language_remember: ${oldValue} -> ${this.locale}`); } } @@ -155,6 +159,7 @@ export class MDNLanguageSwitcher extends L10nMixin(LitElement) { `/${notFound ? "en-US" : locale}/`, `/${translation.locale}/`, )} + data-glean-id=${`language: ${locale} -> ${translation.locale}`} >${translation.native}
          • diff --git a/components/translation-banner/server.js b/components/translation-banner/server.js index c5c4b08c7..3b094b3bd 100644 --- a/components/translation-banner/server.js +++ b/components/translation-banner/server.js @@ -99,7 +99,10 @@ export class TranslationBanner extends ServerComponent { // Note: Do not translate, this is intentionally in English. return html`

          - en-US (view)`} >View in English Date: Wed, 4 Feb 2026 11:27:04 +0100 Subject: [PATCH 10/22] feat(glean): add Observatory measurements Fixes #1039 --- components/observatory-form/element.js | 3 +++ components/observatory-results/element.js | 7 ++++++- components/observatory-results/rating.js | 7 ++++++- 3 files changed, 15 insertions(+), 2 deletions(-) diff --git a/components/observatory-form/element.js b/components/observatory-form/element.js index 00b312757..8466763d7 100644 --- a/components/observatory-form/element.js +++ b/components/observatory-form/element.js @@ -1,6 +1,7 @@ import { LitElement, html, nothing } from "lit"; import { createRef, ref } from "lit/directives/ref.js"; +import { gleanClick } from "../../utils/glean.js"; import { OBSERVATORY_API_URL } from "../env/index.js"; import "../progress-bar/element.js"; import "../button/element.js"; @@ -61,6 +62,7 @@ export class MDNObservatoryForm extends LitElement { this._hostname = host; } this._queryRunning = true; + gleanClick("observatory: scan"); try { const apiUrl = new URL( OBSERVATORY_API_URL + @@ -77,6 +79,7 @@ export class MDNObservatoryForm extends LitElement { } catch (error) { // @ts-expect-error this._errorMessage = `${ERROR_MAP[error.name] || "message" in error ? error["message"] : error}`; + gleanClick(`observatory: error -> ${this._errorMessage}`); } finally { this._queryRunning = false; } diff --git a/components/observatory-results/element.js b/components/observatory-results/element.js index feb9f07ea..f56d994b6 100644 --- a/components/observatory-results/element.js +++ b/components/observatory-results/element.js @@ -2,6 +2,7 @@ import { Task } from "@lit/task"; import { LitElement, html } from "lit"; import { nothing } from "lit"; +import { gleanClick } from "../../utils/glean.js"; import { OBSERVATORY_API_URL } from "../env/index.js"; import styles from "./element.css?lit"; @@ -62,7 +63,9 @@ export class MDNObservatoryResults extends LitElement { } return await res.json(); } catch (error) { - throw new Error("Observatory API request for scan data failed", { + const message = "Observatory API request for scan data failed"; + gleanClick(`observatory: error -> ${message}`); + throw new Error(message, { cause: error, }); } @@ -116,6 +119,7 @@ export class MDNObservatoryResults extends LitElement { if (!this.host) { return; } + gleanClick("observatory: rescan"); this._usePostInApi = true; this._apiTask.run(); } @@ -127,6 +131,7 @@ export class MDNObservatoryResults extends LitElement { */ _handleTabSelect(index, key) { this.selectedTab = index; + gleanClick(`observatory: tab -> ${key}`); globalThis.history.replaceState( "", "", diff --git a/components/observatory-results/rating.js b/components/observatory-results/rating.js index f43b63320..328b72c97 100644 --- a/components/observatory-results/rating.js +++ b/components/observatory-results/rating.js @@ -65,7 +65,12 @@ export function Rating({ result, host, rescan }) { @click=${rescan} >

          - Scan another website + + Scan another website +
          From 09c3aea44b3fbefd8fa6a9a9619ef3392a09241c Mon Sep 17 00:00:00 2001 From: Claas Augner Date: Wed, 4 Feb 2026 11:31:05 +0100 Subject: [PATCH 11/22] feat(glean): port view measurements Fixes #1040 --- components/compat-table/element.js | 11 ++++++++++- components/curriculum-landing/server.js | 5 ++++- components/placement-top/element.js | 20 +++++++++++++++---- components/scrim-inline/element.js | 18 ++++++++++++++++- hooks/glean-init.js | 26 +++++++++++++++++++++++++ 5 files changed, 73 insertions(+), 7 deletions(-) diff --git a/components/compat-table/element.js b/components/compat-table/element.js index 3540f78c3..2321ee6b0 100644 --- a/components/compat-table/element.js +++ b/components/compat-table/element.js @@ -1,8 +1,11 @@ import { LitElement, html, nothing } from "lit"; import { ifDefined } from "lit/directives/if-defined.js"; +import { createRef, ref } from "lit/directives/ref.js"; import { unsafeHTML } from "lit/directives/unsafe-html.js"; import { L10nMixin } from "../../l10n/mixin.js"; +import { gleanClick } from "../../utils/glean.js"; +import { ViewedController } from "../viewed-controller/viewed-controller.js"; import { DEFAULT_LOCALE, ISSUE_METADATA_TEMPLATE } from "./constants.js"; import styles from "./element.css?lit"; @@ -73,6 +76,9 @@ export class MDNCompatTable extends L10nMixin(LitElement) { static styles = styles; + /** @type {import("lit/directives/ref.js").Ref} */ + _ref = createRef(); + constructor() { super(); this.query = ""; @@ -88,6 +94,9 @@ export class MDNCompatTable extends L10nMixin(LitElement) { this._browsers = []; /** @type {string|undefined} */ this._showTimelineId = undefined; + new ViewedController(this, this._ref, () => { + gleanClick(`bcd: view -> ${this.query}`); + }); } get _breadcrumbs() { @@ -255,7 +264,7 @@ export class MDNCompatTable extends L10nMixin(LitElement) { } _renderTable() { - return html`
          + return html`
          ${this._renderIssueLink()} +

          Learn the curriculum with Scrimba and become job ready

          diff --git a/components/placement-top/element.js b/components/placement-top/element.js index e3ccfaf30..4e7bfc41c 100644 --- a/components/placement-top/element.js +++ b/components/placement-top/element.js @@ -1,12 +1,14 @@ import { LitElement, html, nothing } from "lit"; -import { ref } from "lit/directives/ref.js"; +import { createRef, ref } from "lit/directives/ref.js"; import { styleMap } from "lit/directives/style-map.js"; +import { gleanClick } from "../../utils/glean.js"; +import { PlacementMixin } from "../placement/mixin.js"; +import { ViewedController } from "../viewed-controller/viewed-controller.js"; + import "../placement-note/element.js"; import "../placement-no/element.js"; -import { PlacementMixin } from "../placement/mixin.js"; - import styles from "./element.css?lit"; /** @@ -17,6 +19,16 @@ import styles from "./element.css?lit"; export class MDNPlacementTop extends PlacementMixin(LitElement) { static styles = styles; + /** @type {import("lit/directives/ref.js").Ref} */ + _ref = createRef(); + + constructor() { + super(); + new ViewedController(this, this._ref, () => { + gleanClick("banner_scrimba_view"); + }); + } + /** * * @returns {TemplateResult | symbol} @@ -27,7 +39,7 @@ export class MDNPlacementTop extends PlacementMixin(LitElement) { renderFallback() { return html` -
          +

          Learn frontend, backend, and AI from our course partner } */ + _ref = createRef(); + constructor() { super(); /** @type {string | undefined} */ @@ -41,6 +47,12 @@ export class MDNScrimInline extends L10nMixin(LitElement) { this._fullscreen = false; /** @type {boolean} */ this._scrimLoaded = false; + + new ViewedController(this, this._ref, () => { + if (this._scrimId) { + gleanClick(`curriculum: scrim view id:${this._scrimId}`); + } + }); } /** @@ -76,7 +88,11 @@ export class MDNScrimInline extends L10nMixin(LitElement) { } return html` -

          +
          { } }); +// View tracking for elements with data-glean-view attribute +const viewedElements = new WeakSet(); +const viewObserver = new IntersectionObserver( + (entries) => { + for (const entry of entries) { + if ( + entry.isIntersecting && + entry.target instanceof HTMLElement && + !viewedElements.has(entry.target) + ) { + const gleanId = entry.target.dataset.gleanView; + if (gleanId) { + viewedElements.add(entry.target); + gleanClick(gleanId); + viewObserver.unobserve(entry.target); + } + } + } + }, + { threshold: 0.5 }, +); + +for (const element of document.querySelectorAll("[data-glean-view]")) { + viewObserver.observe(element); +} + document.addEventListener("click", (event) => { const composedTarget = event.composedPath()?.[0]; if (composedTarget !== event.target && composedTarget instanceof Element) { From 084166e222d1e03be0e23676a79b1c0f8d883feb Mon Sep 17 00:00:00 2001 From: Claas Augner Date: Wed, 4 Feb 2026 11:31:42 +0100 Subject: [PATCH 12/22] feat(glean): measure About tab changes Fixes #1041 --- components/about-tabs/element.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/components/about-tabs/element.js b/components/about-tabs/element.js index b06ffbed8..c1cd32c10 100644 --- a/components/about-tabs/element.js +++ b/components/about-tabs/element.js @@ -1,5 +1,7 @@ import { LitElement, html } from "lit"; +import { gleanClick } from "../../utils/glean.js"; + import styles from "./element.css?lit"; export class MDNAboutTabs extends LitElement { @@ -86,6 +88,7 @@ export class MDNAboutTabs extends LitElement { e.preventDefault(); if (tabEl.dataset.panelId) { globalThis.location.hash = tabEl.dataset.panelId; + gleanClick(`about: tab -> ${tabEl.dataset.panelId}`); } this.active_index = i; From 2ea560f14992f4ec569ce2c783370a3fd24b9615 Mon Sep 17 00:00:00 2001 From: Claas Augner Date: Wed, 4 Feb 2026 11:32:14 +0100 Subject: [PATCH 13/22] feat(glean): measure menu dropdown clicks Fixes #1062 --- components/menu/server.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/components/menu/server.js b/components/menu/server.js index fb4cc6a05..b3f0e0317 100644 --- a/components/menu/server.js +++ b/components/menu/server.js @@ -72,7 +72,12 @@ export class Menu extends ServerComponent { >${tab.buttonText}` : html` -