matomo: "code examples" events

Author: wackerow

src/components/Homepage/useHome.ts

@@ -53,6 +53,7 @@ export const useHome = () => {
       ),
       codeLanguage: "language-solidity",
       code: SimpleWalletContent,
+      eventName: "bank",
     },
     {
       title: t("page-index:page-index-developers-code-example-title-1"),
@@ -61,6 +62,7 @@ export const useHome = () => {
       ),
       codeLanguage: "language-solidity",
       code: SimpleTokenContent,
+      eventName: "token",
     },
     {
       title: t("page-index:page-index-developers-code-example-title-2"),
@@ -69,6 +71,7 @@ export const useHome = () => {
       ),
       codeLanguage: "language-javascript",
       code: CreateWalletContent,
+      eventName: "wallet",
     },
     {
       title: t("page-index:page-index-developers-code-example-title-3"),
@@ -77,6 +80,7 @@ export const useHome = () => {
       ),
       codeLanguage: "language-solidity",
       code: SimpleDomainRegistryContent,
+      eventName: "dns",
     },
   ]
 

src/lib/interfaces.ts

@@ -181,4 +181,5 @@ export interface ITitleCardItem {
 export interface CodeExample extends ITitleCardItem {
   codeLanguage: string
   code: string
+  eventName: string
 }

src/pages/index.tsx

@@ -53,6 +53,7 @@ import { cn } from "@/lib/utils/cn"
 import { isValidDate } from "@/lib/utils/date"
 import { existsNamespace } from "@/lib/utils/existsNamespace"
 import { getLastDeployDate } from "@/lib/utils/getLastDeployDate"
+import { trackCustomEvent } from "@/lib/utils/matomo"
 import { polishRSSList } from "@/lib/utils/rss"
 import { runOnlyOnce } from "@/lib/utils/runOnlyOnce"
 import { breakpointAsNumber } from "@/lib/utils/screen"
@@ -408,7 +409,7 @@ const HomePage = ({
                 Svg={AngleBrackets}
               >
                 {/* Desktop */}
-                {codeExamples.map(({ title, description }, idx) => (
+                {codeExamples.map(({ title, description, eventName }, idx) => (
                   <button
                     key={title}
                     className={cn(
@@ -417,7 +418,14 @@ const HomePage = ({
                         idx === activeCode &&
                         "bg-background-highlight"
                     )}
-                    onClick={() => toggleCodeExample(idx)}
+                    onClick={() => {
+                      toggleCodeExample(idx)
+                      trackCustomEvent({
+                        eventCategory: "Homepage",
+                        eventAction: "Code Examples",
+                        eventName,
+                      })
+                    }}
                   >
                     <p className="font-bold">{title}</p>
                     <p className="text-start text-sm text-body-medium">