feat(analytics): add behavior and payment funnel tracking

src/app/tip/tip-screen.tsx

@@ -7,7 +7,12 @@ import { ArrowLeft, Heart, Sparkles } from "lucide-react";
 import { CharacterAvatar } from "@/app/_components";
 import { MobileShell } from "@/app/_components/core";
 import { usePaymentOrderLifecycle } from "@/app/_hooks/use-payment-order-lifecycle";
+import { usePaymentPlanAnalytics } from "@/app/_hooks/use-payment-plan-analytics";
 import type { PayChannel } from "@/data/dto/payment";
+import {
+  behaviorAnalytics,
+  type PaymentAnalyticsContext,
+} from "@/lib/analytics";
 import {
   buildTipCoffeePath,
   DEFAULT_TIP_COFFEE_TYPE,
@@ -29,6 +34,11 @@ import {
 } from "./tip-screen.helpers";
 import styles from "./tip-screen.module.css";
 
+const TIP_ANALYTICS_CONTEXT: PaymentAnalyticsContext = {
+  entryPoint: "tip_page",
+  triggerReason: "ad_landing",
+};
+
 export interface TipScreenProps {
   coffeeType?: TipCoffeeType;
   shouldResumePendingOrder?: boolean;
@@ -55,6 +65,7 @@ export function TipScreen({
     [coffeeType, payment.plans],
   );
   const priceLabel = formatTipPrice(coffeePlan, coffeeType);
+  usePaymentPlanAnalytics(coffeePlan ? [coffeePlan] : [], TIP_ANALYTICS_CONTEXT);
   const isPaymentBusy =
     payment.isCreatingOrder || payment.isPollingOrder || payment.isPaid;
   const canCreateOrder =
@@ -136,6 +147,9 @@ export function TipScreen({
 
   const handleOrder = () => {
     if (isAuthLoading) return;
+    if (coffeePlan) {
+      behaviorAnalytics.planClick(coffeePlan, TIP_ANALYTICS_CONTEXT);
+    }
     if (!isRealLoginStatus(authState.loginStatus)) {
       navigator.openAuth(returnPath);
       return;
@@ -163,6 +177,8 @@ export function TipScreen({
         <header className={styles.header}>
           <button
             type="button"
+            data-analytics-key="tip.back"
+            data-analytics-label="Go back from tip"
             className={styles.backButton}
             aria-label="Go back"
             onClick={handleBack}