chore(telemetry): measure homepage link clicks (#11978)

- Featured articles
- Latest news
- Recent contributions

Author: caugner

client/src/homepage/featured-articles/index.tsx

@@ -1,6 +1,8 @@
 import useSWR from "swr";
+
 import { DEV_MODE } from "../../env";
 import { HydrationData } from "../../../../libs/types/hydration";
+import { HOMEPAGE, HOMEPAGE_ITEMS } from "../../telemetry/constants";
 
 import "./index.scss";
 
@@ -27,16 +29,25 @@ export default function FeaturedArticles(props: HydrationData<any>) {
     <div className="featured-articles">
       <h2>Featured articles</h2>
       <div className="tile-container">
-        {hyData.featuredArticles.map((article) => {
+        {hyData.featuredArticles.map((article, index) => {
           return (
             <div className="article-tile" key={article.mdn_url}>
               {article.tag && (
-                <a href={article.tag.uri} className="tile-tag">
+                <a
+                  href={article.tag.uri}
+                  className="tile-tag"
+                  data-glean={`${HOMEPAGE}: ${HOMEPAGE_ITEMS.ARTICLE_TAG} ${index + 1}`}
+                >
                   {article.tag.title}
                 </a>
               )}
               <h3 className="tile-title">
-                <a href={article.mdn_url}>{article.title}</a>
+                <a
+                  href={article.mdn_url}
+                  data-glean={`${HOMEPAGE}: ${HOMEPAGE_ITEMS.ARTICLE} ${index + 1}`}
+                >
+                  {article.title}
+                </a>
               </h3>
               <p>{article.summary}</p>
             </div>

client/src/homepage/latest-news/index.tsx

@@ -1,9 +1,11 @@
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
 import useSWR from "swr";
+
 import { DEV_MODE } from "../../env";
 import { HydrationData } from "../../../../libs/types/hydration";
 import { NewsItem } from "../../../../libs/types/document";
+import { HOMEPAGE, HOMEPAGE_ITEMS } from "../../telemetry/constants";
 
 import "./index.scss";
 
@@ -35,13 +37,15 @@ export function LatestNews(props: HydrationData<any>) {
     return null;
   }
 
-  function NewsItemTitle({ newsItem }: { newsItem: NewsItem }) {
+  function NewsItemTitle({ newsItem, ...attributes }: { newsItem: NewsItem }) {
     const ageInDays = dayjs().diff(newsItem.published_at, "day");
     const isNew = ageInDays < 7;
 
     return (
       <>
-        <a href={newsItem.url}>{newsItem.title}</a>
+        <a href={newsItem.url} {...attributes}>
+          {newsItem.title}
+        </a>
         {isNew && (
           <>
             {" "}
@@ -52,11 +56,11 @@ export function LatestNews(props: HydrationData<any>) {
     );
   }
 
-  function NewsItemSource({ newsItem }: { newsItem: NewsItem }) {
+  function NewsItemSource({ newsItem, ...attributes }: { newsItem: NewsItem }) {
     const { source } = newsItem;
 
     return (
-      <a className="news-source" href={source.url}>
+      <a className="news-source" href={source.url} {...attributes}>
         {source.name}
       </a>
     );
@@ -72,14 +76,20 @@ export function LatestNews(props: HydrationData<any>) {
     <section className="latest-news">
       <h2>Latest news</h2>
       <ul className="news-list">
-        {newsItems.map((newsItem) => (
+        {newsItems.map((newsItem, index) => (
           <li className="news-item" key={newsItem.url}>
             <p className="news-title">
               <span>
-                <NewsItemTitle newsItem={newsItem} />
+                <NewsItemTitle
+                  newsItem={newsItem}
+                  data-glean={`${HOMEPAGE}: ${HOMEPAGE_ITEMS.NEWS} ${index + 1}`}
+                />
               </span>
               <span>
-                <NewsItemSource newsItem={newsItem} />
+                <NewsItemSource
+                  newsItem={newsItem}
+                  data-glean={`${HOMEPAGE}: ${HOMEPAGE_ITEMS.NEWS_SOURCE} ${index + 1}`}
+                />
               </span>
             </p>
             <span className="news-date" suppressHydrationWarning>

client/src/homepage/recent-contributions/index.tsx

@@ -1,8 +1,10 @@
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
 import useSWR from "swr";
+
 import { DEV_MODE } from "../../env";
 import { HydrationData } from "../../../../libs/types/hydration";
+import { HOMEPAGE, HOMEPAGE_ITEMS } from "../../telemetry/constants";
 
 import "./index.scss";
 
@@ -33,12 +35,21 @@ function RecentContributions(props: HydrationData<any>) {
       <h2>Recent contributions</h2>
       <ul className="contribution-list">
         {hyData.recentContributions.items.map(
-          ({ number, url, title, updated_at, repo }) => (
+          ({ number, url, title, updated_at, repo }, index) => (
             <li className="request-item" key={number}>
               <p className="request-title">
-                <a href={url}>{title}</a>
+                <a
+                  href={url}
+                  data-glean={`${HOMEPAGE}: ${HOMEPAGE_ITEMS.CONTRIBUTION} ${index + 1}`}
+                >
+                  {title}
+                </a>
                 <span>
-                  <a className="request-repo" href={repo.url}>
+                  <a
+                    className="request-repo"
+                    href={repo.url}
+                    data-glean={`${HOMEPAGE}: ${HOMEPAGE_ITEMS.CONTRIBUTION_REPO} ${index + 1}`}
+                  >
                     {repo.name}
                   </a>
                 </span>

client/src/telemetry/constants.ts

@@ -86,3 +86,12 @@ export const LANGUAGE_REMEMBER = "language_remember";
 export const THEME_SWITCHER = "theme_switcher";
 export const SURVEY = "survey";
 export const HOMEPAGE_HERO = "homepage_hero";
+export const HOMEPAGE = "homepage";
+export const HOMEPAGE_ITEMS = Object.freeze({
+  ARTICLE: "article",
+  ARTICLE_TAG: "article_tag",
+  NEWS: "news",
+  NEWS_SOURCE: "news_source",
+  CONTRIBUTION: "contribution",
+  CONTRIBUTION_REPO: "contribution_repo",
+});