Skip to content

Commit 219c230

Browse files
pettinarippettinarip
authored
Merge pull request #13954 from ethereum/tracking
fix(matomo): Add missing homepage events; parse events by locale
2 parents 5c4b366 + 0c8e7fc commit 219c230

File tree

5 files changed

+62
-34
lines changed

5 files changed

+62
-34
lines changed

‎src/components/Homepage/BentoCard.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ export type BentoCardProps = HTMLAttributes<HTMLDivElement> & {
1818
imgHeight?: number
1919
title: string
2020
eventName: string
21+
eventCategory: string
2122
}
2223

2324
const BentoCard = ({
@@ -30,6 +31,7 @@ const BentoCard = ({
3031
imgHeight,
3132
title,
3233
eventName,
34+
eventCategory,
3335
}: BentoCardProps) => (
3436
<Card
3537
className={cn(
@@ -50,7 +52,7 @@ const BentoCard = ({
5052
variant="outline"
5153
isSecondary
5254
customEventOptions={{
53-
eventCategory: "Homepage",
55+
eventCategory,
5456
eventAction: "use cases",
5557
eventName,
5658
}}

‎src/components/Homepage/ValuesMarquee.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ type ItemProps = React.HTMLAttributes<HTMLButtonElement> & {
2525
separatorClass: string
2626
container?: HTMLElement | null
2727
label: string
28+
eventCategory: string
2829
}
2930

3031
const Item = ({
@@ -34,13 +35,14 @@ const Item = ({
3435
separatorClass,
3536
container,
3637
label,
38+
eventCategory,
3739
}: ItemProps) => (
3840
<>
3941
<Tooltip
4042
container={container}
4143
onBeforeOpen={() => {
4244
trackCustomEvent({
43-
eventCategory: "Homepage",
45+
eventCategory,
4446
eventAction: "internet_changing",
4547
eventName: label,
4648
})
@@ -138,7 +140,7 @@ const Row = forwardRef<HTMLDivElement, RowProps>(
138140
Row.displayName = "Row"
139141

140142
const ValuesMarquee = () => {
141-
const { t, pairings } = useValuesMarquee()
143+
const { t, pairings, eventCategory } = useValuesMarquee()
142144
const containerFirstRef = useRef<HTMLDivElement>(null)
143145
const containerSecondRef = useRef<HTMLDivElement>(null)
144146

@@ -182,6 +184,7 @@ const ValuesMarquee = () => {
182184
pairing={pairing}
183185
separatorClass="bg-accent-a"
184186
className="group/item bg-blue-100 text-blue-600 hover:bg-blue-600 hover:text-white dark:hover:bg-blue-700"
187+
eventCategory={eventCategory}
185188
>
186189
<FaCheck className="me-1 text-success group-hover/item:text-white" />
187190
{pairing.ethereum.label}
@@ -202,6 +205,7 @@ const ValuesMarquee = () => {
202205
pairing={pairing}
203206
className="bg-gray-200/20 text-body-medium hover:bg-gray-600 hover:text-white dark:bg-gray-950 dark:text-body"
204207
separatorClass="bg-gray-200 dark:bg-gray-950"
208+
eventCategory={eventCategory}
205209
>
206210
{pairing.legacy.label}
207211
</Item>

‎src/components/Homepage/useHome.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,8 @@ export const useHome = () => {
4040

4141
const { direction, isRtl } = useRtlFlip()
4242

43+
const eventCategory = `Homepage - ${locale}`
44+
4345
const toggleCodeExample = (id: number): void => {
4446
setActiveCode(id)
4547
setModalOpen(true)
@@ -127,28 +129,33 @@ export const useHome = () => {
127129
label: t("page-index:page-index-popular-topics-ethereum"),
128130
Svg: EthTokenIcon,
129131
href: "/what-is-ethereum/",
132+
eventName: "ethereum",
130133
},
131134
{
132135
label: t("page-index:page-index-popular-topics-wallets"),
133136
Svg: PickWalletIcon,
134137
href: "/wallets/",
138+
eventName: "wallets",
135139
},
136140
{
137141
label: t("page-index:page-index-popular-topics-start"),
138142
Svg: BlockHeap,
139143
href: "/guides/",
144+
eventName: "start guides",
140145
},
141146
{
142147
label: t("page-index:page-index-popular-topics-whitepaper"),
143148
Svg: Whitepaper,
144149
className: cn(isRtl && "[&_svg]:-scale-x-100"),
145150
href: "/whitepaper/",
151+
eventName: "whitepaper",
146152
},
147153
{
148154
label: t("page-index:page-index-popular-topics-roadmap"),
149155
Svg: RoadmapSign,
150156
className: cn(isRtl && "[&_svg]:-scale-x-100"),
151157
href: "/roadmap/",
158+
eventName: "roadmap",
152159
},
153160
]
154161

@@ -217,5 +224,6 @@ export const useHome = () => {
217224
upcomingEvents,
218225
joinActions,
219226
bentoItems,
227+
eventCategory,
220228
}
221229
}

‎src/components/Homepage/useValuesMarquee.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { useRouter } from "next/router"
12
import { useTranslation } from "next-i18next"
23

34
type Item = {
@@ -12,6 +13,7 @@ export type Pairing = {
1213

1314
export const useValuesMarquee = () => {
1415
const { t } = useTranslation("page-index")
16+
const { locale } = useRouter()
1517
const pairings: Pairing[] = [
1618
{
1719
legacy: {
@@ -94,5 +96,7 @@ export const useValuesMarquee = () => {
9496
},
9597
]
9698

97-
return { t, pairings }
99+
const eventCategory = `Homepage - ${locale}`
100+
101+
return { t, pairings, eventCategory }
98102
}

‎src/pages/index.tsx

Lines changed: 40 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -198,6 +198,7 @@ const HomePage = ({
198198
upcomingEvents,
199199
joinActions,
200200
bentoItems,
201+
eventCategory,
201202
} = useHome()
202203

203204
const { onCopy, hasCopied } = useClipboard()
@@ -225,7 +226,7 @@ const HomePage = ({
225226
href={href}
226227
label={label}
227228
customEventOptions={{
228-
eventCategory: "Homepage",
229+
eventCategory,
229230
eventAction: "Top 4 CTAs",
230231
eventName: subHeroCTAs[idx].eventName,
231232
}}
@@ -282,7 +283,7 @@ const HomePage = ({
282283
effect="cards"
283284
onSlideChange={({ activeIndex }) => {
284285
trackCustomEvent({
285-
eventCategory: "Homepage",
286+
eventCategory,
286287
eventAction: "mobile use cases",
287288
eventName: `swipe to card ${activeIndex + 1}`,
288289
})
@@ -295,6 +296,7 @@ const HomePage = ({
295296
{...item}
296297
className={cn(className, "bg-background text-body")}
297298
imgWidth={undefined} // Intentionally last to override box
299+
eventCategory={eventCategory}
298300
/>
299301
</SwiperSlide>
300302
))}
@@ -307,6 +309,7 @@ const HomePage = ({
307309
key={item.title}
308310
{...item}
309311
className={cn(className, "max-lg:hidden")} // Desktop only
312+
eventCategory={eventCategory}
310313
/>
311314
))}
312315
</Section>
@@ -357,21 +360,28 @@ const HomePage = ({
357360
{t("page-index:page-index-popular-topics-header")}
358361
</h3>
359362
<div className="grid grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2">
360-
{popularTopics.map(({ label, Svg, href, className }) => (
361-
<SvgButtonLink
362-
key={label}
363-
Svg={Svg}
364-
href={href}
365-
className={cn(
366-
"text-accent-b hover:text-accent-b-hover [&>:first-child]:flex-row",
367-
className
368-
)}
369-
>
370-
<p className="text-start text-xl font-bold text-body group-hover:underline">
371-
{label}
372-
</p>
373-
</SvgButtonLink>
374-
))}
363+
{popularTopics.map(
364+
({ label, Svg, href, eventName, className }) => (
365+
<SvgButtonLink
366+
key={label}
367+
Svg={Svg}
368+
href={href}
369+
className={cn(
370+
"text-accent-b hover:text-accent-b-hover [&>:first-child]:flex-row",
371+
className
372+
)}
373+
customEventOptions={{
374+
eventCategory,
375+
eventAction: "popular topics",
376+
eventName,
377+
}}
378+
>
379+
<p className="text-start text-xl font-bold text-body group-hover:underline">
380+
{label}
381+
</p>
382+
</SvgButtonLink>
383+
)
384+
)}
375385
</div>
376386
<div className="flex py-8 sm:justify-center">
377387
<ButtonLink
@@ -381,7 +391,7 @@ const HomePage = ({
381391
isSecondary
382392
className="max-sm:self-start"
383393
customEventOptions={{
384-
eventCategory: "Homepage",
394+
eventCategory,
385395
eventAction: "learn",
386396
eventName: "learn",
387397
}}
@@ -418,7 +428,7 @@ const HomePage = ({
418428
size="lg"
419429
className="w-fit"
420430
customEventOptions={{
421-
eventCategory: "Homepage",
431+
eventCategory,
422432
eventAction: "builders",
423433
eventName: "developers",
424434
}}
@@ -433,7 +443,7 @@ const HomePage = ({
433443
isSecondary
434444
className="w-fit"
435445
customEventOptions={{
436-
eventCategory: "Homepage",
446+
eventCategory,
437447
eventAction: "builders",
438448
eventName: "dev docs",
439449
}}
@@ -459,7 +469,7 @@ const HomePage = ({
459469
onClick={() => {
460470
toggleCodeExample(idx)
461471
trackCustomEvent({
462-
eventCategory: "Homepage",
472+
eventCategory,
463473
eventAction: "Code Examples",
464474
eventName,
465475
})
@@ -563,7 +573,7 @@ const HomePage = ({
563573
href="/community/"
564574
size="lg"
565575
customEventOptions={{
566-
eventCategory: "Homepage",
576+
eventCategory,
567577
eventAction: "community",
568578
eventName: "community",
569579
}}
@@ -578,7 +588,7 @@ const HomePage = ({
578588
isSecondary
579589
hideArrow
580590
customEventOptions={{
581-
eventCategory: "Homepage",
591+
eventCategory,
582592
eventAction: "community",
583593
eventName: "discord",
584594
}}
@@ -592,7 +602,7 @@ const HomePage = ({
592602
isSecondary
593603
hideArrow
594604
customEventOptions={{
595-
eventCategory: "Homepage",
605+
eventCategory,
596606
eventAction: "community",
597607
eventName: "github",
598608
}}
@@ -609,7 +619,7 @@ const HomePage = ({
609619
{calendar.length > 0 ? (
610620
calendar.map(({ date, title, calendarLink }) => {
611621
const customEventOptions = {
612-
eventCategory: "Homepage",
622+
eventCategory,
613623
eventAction: "Community Events Widget",
614624
eventName: "upcoming",
615625
}
@@ -687,7 +697,7 @@ const HomePage = ({
687697
<Card
688698
href={link}
689699
customEventOptions={{
690-
eventCategory: "Homepage",
700+
eventCategory,
691701
eventAction: "blogs_posts",
692702
eventName: source,
693703
}}
@@ -724,7 +734,7 @@ const HomePage = ({
724734
href={href}
725735
key={name}
726736
customEventOptions={{
727-
eventCategory: "Homepage",
737+
eventCategory,
728738
eventAction: "blogs_read_more",
729739
eventName: name!,
730740
}}
@@ -764,7 +774,7 @@ const HomePage = ({
764774
idx === 0 && "col-span-1 sm:col-span-2 md:col-span-1"
765775
)}
766776
customEventOptions={{
767-
eventCategory: "Homepage",
777+
eventCategory,
768778
eventAction: "posts",
769779
eventName: title,
770780
}}
@@ -809,7 +819,7 @@ const HomePage = ({
809819
href="/community/events/"
810820
size="lg"
811821
customEventOptions={{
812-
eventCategory: "Homepage",
822+
eventCategory,
813823
eventAction: "events",
814824
eventName: "community events",
815825
}}
@@ -844,7 +854,7 @@ const HomePage = ({
844854
className={cn("max-w-screen-sm", className)}
845855
variant="row"
846856
customEventOptions={{
847-
eventCategory: "Homepage",
857+
eventCategory,
848858
eventAction: "join",
849859
eventName,
850860
}}

0 commit comments

Comments
 (0)