track more premium analytics

packages/fakeyou.com/src/common/Analytics.ts

@@ -32,6 +32,22 @@ class Analytics {
 
   // ========== PREMIUM ==========
 
+  static premiumSelectPlanPlus() {
+    Analytics.sendCategorizedEvent('premium', 'select_plan_plus');
+  }
+
+  static premiumSelectPlanPro() {
+    Analytics.sendCategorizedEvent('premium', 'select_plan_pro');
+  }
+
+  static premiumSelectPlanElite() {
+    Analytics.sendCategorizedEvent('premium', 'select_plan_elite');
+  }
+
+  static premiumSelectUnsubscribe() {
+    Analytics.sendCategorizedEvent('premium', 'select_unsubscribe');
+  }
+
   static premiumForwardToStripeCheckout() {
     Analytics.sendCategorizedEvent('premium', 'forward_to_stripe_checkout');
   }

packages/fakeyou.com/src/v2/view/premium/PricingPage.tsx

@@ -51,8 +51,25 @@ function PricingPage(props: Props) {
   };
 
   const beginStripeFlow = async (
-    internal_plan_key: string
+    internal_plan_key: string,
+    analyticsName: string,
   ): Promise<boolean> => {
+
+    switch (analyticsName) {
+      case "plus":
+        Analytics.premiumSelectPlanPlus();
+        break;
+      case "pro":
+        Analytics.premiumSelectPlanPro();
+        break;
+      case "elite":
+        Analytics.premiumSelectPlanElite();
+        break;
+      case "unsubscribe":
+        Analytics.premiumSelectUnsubscribe();
+        break;
+    }
+
     if (!props.sessionWrapper.isLoggedIn()) {
       // TODO: This needs to bring the user back to purchase flow.
       Analytics.premiumBounceToSignup();
@@ -119,7 +136,7 @@ function PricingPage(props: Props) {
     freeButton = (
       <>
         <button
-          onClick={() => beginStripeFlow(unsubscribeKey)}
+          onClick={() => beginStripeFlow(unsubscribeKey, "unsubscribe")}
           className="btn btn-secondary w-100 fs-6"
         >
           Unsubscribe
@@ -321,7 +338,7 @@ function PricingPage(props: Props) {
             <div className="rounded panel p-4 h-100">
               <h2 className="text-center my-2 fw-bold mb-4">{FYP.plus.tier}</h2>
               <button
-                onClick={() => beginStripeFlow(FYP.plus.internal_plan_key[planKey])}
+                onClick={() => beginStripeFlow(FYP.plus.internal_plan_key[planKey], "plus")}
                 className="btn btn-primary w-100 fs-6"
                 disabled={plusButtonDisabled}
               >
@@ -418,7 +435,7 @@ function PricingPage(props: Props) {
             <div className={proBorderCss}>
               <h2 className="text-center my-2 fw-bold mb-4">{FYP.pro.tier}</h2>
               <button
-                onClick={() => beginStripeFlow(FYP.pro.internal_plan_key[planKey])}
+                onClick={() => beginStripeFlow(FYP.pro.internal_plan_key[planKey], "pro")}
                 className="btn btn-primary w-100 fs-6"
                 disabled={proButtonDisabled}
               >
@@ -529,7 +546,7 @@ function PricingPage(props: Props) {
                 {FYP.elite.tier}
               </h2>
               <button
-                onClick={() => beginStripeFlow(FYP.elite.internal_plan_key[planKey])}
+                onClick={() => beginStripeFlow(FYP.elite.internal_plan_key[planKey], "elite")}
                 className="btn btn-primary w-100 fs-6"
                 disabled={eliteButtonDisabled}
               >