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`<ul class="a11y-menu">
-      <li><a href="#content">${context.l10n`Skip to main content`}</a></li>
-      <li><a href="#search">${context.l10n`Skip to search`}</a></li>
+      <li>
+        <a href="#content" data-glean-id="a11y_menu: click #content"
+          >${context.l10n`Skip to main content`}</a
+        >
+      </li>
+      <li>
+        <a href="#search" data-glean-id="a11y_menu: click #search"
+          >${context.l10n`Skip to search`}</a
+        >
+      </li>
     </ul>`;
   }
 }
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;
 
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`
       <ol
         class="breadcrumbs"
@@ -27,7 +28,11 @@ export class Breadcrumbs extends ServerComponent {
         ${parents.map(
           ({ uri, title }, index) => html`
             <li property="itemListElement" typeof="ListItem">
-              <a href=${uri} property="item" typeof="WebPage"
+              <a
+                href=${uri}
+                property="item"
+                typeof="WebPage"
+                data-glean-id="breadcrumb_click: ${total - index}/${total}"
                 ><span property="name">${title}</span></a
               >
               <meta property="position" content=${index + 1} />
diff --git a/components/collection-save-button/element.js b/components/collection-save-button/element.js
index c8a3cc91f..144c094b0 100644
--- a/components/collection-save-button/element.js
+++ b/components/collection-save-button/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 { globalUser } from "../user/context.js";
 
 import styles from "./element.css?lit";
