From f7588284b401fed460d42876c2942663f56cadfe Mon Sep 17 00:00:00 2001 From: Paul Wackerow <54227730+wackerow@users.noreply.github.com> Date: Tue, 24 Sep 2024 13:17:09 -0700 Subject: [PATCH 1/2] matomo: add "popular topics" events --- src/components/Homepage/useHome.ts | 5 ++++ src/pages/index.tsx | 37 ++++++++++++++++++------------ 2 files changed, 27 insertions(+), 15 deletions(-) diff --git a/src/components/Homepage/useHome.ts b/src/components/Homepage/useHome.ts index 9129d29e14a..a5a002ce016 100644 --- a/src/components/Homepage/useHome.ts +++ b/src/components/Homepage/useHome.ts @@ -127,28 +127,33 @@ export const useHome = () => { label: t("page-index:page-index-popular-topics-ethereum"), Svg: EthTokenIcon, href: "/what-is-ethereum/", + eventName: "ethereum", }, { label: t("page-index:page-index-popular-topics-wallets"), Svg: PickWalletIcon, href: "/wallets/", + eventName: "wallets", }, { label: t("page-index:page-index-popular-topics-start"), Svg: BlockHeap, href: "/guides/", + eventName: "start guides", }, { label: t("page-index:page-index-popular-topics-whitepaper"), Svg: Whitepaper, className: cn(isRtl && "[&_svg]:-scale-x-100"), href: "/whitepaper/", + eventName: "whitepaper", }, { label: t("page-index:page-index-popular-topics-roadmap"), Svg: RoadmapSign, className: cn(isRtl && "[&_svg]:-scale-x-100"), href: "/roadmap/", + eventName: "roadmap", }, ] diff --git a/src/pages/index.tsx b/src/pages/index.tsx index e0357f52d2b..fcbe892bf40 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -357,21 +357,28 @@ const HomePage = ({ {t("page-index:page-index-popular-topics-header")}
- {popularTopics.map(({ label, Svg, href, className }) => ( - :first-child]:flex-row", - className - )} - > -

- {label} -

- - ))} + {popularTopics.map( + ({ label, Svg, href, eventName, className }) => ( + :first-child]:flex-row", + className + )} + customEventOptions={{ + eventCategory: "Homepage", + eventAction: "popular topics", + eventName, + }} + > +

+ {label} +

+ + ) + )}
Date: Tue, 24 Sep 2024 13:53:02 -0700 Subject: [PATCH 2/2] fix(matomo): add locale to event category name Break Homepage metrics into per-locale dashboards --- src/components/Homepage/BentoCard.tsx | 4 ++- src/components/Homepage/ValuesMarquee.tsx | 8 +++-- src/components/Homepage/useHome.ts | 3 ++ src/components/Homepage/useValuesMarquee.ts | 6 +++- src/pages/index.tsx | 35 +++++++++++---------- 5 files changed, 36 insertions(+), 20 deletions(-) diff --git a/src/components/Homepage/BentoCard.tsx b/src/components/Homepage/BentoCard.tsx index 8dff25a23c1..ff212f3cdac 100644 --- a/src/components/Homepage/BentoCard.tsx +++ b/src/components/Homepage/BentoCard.tsx @@ -18,6 +18,7 @@ export type BentoCardProps = HTMLAttributes & { imgHeight?: number title: string eventName: string + eventCategory: string } const BentoCard = ({ @@ -30,6 +31,7 @@ const BentoCard = ({ imgHeight, title, eventName, + eventCategory, }: BentoCardProps) => ( & { separatorClass: string container?: HTMLElement | null label: string + eventCategory: string } const Item = ({ @@ -34,13 +35,14 @@ const Item = ({ separatorClass, container, label, + eventCategory, }: ItemProps) => ( <> { trackCustomEvent({ - eventCategory: "Homepage", + eventCategory, eventAction: "internet_changing", eventName: label, }) @@ -138,7 +140,7 @@ const Row = forwardRef( Row.displayName = "Row" const ValuesMarquee = () => { - const { t, pairings } = useValuesMarquee() + const { t, pairings, eventCategory } = useValuesMarquee() const containerFirstRef = useRef(null) const containerSecondRef = useRef(null) @@ -182,6 +184,7 @@ const ValuesMarquee = () => { pairing={pairing} separatorClass="bg-accent-a" className="group/item bg-blue-100 text-blue-600 hover:bg-blue-600 hover:text-white dark:hover:bg-blue-700" + eventCategory={eventCategory} > {pairing.ethereum.label} @@ -202,6 +205,7 @@ const ValuesMarquee = () => { pairing={pairing} className="bg-gray-200/20 text-body-medium hover:bg-gray-600 hover:text-white dark:bg-gray-950 dark:text-body" separatorClass="bg-gray-200 dark:bg-gray-950" + eventCategory={eventCategory} > {pairing.legacy.label} diff --git a/src/components/Homepage/useHome.ts b/src/components/Homepage/useHome.ts index a5a002ce016..09f75ed791a 100644 --- a/src/components/Homepage/useHome.ts +++ b/src/components/Homepage/useHome.ts @@ -40,6 +40,8 @@ export const useHome = () => { const { direction, isRtl } = useRtlFlip() + const eventCategory = `Homepage - ${locale}` + const toggleCodeExample = (id: number): void => { setActiveCode(id) setModalOpen(true) @@ -222,5 +224,6 @@ export const useHome = () => { upcomingEvents, joinActions, bentoItems, + eventCategory, } } diff --git a/src/components/Homepage/useValuesMarquee.ts b/src/components/Homepage/useValuesMarquee.ts index 26e6f2b965f..2189c924471 100644 --- a/src/components/Homepage/useValuesMarquee.ts +++ b/src/components/Homepage/useValuesMarquee.ts @@ -1,3 +1,4 @@ +import { useRouter } from "next/router" import { useTranslation } from "next-i18next" type Item = { @@ -12,6 +13,7 @@ export type Pairing = { export const useValuesMarquee = () => { const { t } = useTranslation("page-index") + const { locale } = useRouter() const pairings: Pairing[] = [ { legacy: { @@ -94,5 +96,7 @@ export const useValuesMarquee = () => { }, ] - return { t, pairings } + const eventCategory = `Homepage - ${locale}` + + return { t, pairings, eventCategory } } diff --git a/src/pages/index.tsx b/src/pages/index.tsx index fcbe892bf40..8056dfba0f1 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -198,6 +198,7 @@ const HomePage = ({ upcomingEvents, joinActions, bentoItems, + eventCategory, } = useHome() const { onCopy, hasCopied } = useClipboard() @@ -225,7 +226,7 @@ const HomePage = ({ href={href} label={label} customEventOptions={{ - eventCategory: "Homepage", + eventCategory, eventAction: "Top 4 CTAs", eventName: subHeroCTAs[idx].eventName, }} @@ -282,7 +283,7 @@ const HomePage = ({ effect="cards" onSlideChange={({ activeIndex }) => { trackCustomEvent({ - eventCategory: "Homepage", + eventCategory, eventAction: "mobile use cases", eventName: `swipe to card ${activeIndex + 1}`, }) @@ -295,6 +296,7 @@ const HomePage = ({ {...item} className={cn(className, "bg-background text-body")} imgWidth={undefined} // Intentionally last to override box + eventCategory={eventCategory} /> ))} @@ -307,6 +309,7 @@ const HomePage = ({ key={item.title} {...item} className={cn(className, "max-lg:hidden")} // Desktop only + eventCategory={eventCategory} /> ))} @@ -368,7 +371,7 @@ const HomePage = ({ className )} customEventOptions={{ - eventCategory: "Homepage", + eventCategory, eventAction: "popular topics", eventName, }} @@ -388,7 +391,7 @@ const HomePage = ({ isSecondary className="max-sm:self-start" customEventOptions={{ - eventCategory: "Homepage", + eventCategory, eventAction: "learn", eventName: "learn", }} @@ -425,7 +428,7 @@ const HomePage = ({ size="lg" className="w-fit" customEventOptions={{ - eventCategory: "Homepage", + eventCategory, eventAction: "builders", eventName: "developers", }} @@ -440,7 +443,7 @@ const HomePage = ({ isSecondary className="w-fit" customEventOptions={{ - eventCategory: "Homepage", + eventCategory, eventAction: "builders", eventName: "dev docs", }} @@ -466,7 +469,7 @@ const HomePage = ({ onClick={() => { toggleCodeExample(idx) trackCustomEvent({ - eventCategory: "Homepage", + eventCategory, eventAction: "Code Examples", eventName, }) @@ -570,7 +573,7 @@ const HomePage = ({ href="/community/" size="lg" customEventOptions={{ - eventCategory: "Homepage", + eventCategory, eventAction: "community", eventName: "community", }} @@ -585,7 +588,7 @@ const HomePage = ({ isSecondary hideArrow customEventOptions={{ - eventCategory: "Homepage", + eventCategory, eventAction: "community", eventName: "discord", }} @@ -599,7 +602,7 @@ const HomePage = ({ isSecondary hideArrow customEventOptions={{ - eventCategory: "Homepage", + eventCategory, eventAction: "community", eventName: "github", }} @@ -616,7 +619,7 @@ const HomePage = ({ {calendar.length > 0 ? ( calendar.map(({ date, title, calendarLink }) => { const customEventOptions = { - eventCategory: "Homepage", + eventCategory, eventAction: "Community Events Widget", eventName: "upcoming", } @@ -694,7 +697,7 @@ const HomePage = ({