Skip to content

Commit 04a56ad

Browse files
corwintinescorwintines
committed
matomo events on /layer-2/networks
1 parent cf51b17 commit 04a56ad

File tree

8 files changed

+163
-9
lines changed

8 files changed

+163
-9
lines changed

‎src/components/DataTable/index.tsx

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@ import {
1616
TableRow,
1717
} from "@/components/ui/Table"
1818

19+
import { trackCustomEvent } from "@/lib/utils/matomo"
20+
1921
type DataTableProps<TData, TValue> = TableProps & {
2022
columns: ColumnDef<TData, TValue>[]
2123
data: TData[]
@@ -25,6 +27,7 @@ type DataTableProps<TData, TValue> = TableProps & {
2527
setMobileFiltersOpen?: (open: boolean) => void
2628
activeFiltersCount: number
2729
meta?: Record<string, string | number | boolean>
30+
matomoEventCategory: string
2831
}
2932

3033
export type TableMeta = {
@@ -44,15 +47,22 @@ const DataTable = <TData, TValue>({
4447
setMobileFiltersOpen,
4548
activeFiltersCount,
4649
meta,
50+
matomoEventCategory,
4751
...props
4852
}: DataTableProps<TData, TValue>) => {
4953
const [isVisible, setIsVisible] = useState(true)
5054
const [currentData, setCurrentData] = useState(data)
55+
const [expanded, setExpanded] = useState({})
56+
const previousExpandedRef = useRef({})
5157
const previousDataRef = useRef(data)
5258

5359
const table = useReactTable({
5460
data: currentData,
5561
columns,
62+
state: {
63+
expanded,
64+
},
65+
onExpandedChange: setExpanded,
5666
getRowCanExpand: (row) => {
5767
const rowData = row.original as { canExpand?: boolean }
5868
return rowData.canExpand !== undefined ? rowData.canExpand : true
@@ -68,6 +78,27 @@ const DataTable = <TData, TValue>({
6878
} as TableMeta,
6979
})
7080

81+
useEffect(() => {
82+
const prev = previousExpandedRef.current
83+
const current = expanded
84+
85+
// Find newly expanded rows
86+
const newlyExpanded = Object.entries(current)
87+
.filter(([key, value]) => value === true && prev[key] !== true)
88+
.map(([key]) => key)
89+
90+
if (newlyExpanded.length > 0) {
91+
const row = table.getRowModel().rowsById[newlyExpanded[0]]
92+
trackCustomEvent({
93+
eventCategory: matomoEventCategory,
94+
eventAction: "expanded",
95+
eventName: row.original.name,
96+
})
97+
}
98+
99+
previousExpandedRef.current = expanded
100+
}, [expanded])
101+
71102
useEffect(() => {
72103
if (JSON.stringify(data) !== JSON.stringify(previousDataRef.current)) {
73104
setIsVisible(false)

‎src/components/FindWalletProductTable/index.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,7 @@ const FindWalletProductTable = ({ wallets }: { wallets: Wallet[] }) => {
9797
columns={useWalletColumns}
9898
data={filteredData}
9999
allDataLength={wallets.length}
100+
matomoEventCategory="find-wallet"
100101
filters={filters}
101102
presetFilters={walletPersonas}
102103
resetFilters={resetFilters}

‎src/components/Layer2NetworksTable/NetworksSubComponent.tsx

Lines changed: 65 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,11 @@ const NetworkSubComponent = ({ network }) => {
4242
</p>
4343
</div>
4444
}
45+
customMatomoEvent={{
46+
eventCategory: "l2_networks",
47+
eventAction: "tooltip",
48+
eventName: "age",
49+
}}
4550
>
4651
<MdInfoOutline className="translate-y-0.5" />
4752
</Tooltip>
@@ -76,6 +81,11 @@ const NetworkSubComponent = ({ network }) => {
7681
</p>
7782
</div>
7883
}
84+
customMatomoEvent={{
85+
eventCategory: "l2_networks",
86+
eventAction: "tooltip",
87+
eventName: "wallet_support",
88+
}}
7989
>
8090
<MdInfoOutline className="translate-y-0.5" />
8191
</Tooltip>
@@ -114,6 +124,11 @@ const NetworkSubComponent = ({ network }) => {
114124
</p>
115125
</div>
116126
}
127+
customMatomoEvent={{
128+
eventCategory: "l2_networks",
129+
eventAction: "tooltip",
130+
eventName: "active_addresses",
131+
}}
117132
>
118133
<MdInfoOutline className="translate-y-0.5" />
119134
</Tooltip>
@@ -135,6 +150,11 @@ const NetworkSubComponent = ({ network }) => {
135150
</p>
136151
</div>
137152
}
153+
customMatomoEvent={{
154+
eventCategory: "l2_networks",
155+
eventAction: "tooltip",
156+
eventName: "fee_token",
157+
}}
138158
>
139159
<MdInfoOutline className="translate-y-0.5" />
140160
</Tooltip>
@@ -187,17 +207,42 @@ const NetworkSubComponent = ({ network }) => {
187207
<p className="text-xs text-body-medium">Links</p>
188208
<div className="flex flex-col gap-4">
189209
<div>
190-
<InlineLink href={network.website}>Official website</InlineLink>
210+
<InlineLink
211+
href={network.website}
212+
customEventOptions={{
213+
eventCategory: "l2_networks",
214+
eventAction: "networks_website",
215+
eventName: network.name,
216+
}}
217+
>
218+
Official website
219+
</InlineLink>
191220
</div>
192221
<div className="flex flex-col gap-0.5">
193222
<div>
194-
<InlineLink href={network.l2BeatLink}>Risk analysis</InlineLink>
223+
<InlineLink
224+
href={network.l2BeatLink}
225+
customEventOptions={{
226+
eventCategory: "l2_networks",
227+
eventAction: "l2beat_profiles",
228+
eventName: network.name,
229+
}}
230+
>
231+
Risk analysis
232+
</InlineLink>
195233
</div>
196234
<p className="text-xs text-body-medium">Assessment by L2BEAT</p>
197235
</div>
198236
<div className="flex flex-col gap-0.5">
199237
<div>
200-
<InlineLink href={network.growThePieLink}>
238+
<InlineLink
239+
href={network.growThePieLink}
240+
customEventOptions={{
241+
eventCategory: "l2_networks",
242+
eventAction: "analytics_profiles",
243+
eventName: network.name,
244+
}}
245+
>
201246
Detailed analytics
202247
</InlineLink>
203248
</div>
@@ -210,10 +255,25 @@ const NetworkSubComponent = ({ network }) => {
210255
<div className="flex flex-col gap-1">
211256
<p className="text-xs text-body-medium">Actions</p>
212257
<div className="flex flex-col gap-4 sm:flex-row">
213-
<ButtonLink href={network.bridgeLink}>
258+
<ButtonLink
259+
href={network.bridgeLink}
260+
customEventOptions={{
261+
eventCategory: "l2_networks",
262+
eventAction: "bridge",
263+
eventName: network.name,
264+
}}
265+
>
214266
Bridge to {network.name}
215267
</ButtonLink>
216-
<ButtonLink href={network.applicationsLink} variant="outline">
268+
<ButtonLink
269+
href={network.applicationsLink}
270+
variant="outline"
271+
customEventOptions={{
272+
eventCategory: "l2_networks",
273+
eventAction: "view_apps",
274+
eventName: network.name,
275+
}}
276+
>
217277
View apps
218278
</ButtonLink>
219279
</div>

‎src/components/Layer2NetworksTable/hooks/useNetworkFilters.tsx

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ import {
99
import NetworksWalletSelectInput from "@/components/Layer2NetworksTable/NetworksWalletSelectInput"
1010
import SwitchFilterInput from "@/components/ProductTable/FilterInputs/SwitchFilterInput"
1111

12+
import { trackCustomEvent } from "@/lib/utils/matomo"
13+
1214
export const useNetworkFilters = (): FilterOption[] => {
1315
return [
1416
{
@@ -17,7 +19,7 @@ export const useNetworkFilters = (): FilterOption[] => {
1719
items: [
1820
{
1921
filterKey: "wallets_supported",
20-
filterLabel: "",
22+
filterLabel: "wallets_supported",
2123
description: "",
2224
inputState: "",
2325
ignoreFilterReset: false,
@@ -27,7 +29,14 @@ export const useNetworkFilters = (): FilterOption[] => {
2729
filterIndex={filterIndex}
2830
itemIndex={itemIndex}
2931
inputState={inputState}
30-
updateFilterState={updateFilterState}
32+
updateFilterState={(filterIndex, itemIndex, newInputState) => {
33+
trackCustomEvent({
34+
eventCategory: "l2_networks",
35+
eventAction: "wallet",
36+
eventName: newInputState as string,
37+
})
38+
updateFilterState(filterIndex, itemIndex, newInputState)
39+
}}
3140
/>
3241
)
3342
},
@@ -65,6 +74,11 @@ export const useNetworkFilters = (): FilterOption[] => {
6574
itemIndex={itemIndex}
6675
inputState={inputState}
6776
updateFilterState={(filterIndex, itemIndex, newInputState) => {
77+
trackCustomEvent({
78+
eventCategory: "l2_networks",
79+
eventAction: "filter",
80+
eventName: `robust ${newInputState}`,
81+
})
6882
updateFilterState(filterIndex, itemIndex, newInputState)
6983
}}
7084
/>
@@ -94,6 +108,11 @@ export const useNetworkFilters = (): FilterOption[] => {
94108
itemIndex={itemIndex}
95109
inputState={inputState}
96110
updateFilterState={(filterIndex, itemIndex, newInputState) => {
111+
trackCustomEvent({
112+
eventCategory: "l2_networks",
113+
eventAction: "filter",
114+
eventName: `maturing ${newInputState}`,
115+
})
97116
updateFilterState(filterIndex, itemIndex, newInputState)
98117
}}
99118
/>
@@ -122,6 +141,11 @@ export const useNetworkFilters = (): FilterOption[] => {
122141
itemIndex={itemIndex}
123142
inputState={inputState}
124143
updateFilterState={(filterIndex, itemIndex, newInputState) => {
144+
trackCustomEvent({
145+
eventCategory: "l2_networks",
146+
eventAction: "filter",
147+
eventName: `developing ${newInputState}`,
148+
})
125149
updateFilterState(filterIndex, itemIndex, newInputState)
126150
}}
127151
/>
@@ -151,6 +175,11 @@ export const useNetworkFilters = (): FilterOption[] => {
151175
itemIndex={itemIndex}
152176
inputState={inputState}
153177
updateFilterState={(filterIndex, itemIndex, newInputState) => {
178+
trackCustomEvent({
179+
eventCategory: "l2_networks",
180+
eventAction: "filter",
181+
eventName: `emerging ${newInputState}`,
182+
})
154183
updateFilterState(filterIndex, itemIndex, newInputState)
155184
}}
156185
/>

‎src/components/Layer2NetworksTable/index.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@ const Layer2NetworksTable = ({
6161
columns={useNetworkColumns}
6262
data={filteredData}
6363
allDataLength={layer2Data.length}
64+
matomoEventCategory="l2_networks"
6465
filters={filters}
6566
presetFilters={[]}
6667
resetFilters={resetFilters}

‎src/components/ProductTable/index.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ interface ProductTableProps<T> {
2929
subComponent?: FC<T>
3030
noResultsComponent?: React.FC
3131
mobileFiltersLabel: string
32+
matomoEventCategory: string
3233
meta?: Record<string, string | number | boolean>
3334
}
3435

@@ -43,6 +44,7 @@ const ProductTable = <T,>({
4344
subComponent,
4445
noResultsComponent,
4546
mobileFiltersLabel,
47+
matomoEventCategory,
4648
meta,
4749
}: ProductTableProps<T>) => {
4850
const router = useRouter()
@@ -303,6 +305,7 @@ const ProductTable = <T,>({
303305
setMobileFiltersOpen={setMobileFiltersOpen}
304306
activeFiltersCount={activeFiltersCount}
305307
meta={meta}
308+
matomoEventCategory={matomoEventCategory}
306309
/>
307310
</div>
308311
</div>

‎src/components/Tooltip/index.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { ComponentProps, ReactNode, useEffect } from "react"
22
import { Portal } from "@radix-ui/react-portal"
33

44
import { isMobile } from "@/lib/utils/isMobile"
5+
import { trackCustomEvent } from "@/lib/utils/matomo"
56

67
import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover"
78
import {
@@ -18,13 +19,19 @@ export type TooltipProps = ComponentProps<typeof Popover> & {
1819
children?: ReactNode
1920
onBeforeOpen?: () => void
2021
container?: HTMLElement | null
22+
customMatomoEvent?: {
23+
eventCategory: string
24+
eventAction: string
25+
eventName: string
26+
}
2127
}
2228

2329
const Tooltip = ({
2430
content,
2531
children,
2632
onBeforeOpen,
2733
container,
34+
customMatomoEvent,
2835
...props
2936
}: TooltipProps) => {
3037
const { isOpen, onOpen, onClose } = useDisclosure()
@@ -64,6 +71,10 @@ const Tooltip = ({
6471
const handleOpenChange = (open: boolean) => {
6572
if (open) {
6673
handleOpen()
74+
customMatomoEvent &&
75+
trackCustomEvent({
76+
...customMatomoEvent,
77+
})
6778
} else {
6879
onClose()
6980
}

‎src/pages/layer-2/networks.tsx

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -195,7 +195,16 @@ const Layer2Networks = ({ layer2Data, locale, mainnetData }) => {
195195
}
196196
>
197197
<div>
198-
<ButtonLink href="/layer-2/">Learn more</ButtonLink>
198+
<ButtonLink
199+
href="/layer-2/"
200+
customEventOptions={{
201+
eventCategory: "l2_networks",
202+
eventAction: "button_click",
203+
eventName: "bottom_hub",
204+
}}
205+
>
206+
Learn more
207+
</ButtonLink>
199208
</div>
200209
</Callout>
201210
<Callout
@@ -206,7 +215,16 @@ const Layer2Networks = ({ layer2Data, locale, mainnetData }) => {
206215
}
207216
>
208217
<div>
209-
<ButtonLink href="/layer-2/learn/">Learn more</ButtonLink>
218+
<ButtonLink
219+
href="/layer-2/learn/"
220+
customEventOptions={{
221+
eventCategory: "l2_networks",
222+
eventAction: "button_click",
223+
eventName: "bottom_learn",
224+
}}
225+
>
226+
Learn more
227+
</ButtonLink>
210228
</div>
211229
</Callout>
212230
</div>

0 commit comments

Comments
 (0)