@@ -89,6 +90,7 @@ export class MDNCollectionSaveButton extends L10nMixin(LitElement) {
   });
 
   _open() {
+    gleanClick("article_actions_collections_opened");
     this._bookmarks.run();
     this._collections.run();
     this.shadowRoot?.querySelector("mdn-modal")?.showModal();
@@ -98,7 +100,9 @@ export class MDNCollectionSaveButton extends L10nMixin(LitElement) {
   _selectChange({ target }) {
     if (target instanceof HTMLSelectElement) {
       const { value } = target;
+      gleanClick("article_actions_collection_select_opened");
       if (value === ADD_VALUE) {
+        gleanClick("article_actions_new_collection");
         this.shadowRoot?.querySelector("mdn-modal")?.close();
         open("/en-US/plus/collections");
       } else {
@@ -149,6 +153,9 @@ export class MDNCollectionSaveButton extends L10nMixin(LitElement) {
       this._lastAction = "save";
 
       const url = `/api/v2/collections/${collectionId}/items/${item ? `${item.id}/` : ""}`;
+
+      gleanClick("new_collection_modal_submit_article_actions");
+
       const res = await fetch(url, {
         body: JSON.stringify({
           url: this.docUrl,
diff --git a/components/color-theme/element.js b/components/color-theme/element.js
index 639017a99..9d7ee9156 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,13 @@ export class MDNColorTheme extends L10nMixin(LitElement) {
     }
   }
 
+  /** @param {Event} event */
+  _onDropdownToggle({ target }) {
+    if (target instanceof HTMLElement && "open" in target) {
+      gleanClick(`theme_switcher: ${target.open ? "open" : "close"}`);
+    }
+  }
+
   /**
    * @param {import("lit").PropertyValues<this>} changedProperties
    */
@@ -61,7 +71,7 @@ export class MDNColorTheme extends L10nMixin(LitElement) {
 
   render() {
     return html`<div class="color-theme">
-      <mdn-dropdown>
+      <mdn-dropdown @toggle=${this._onDropdownToggle}>
         <button
           part="button"
           slot="button"
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<HTMLElement>} */
+  _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`<figure class="table-container">
+    return html`<figure ${ref(this._ref)} class="table-container">
       <figure class="table-container-inner">
         ${this._renderIssueLink()}
         <table
diff --git a/components/curriculum-landing/server.js b/components/curriculum-landing/server.js
index d70787293..3b307f2bd 100644
--- a/components/curriculum-landing/server.js
+++ b/components/curriculum-landing/server.js
@@ -257,7 +257,10 @@ export class CurriculumLanding extends ServerComponent {
     const bannerLight = partnerBannerLight;
 
     return html`
-      <section class="curriculum-partner-banner-container">
+      <section
+        class="curriculum-partner-banner-container"
+        data-glean-view="curriculum: partner banner view"
+      >
         <div class="partner-banner">
           <section>
             <h2>Learn the curriculum with Scrimba and become job ready</h2>
diff --git a/components/dropdown/element.js b/components/dropdown/element.js
index d4f1bb98c..eb3bf04ba 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 },
   };
 
@@ -96,8 +96,14 @@ export class MDNDropdown extends LitElement {
     `;
   }
 
-  updated() {
+  /**
+   * @param {import("lit").PropertyValues<this>} changedProperties
+   */
+  updated(changedProperties) {
     this._setAriaAttributes();
+    if (changedProperties.has("open")) {
+      this.dispatchEvent(new Event("toggle", { bubbles: true }));
+    }
   }
 
   firstUpdated() {
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`<ul class="featured-articles">
       ${articles.map(
-        (article) =>
+        (article, index) =>
           html`<li>
             <article class="featured-articles__article">
               ${article.tag
-                ? html`<a class="featured-articles__tag" href=${article.tag.uri}
+                ? html`<a
+                    class="featured-articles__tag"
+                    href=${article.tag.uri}
+                    data-glean-id="homepage: article_tag ${index + 1}"
                     >${article.tag.title}</a
                   >`
                 : nothing}
               <h3 class="featured-articles__title">
-                <a href=${article.mdn_url}>${article.title}</a>
+                <a
+                  href=${article.mdn_url}
+                  data-glean-id="homepage: article ${index + 1}"
+                  >${article.title}</a
+                >
               </h3>
               <p class="featured-articles__summary">${article.summary}</p>
             </article>
diff --git a/components/footer/server.js b/components/footer/server.js
index b88fb866a..655d3c530 100644
--- a/components/footer/server.js
+++ b/components/footer/server.js
@@ -178,6 +178,7 @@ export class Footer extends ServerComponent {
                     rel="noopener"
                     aria-label=${item.ariaLabel}
                     data-icon=${item.icon}
+                    data-glean-id=${`footer: social -> ${item.icon}`}
                   ></a>
                 </li>
               `,
@@ -198,6 +199,7 @@ export class Footer extends ServerComponent {
                             class=${link.external ? "external" : ""}
                             target=${link.external ? "_blank" : undefined}
                             rel=${link.external ? "noopener" : undefined}
+                            data-glean-id=${`footer: link -> ${link.href}`}
                           >
                             ${link.text}
                           </a>
@@ -222,7 +224,10 @@ export class Footer extends ServerComponent {
             ${mozillaLinks(context).map(
               (item) => html`
                 <li>
-                  <a href=${item.href} class=${item.external ? "external" : ""}
+                  <a
+                    href=${item.href}
+                    class=${item.external ? "external" : ""}
+                    data-glean-id=${`footer: mozilla -> ${item.href}`}
                     >${item.text}</a
                   >
                 </li>
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`<li class="generic-toc__item">
-              <a class="generic-toc__link" href="#${id}">${text}</a>
+              <a
+                class="generic-toc__link"
+                href="#${id}"
+                data-glean-id="toc_click: #${id}"
+                >${text}</a
+              >
             </li>`,
         )}
       </ul>
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}</a
             >
           </li>
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`<ul class="latest-news">
       ${items.map(
-        (item) =>
+        (item, index) =>
           html`<li>
             <article class="latest-news__item">
               ${item.source
-                ? html`<a class="latest-news__source" href=${item.source.url}
+                ? html`<a
+                    class="latest-news__source"
+                    href=${item.source.url}
+                    data-glean-id="homepage: news_source ${index + 1}"
                     >${item.source.name}</a
                   >`
                 : nothing}
               <h3 class="latest-news__title">
-                <a href=${item.url}>${item.title}</a>
+                <a href=${item.url} data-glean-id="homepage: news ${index + 1}"
+                  >${item.title}</a
+                >
               </h3>
               <time class="latest-news__date" datetime=${item.published_at}>
                 ${rtf.format(
diff --git a/components/login-button/element.js b/components/login-button/element.js
index c292d5fcf..f2fa292c8 100644
--- a/components/login-button/element.js
+++ b/components/login-button/element.js
@@ -16,7 +16,7 @@ export class MDNLoginButton extends L10nMixin(LitElement) {
   }
 
   render() {
-    return html`<mdn-button href=${this._loginUrl}
+    return html`<mdn-button href=${this._loginUrl} data-glean-id="login_button"
       >${this.l10n`Login`}</mdn-button
     >`;
   }
diff --git a/components/menu/server.js b/components/menu/server.js
index fb4cc6a05..af2e0d2d4 100644
--- a/components/menu/server.js
+++ b/components/menu/server.js
@@ -72,7 +72,12 @@ export class Menu extends ServerComponent {
                   >${tab.buttonText}</a
                 >`
               : html`<mdn-dropdown>
-                  <button class="menu__tab-button" type="button" slot="button">
+                  <button
+                    class="menu__tab-button"
+                    type="button"
+                    slot="button"
+                    data-glean-id=${`menu_toggle: ${tab.id}`}
+                  >
                     ${typeof tab.buttonText === "string"
                       ? html`<span class="menu__tab-label"
                           >${tab.buttonText}</span
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}
         ></mdn-observatory-rescan-button>
         <div class="scan-another">
-          <a href="/en-US/observatory"> Scan another website </a>
+          <a
+            href="/en-US/observatory"
+            data-glean-id="observatory: scan-another"
+          >
+            Scan another website
+          </a>
         </div>
       </section>
     </section>
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<HTMLElement>} */
+  _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`
-      <div class="fallback">
+      <div ${ref(this._ref)} class="fallback">
         <p class="fallback__copy">
           Learn frontend, backend, and AI from our course partner
           <a
diff --git a/components/playground/element.js b/components/playground/element.js
index 5fa9fe858..7c7ccbf0c 100644
--- a/components/playground/element.js
+++ b/components/playground/element.js
@@ -70,6 +70,7 @@ export class MDNPlayground extends L10nMixin(LitElement) {
   }
 
   _share() {
+    gleanClick("playground: share-click");
     this._shareModal.value?.showModal();
   }
 
@@ -95,6 +96,7 @@ export class MDNPlayground extends L10nMixin(LitElement) {
       confirm(this.l10n`Do you really want to revert your changes?`) &&
       controller
     ) {
+      gleanClick("playground: reset-click");
       controller.reset();
       this._storeSession();
       this.requestUpdate();
@@ -104,6 +106,7 @@ export class MDNPlayground extends L10nMixin(LitElement) {
   async _copyMarkdown() {
     const controller = this._controller.value;
     if (controller) {
+      gleanClick("playground: share-markdown");
       const markdown = Object.entries(controller.code)
         .map(
           ([lang, code]) =>
@@ -121,6 +124,7 @@ ${"```"}`,
   async _createPermalink() {
     const controller = this._controller.value;
     if (controller) {
+      gleanClick("playground: share-permalink");
       const res = await fetch("/api/v1/play/", {
         method: "POST",
         headers: {
@@ -256,6 +260,7 @@ ${"```"}`,
   }
 
   _reportOpen() {
+    gleanClick("playground: flag-click");
     this._reportModal.value?.showModal();
   }
 
@@ -379,8 +384,14 @@ ${"```"}`,
         <section>
           <h2>${this.l10n`Share your code via Permalink`}</h2>
           ${this._user.render({
-            initial: () => html`<mdn-login-button></mdn-login-button>`,
-            pending: () => html`<mdn-login-button></mdn-login-button>`,
+            initial: () =>
+              html`<mdn-login-button
+                data-glean-id="playground: banner-login"
+              ></mdn-login-button>`,
+            pending: () =>
+              html`<mdn-login-button
+                data-glean-id="playground: banner-login"
+              ></mdn-login-button>`,
             complete: (user) =>
               user.isAuthenticated
                 ? this._permalink && !isResettable
@@ -395,7 +406,9 @@ ${"```"}`,
                   : html`<mdn-button @click=${this._createPermalink}
                       >${this.l10n`Create link`}</mdn-button
                     >`
-                : html`<mdn-login-button></mdn-login-button>`,
+                : html`<mdn-login-button
+                    data-glean-id="playground: banner-login"
+                  ></mdn-login-button>`,
           })}
         </section>
       </mdn-modal>
diff --git a/components/recent-contributions/server.js b/components/recent-contributions/server.js
index 834d5093a..0675cb223 100644
--- a/components/recent-contributions/server.js
+++ b/components/recent-contributions/server.js
@@ -33,7 +33,10 @@ export class RecentContributions extends ServerComponent {
               )}
             </time>
             <div class="recent-contributions__title">
-              <a class="external" href=${contribution.url}
+              <a
+                class="external"
+                href=${contribution.url}
+                data-glean-id="homepage: contribution ${index + 1}"
                 >${contribution.title}</a
               >
             </div>
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 {
       <ul>
         ${toc?.map(
           ({ id, text }) =>
-            html`<li><a href="#${id}">${unsafeHTML(text)}</a></li>`,
+            html`<li>
+              <a href="#${id}" data-glean-id="toc_click: #${id}"
+                >${unsafeHTML(text)}</a
+              >
+            </li>`,
         )}
       </ul>
     </nav>`;
diff --git a/components/scrim-inline/element.js b/components/scrim-inline/element.js
index d3552707f..bb1f456f9 100644
--- a/components/scrim-inline/element.js
+++ b/components/scrim-inline/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 { styleMap } from "lit/directives/style-map.js";
 
 import { L10nMixin } from "../../l10n/mixin.js";
+import { gleanClick } from "../../utils/glean.js";
+import { ViewedController } from "../viewed-controller/viewed-controller.js";
 
 import playSvg from "./assets/scrim-play.svg?lit";
 import styles from "./element.css?lit";
@@ -20,6 +23,9 @@ export class MDNScrimInline extends L10nMixin(LitElement) {
     _scrimLoaded: { state: true },
   };
 
+  /** @type {import("lit/directives/ref.js").Ref<HTMLElement>} */
+  _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`
-      <dialog @close=${this.#dialogClosed} style=${styleMap(this._imgStyle)}>
+      <dialog
+        ${ref(this._ref)}
+        @close=${this.#dialogClosed}
+        style=${styleMap(this._imgStyle)}
+      >
         <div class="inner">
           <div class="header">
             <span
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
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`<p class="translation-banner__switch" lang="en-US">
-      <mdn-button data-variant="secondary" href=${url}
+      <mdn-button
+        data-variant="secondary"
+        href=${url}
+        data-glean-id=${`language: ${context.locale} -> en-US (view)`}
         >View in English</mdn-button
       >
       <mdn-language-always-redirect-button locale=${context.locale} to="en-US"
diff --git a/components/user-menu/element.js b/components/user-menu/element.js
index dbb466003..4503be1b9 100644
--- a/components/user-menu/element.js
+++ b/components/user-menu/element.js
@@ -125,6 +125,7 @@ export class MDNUserMenu extends L10nMixin(LitElement) {
                   href=${this.#loginUrl()}
                   .icon=${logInIcon}
                   variant="plain"
+                  data-glean-id="top_nav: login"
                 >
                   ${this.l10n("login")}
                 </mdn-button>
diff --git a/hooks/glean-init.js b/hooks/glean-init.js
index e01494c45..58d5b38eb 100644
--- a/hooks/glean-init.js
+++ b/hooks/glean-init.js
@@ -23,6 +23,44 @@ Glean.initialize(GLEAN_APP_ID, uploadEnabled, {
   channel: GLEAN_CHANNEL,
 });
 
+// data-glean-toggle-open
+document.addEventListener("toggle", (event) => {
+  const target = event.target;
+  if (target instanceof HTMLDetailsElement) {
+    const gleanId = target.dataset.gleanToggleOpen;
+    if (gleanId && target.open) {
+      gleanClick(gleanId);
+    }
+  }
+});
+
+// data-glean-view
+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);
+}
+
+// data-glean-id
 document.addEventListener("click", (event) => {
   const composedTarget = event.composedPath()?.[0];
   if (composedTarget !== event.target && composedTarget instanceof Element) {
@@ -49,5 +87,14 @@ document.addEventListener("click", (event) => {
     ) {
       gleanClick(`external-link: ${anchor.href}`);
     }
+
+    // Sidebar click measurement.
+    if (anchor instanceof HTMLAnchorElement && anchor.href) {
+      const sidebar = anchor.closest(".left-sidebar");
+      if (sidebar) {
+        const href = anchor.getAttribute("href") || anchor.href;
+        gleanClick(`sidebar_click: sidebar ${href}`);
+      }
+    }
   }
 });