diff --git a/apps/dashboard/src/@/analytics/report.ts b/apps/dashboard/src/@/analytics/report.ts index 1292edaa834..bbea78f2ab8 100644 --- a/apps/dashboard/src/@/analytics/report.ts +++ b/apps/dashboard/src/@/analytics/report.ts @@ -255,6 +255,20 @@ export function reportTokenSwapSuccessful(properties: TokenSwapParams) { posthog.capture("token swap successful", properties); } +/** + * ### Why do we need to report this event? + * - To track impressions of the swap widget + * - To create a funnel "swap widget shown" -> "swap widget successful" to understand the conversion rate + * + * ### Who is responsible for this event? + * @MananTank + */ +export function reportSwapWidgetShown(properties: { + pageType: "asset" | "bridge" | "chain"; +}) { + posthog.capture("swap widget shown", properties); +} + /** * ### Why do we need to report this event? * - To track number of failed token swaps from the token page @@ -530,6 +544,17 @@ export function reportAssetPageview(properties: { posthog.capture("asset pageview", properties); } +/** + * ### Why do we need to report this event? + * - To understand which chains are being viewed the most + * + * ### Who is responsible for this event? + * @MananTank + */ +export function reportChainPageview(properties: { chainId: number }) { + posthog.capture("chain pageview", properties); +} + /** * ### Why do we need to report this event? * - To track the usage of fund wallet modal diff --git a/apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx b/apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx index 498867f9bff..73ccf6ae774 100644 --- a/apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx +++ b/apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx @@ -1,13 +1,14 @@ "use client"; import { useTheme } from "next-themes"; -import { useState } from "react"; +import { useEffect, useRef, useState } from "react"; import type { Chain, ThirdwebClient } from "thirdweb"; import { BuyWidget, SwapWidget } from "thirdweb/react"; import { reportAssetBuyCancelled, reportAssetBuyFailed, reportAssetBuySuccessful, + reportSwapWidgetShown, reportTokenSwapCancelled, reportTokenSwapFailed, reportTokenSwapSuccessful, @@ -27,6 +28,19 @@ export function BuyAndSwapEmbed(props: { const { theme } = useTheme(); const [tab, setTab] = useState<"buy" | "swap">("swap"); const themeObj = getSDKTheme(theme === "light" ? "light" : "dark"); + const isMounted = useRef(false); + + // eslint-disable-next-line no-restricted-syntax + useEffect(() => { + if (isMounted.current) { + return; + } + isMounted.current = true; + reportSwapWidgetShown({ + pageType: props.pageType, + }); + }, [props.pageType]); + return (