fix(matomo): add locale to event category name

Break Homepage metrics into per-locale dashboards
ethereum · Sep 24, 2024 · 0c8e7fc · 0c8e7fc
1 parent f758828
commit 0c8e7fc
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 20 deletions.
diff --git a/src/components/Homepage/BentoCard.tsx b/src/components/Homepage/BentoCard.tsx
@@ -18,6 +18,7 @@ export type BentoCardProps = HTMLAttributes<HTMLDivElement> & {
   imgHeight?: number
   title: string
   eventName: string
+  eventCategory: string
 }
 
 const BentoCard = ({
@@ -30,6 +31,7 @@ const BentoCard = ({
   imgHeight,
   title,
   eventName,
+  eventCategory,
 }: BentoCardProps) => (
   <Card
     className={cn(
@@ -50,7 +52,7 @@ const BentoCard = ({
         variant="outline"
         isSecondary
         customEventOptions={{
-          eventCategory: "Homepage",
+          eventCategory,
           eventAction: "use cases",
           eventName,
         }}

diff --git a/src/components/Homepage/ValuesMarquee.tsx b/src/components/Homepage/ValuesMarquee.tsx
@@ -25,6 +25,7 @@ type ItemProps = React.HTMLAttributes<HTMLButtonElement> & {
   separatorClass: string
   container?: HTMLElement | null
   label: string
+  eventCategory: string
 }
 
 const Item = ({
@@ -34,13 +35,14 @@ const Item = ({
   separatorClass,
   container,
   label,
+  eventCategory,
 }: ItemProps) => (
   <>
     <Tooltip
       container={container}
       onBeforeOpen={() => {
         trackCustomEvent({
-          eventCategory: "Homepage",
+          eventCategory,
           eventAction: "internet_changing",
           eventName: label,
         })
@@ -138,7 +140,7 @@ const Row = forwardRef<HTMLDivElement, RowProps>(
 Row.displayName = "Row"
 
 const ValuesMarquee = () => {
-  const { t, pairings } = useValuesMarquee()
+  const { t, pairings, eventCategory } = useValuesMarquee()
   const containerFirstRef = useRef<HTMLDivElement>(null)
   const containerSecondRef = useRef<HTMLDivElement>(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}
             >
               <FaCheck className="me-1 text-success group-hover/item:text-white" />
               {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}
             </Item>

diff --git 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
@@ -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
@@ -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}
                   />
                 </SwiperSlide>
               ))}
@@ -307,6 +309,7 @@ const HomePage = ({
               key={item.title}
               {...item}
               className={cn(className, "max-lg:hidden")} // Desktop only
+              eventCategory={eventCategory}
             />
           ))}
         </Section>
@@ -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 = ({
                   <Card
                     href={link}
                     customEventOptions={{
-                      eventCategory: "Homepage",
+                      eventCategory,
                       eventAction: "blogs_posts",
                       eventName: source,
                     }}
@@ -731,7 +734,7 @@ const HomePage = ({
                   href={href}
                   key={name}
                   customEventOptions={{
-                    eventCategory: "Homepage",
+                    eventCategory,
                     eventAction: "blogs_read_more",
                     eventName: name!,
                   }}
@@ -771,7 +774,7 @@ const HomePage = ({
                       idx === 0 && "col-span-1 sm:col-span-2 md:col-span-1"
                     )}
                     customEventOptions={{
-                      eventCategory: "Homepage",
+                      eventCategory,
                       eventAction: "posts",
                       eventName: title,
                     }}
@@ -816,7 +819,7 @@ const HomePage = ({
               href="/community/events/"
               size="lg"
               customEventOptions={{
-                eventCategory: "Homepage",
+                eventCategory,
                 eventAction: "events",
                 eventName: "community events",
               }}
@@ -851,7 +854,7 @@ const HomePage = ({
                     className={cn("max-w-screen-sm", className)}
                     variant="row"
                     customEventOptions={{
-                      eventCategory: "Homepage",
+                      eventCategory,
                       eventAction: "join",
                       eventName,
                     }}