improve(amplitude): instrument bridge buttons

src/app/(routes)/_components/hero-section.tsx

@@ -32,7 +32,7 @@ export function HeroSection() {
             A new paradigm in cross-chain experiences, seamlessly connecting users with
             applications.
           </Text>
-          <BridgeNowLink className="self-center md:self-start">
+          <BridgeNowLink className="self-center md:self-start" section="marketingHero">
             <Button
               className={twMerge(
                 "border-aqua-100 bg-aqua-100/[.05] text-aqua-100 transition",

src/app/(routes)/across-bridge/_components/bridge-now-section.tsx

@@ -20,7 +20,7 @@ export function BridgeNowSection() {
         Experience The Best Bridge
       </Text>
       <div className="flex flex-row items-center">
-        <BridgeNowLink>
+        <BridgeNowLink section="marketingHero">
           <Button className="border-aqua-100 bg-aqua-100/[.05] text-aqua-100">
             <Text variant="cap-case-sm">Bridge now</Text>
           </Button>

src/app/(routes)/across-bridge/_components/hero-section.tsx

@@ -32,7 +32,7 @@ export function HeroSection() {
             </Text>
           </div>
           <div className="flex flex-row justify-center md:justify-start">
-            <BridgeNowLink>
+            <BridgeNowLink section="marketingHero">
               <Button className="border-aqua-100 bg-aqua-100/[.05] text-aqua-100">
                 <Text variant="cap-case-sm">Bridge now</Text>
               </Button>

src/app/_amplitude/index.ts

@@ -177,6 +177,49 @@ export interface IdentifyProperties {
   WethVolumeUsd?: any;
 }
 
+export interface BridgeButtonClickedProperties {
+  /**
+   * | Rule | Value |
+   * |---|---|
+   * | Enum Values | splashPage, bridgePage, poolPage, rewardsPage, transactionsPage, stakingPage, referralPage, airdropPage, 404Page, marketingHomePage, marketingBridgePage, marketingAcrossPlusPage, marketingSettlementPage, depositStatusPage |
+   */
+  page:
+    | "splashPage"
+    | "bridgePage"
+    | "poolPage"
+    | "rewardsPage"
+    | "transactionsPage"
+    | "stakingPage"
+    | "referralPage"
+    | "airdropPage"
+    | "404Page"
+    | "marketingHomePage"
+    | "marketingBridgePage"
+    | "marketingAcrossPlusPage"
+    | "marketingSettlementPage"
+    | "depositStatusPage";
+  /**
+   * | Rule | Value |
+   * |---|---|
+   * | Enum Values | navbar, mobileNavSidebar, addLiquidityForm, removeLiquidityForm, airdropSplashFlow, referralTable, rewardsTable, unstakeForm, myTransactionsTable, bridgeForm, claimReferralRewardsForm, stakeForm, depositConfirmation, marketingHero |
+   */
+  section:
+    | "navbar"
+    | "mobileNavSidebar"
+    | "addLiquidityForm"
+    | "removeLiquidityForm"
+    | "airdropSplashFlow"
+    | "referralTable"
+    | "rewardsTable"
+    | "unstakeForm"
+    | "myTransactionsTable"
+    | "bridgeForm"
+    | "claimReferralRewardsForm"
+    | "stakeForm"
+    | "depositConfirmation"
+    | "marketingHero";
+}
+
 export interface PageViewedProperties {
   /**
    * Hash to identify the UI version when event was triggered
@@ -190,7 +233,7 @@ export interface PageViewedProperties {
   /**
    * | Rule | Value |
    * |---|---|
-   * | Enum Values | splashPage, bridgePage, poolPage, rewardsPage, transactionsPage, stakingPage, referralPage, airdropPage, 404Page, marketingHomePage, marketingBridgePage, marketingAcrossPlusPage, marketingSettlementPage |
+   * | Enum Values | splashPage, bridgePage, poolPage, rewardsPage, transactionsPage, stakingPage, referralPage, airdropPage, 404Page, marketingHomePage, marketingBridgePage, marketingAcrossPlusPage, marketingSettlementPage, depositStatusPage |
    */
   page:
     | "splashPage"
@@ -205,7 +248,8 @@ export interface PageViewedProperties {
     | "marketingHomePage"
     | "marketingBridgePage"
     | "marketingAcrossPlusPage"
-    | "marketingSettlementPage";
+    | "marketingSettlementPage"
+    | "depositStatusPage";
   path: string;
   /**
    * Address of referee, null if no referral used
@@ -229,6 +273,14 @@ export class ApplicationLoaded implements BaseEvent {
   event_type = "ApplicationLoaded";
 }
 
+export class BridgeButtonClicked implements BaseEvent {
+  event_type = "BridgeButtonClicked";
+
+  constructor(public event_properties: BridgeButtonClickedProperties) {
+    this.event_properties = event_properties;
+  }
+}
+
 export class PageViewed implements BaseEvent {
   event_type = "PageViewed";
 
@@ -371,6 +423,23 @@ export class Ampli {
     return this.track(new ApplicationLoaded(), options);
   }
 
+  /**
+   * BridgeButtonClicked
+   *
+   * [View in Tracking Plan](https://data.amplitude.com/risklabs/Risk%20Labs/events/main/latest/BridgeButtonClicked)
+   *
+   * Event has no description in tracking plan.
+   *
+   * @param properties The event's properties (e.g. page)
+   * @param options Amplitude event options.
+   */
+  bridgeButtonClicked(
+    properties: BridgeButtonClickedProperties,
+    options?: EventOptions,
+  ) {
+    return this.track(new BridgeButtonClicked(properties), options);
+  }
+
   /**
    * PageViewed
    *

src/app/_components/bridge-now-link.tsx

@@ -1,9 +1,11 @@
 "use client";
 
-import { useSearchParams } from "next/navigation";
-import { Suspense } from "react";
+import { usePathname, useSearchParams } from "next/navigation";
+import { Suspense, useCallback } from "react";
+import { ampli } from "../_amplitude";
+import { pageLookup } from "../_lib/amplitude";
 
-type Props = React.ComponentProps<"a">;
+type Props = React.ComponentProps<"a"> & { section: "navbar" | "marketingHero" };
 
 const bridgeAppBaseUrl = "https://app.across.to";
 
@@ -15,14 +17,24 @@ export function BridgeNowLink(props: Props) {
   );
 }
 
-function _BridgeNowLink({ className, ...props }: Props) {
+function _BridgeNowLink({ className, section, ...props }: Props) {
   const searchParams = useSearchParams();
 
   const refParams = searchParams.get("ref") || searchParams.get("referrer");
   const bridgeNowLink = `${bridgeAppBaseUrl}/bridge${refParams ? `?ref=${refParams}` : ""}`;
 
+  const pathname = usePathname();
+  const actionCallback = useCallback(() => {
+    console.log("HI(");
+    ampli.bridgeButtonClicked({
+      section: section,
+      page: pageLookup(pathname),
+    });
+  }, [pathname, section]);
+
   return (
     <a
+      onClick={actionCallback}
       className={className}
       href={bridgeNowLink}
       target="_blank"

src/app/_components/header-nav/index.tsx

@@ -118,7 +118,7 @@ export function HeaderNav() {
             </div>
           </div>
           <div className="flex flex-row gap-3">
-            <BridgeNowLink>
+            <BridgeNowLink section="navbar">
               <Button
                 className={twMerge(
                   "hidden transition md:block",

src/app/_components/header-nav/mobile-menu.tsx

@@ -30,7 +30,7 @@ export function MobileMenu(props: {
       show={props.isMenuOpen}
     >
       <div className="absolute flex min-h-screen w-full flex-col gap-6 bg-grey-dark p-4 md:hidden">
-        <BridgeNowLink className="flex w-full flex-row">
+        <BridgeNowLink className="flex w-full flex-row" section="navbar">
           <Button
             className={twMerge(
               "w-full",

src/app/_components/page-tracking.tsx

@@ -0,0 +1,8 @@
+"use client";
+
+import { usePageTracking } from "@/app/_hooks/usePageTracking";
+
+export function PageTracking() {
+  usePageTracking();
+  return <></>;
+}

src/app/_hooks/useAmplitude.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { useContext, createContext, ReactNode, useState, useEffect } from "react";
+import { AMPLITUDE_KEY } from "../_constants";
+import { initializeAmplitude } from "../_lib/amplitude";
+
+const isAmpliDisabled = !Boolean(AMPLITUDE_KEY);
+
+export const AmpliContext = createContext<{
+  isAmpliInitialized: boolean;
+  isAmpliDisabled: boolean;
+}>({
+  isAmpliInitialized: false,
+  isAmpliDisabled,
+});
+
+export function AmpliProvider({ children }: { children: ReactNode }) {
+  const [isAmpliInitialized, setIsAmpliInitialized] = useState(false);
+  // Initialize Amplitude
+  useEffect(() => {
+    console.log("isAmpliInitialized", isAmpliInitialized);
+    console.log("isAmpliDisabled", isAmpliDisabled);
+    if (!isAmpliInitialized && !isAmpliDisabled) {
+      initializeAmplitude(setIsAmpliInitialized);
+    }
+    if (isAmpliDisabled) {
+      console.debug("Amplitude instrumentation is disabled.");
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return (
+    <AmpliContext.Provider
+      value={{
+        isAmpliInitialized,
+        isAmpliDisabled,
+      }}
+    >
+      {children}
+    </AmpliContext.Provider>
+  );
+}
+
+export function useAmplitude() {
+  const context = useContext(AmpliContext);
+  return context;
+}

src/app/_hooks/useAmplitude.ts → src/app/_hooks/usePageTracking.ts

@@ -1,18 +1,19 @@
 import { useEffect, useState } from "react";
 import { ampli } from "../_amplitude";
 import { GIT_COMMIT_HASH } from "../_constants/environment";
-import { initializeAmplitude, pageLookup } from "../_lib/amplitude";
+import { pageLookup } from "../_lib/amplitude";
 import { usePathname } from "next/navigation";
+import { useAmplitude } from "./useAmplitude";
 
-export function useAmplitude() {
-  const [isAmplitudeInitialized, setIsAmplitudeInitialized] = useState(false);
+export function usePageTracking() {
   const [isInitialPageView, setIsInitialPageView] = useState(true);
+  const { isAmpliInitialized } = useAmplitude();
 
   const pathname = usePathname();
 
   // Tracking page views on client side
   useEffect(() => {
-    if (isAmplitudeInitialized && pathname) {
+    if (isAmpliInitialized && pathname) {
       const referrer = document.referrer;
       const origin = window.location.origin;
       ampli.pageViewed({
@@ -26,13 +27,5 @@ export function useAmplitude() {
     }
     setIsInitialPageView(true);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [pathname, isAmplitudeInitialized]);
-
-  // Initialize Amplitude
-  useEffect(() => {
-    if (!isAmplitudeInitialized) {
-      initializeAmplitude(setIsAmplitudeInitialized);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [pathname, isAmpliInitialized]);
 }

src/app/layout.tsx

@@ -4,9 +4,10 @@ import { Barlow } from "next/font/google";
 
 import { Footer } from "@/app/_components/footer";
 import { HeaderNav } from "@/app/_components/header-nav";
-import { Amplitude } from "@/app/_components/amplitude";
+import { PageTracking } from "@/app/_components/page-tracking";
 
 import "./globals.css";
+import { AmpliProvider } from "./_hooks/useAmplitude";
 
 const inter = Barlow({
   subsets: ["latin"],
@@ -29,12 +30,14 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={twMerge(inter.className, "bg-grey-dark text-light-300")}>
-        <div className="flex min-h-screen flex-col justify-between">
-          <HeaderNav />
-          {children}
-          <Footer />
-        </div>
-        <Amplitude />
+        <AmpliProvider>
+          <div className="flex min-h-screen flex-col justify-between">
+            <HeaderNav />
+            {children}
+            <Footer />
+          </div>
+          <PageTracking />
+        </AmpliProvider>
       </body>
     </html>
   );