docs: update analytics event tracking

Author: nperez0111

docs/app/pricing/tiers.tsx

@@ -72,25 +72,55 @@ function TierCTAButton({ tier }: { tier: Tier }) {
   return (
     <a
       onClick={async (e) => {
+        // This event is deprecated, but we keep it to use as a baseline for analytics
+        track("Signup", { tier: tier.id });
+
         if (!session) {
+          Sentry.captureEvent({
+            message: "click-pricing-signup",
+            level: "info",
+            extra: {
+              tier: tier.id,
+            },
+          });
+          track("click-pricing-signup", { tier: tier.id });
           return;
         }
 
         if (session.planType === "free") {
           Sentry.captureEvent({
-            message: "Checkout",
+            message: "click-pricing-buy-now",
             level: "info",
             extra: {
               tier: tier.id,
             },
           });
-          track("Checkout", { tier: tier.id });
+          track("click-pricing-buy-now", { tier: tier.id });
           e.preventDefault();
           e.stopPropagation();
           await authClient.checkout({
             slug: tier.id,
           });
         } else {
+          if (session.planType === tier.id) {
+            Sentry.captureEvent({
+              message: "click-pricing-manage-subscription",
+              level: "info",
+              extra: {
+                tier: tier.id,
+              },
+            });
+            track("click-pricing-manage-subscription", { tier: tier.id });
+          } else {
+            Sentry.captureEvent({
+              message: "click-pricing-update-subscription",
+              level: "info",
+              extra: {
+                tier: tier.id,
+              },
+            });
+            track("click-pricing-update-subscription", { tier: tier.id });
+          }
           e.preventDefault();
           e.stopPropagation();
           await authClient.customer.portal();

docs/components/AuthenticationPage.tsx

@@ -71,9 +71,9 @@ function AuthenticationBox(props: {
     setSigningInState({ state: "loading" });
 
     if (props.variant === "password") {
-      track("Sign In", { type: "password" });
+      track("click-sign-in", { type: "password" });
       Sentry.captureEvent({
-        message: "Sign In",
+        message: "click-sign-in",
         level: "info",
         extra: {
           type: "password",
@@ -98,9 +98,9 @@ function AuthenticationBox(props: {
         },
       );
     } else if (props.variant === "email") {
-      track("Sign In", { type: "magic-link" });
+      track("click-sign-in", { type: "magic-link" });
       Sentry.captureEvent({
-        message: "Sign In",
+        message: "click-sign-in",
         level: "info",
         extra: {
           type: "magic-link",
@@ -135,9 +135,9 @@ function AuthenticationBox(props: {
         },
       );
     } else {
-      track("Create Account");
+      track("click-sign-up", { type: "email" });
       Sentry.captureEvent({
-        message: "Sign Up",
+        message: "click-sign-up",
         level: "info",
         extra: {
           type: "email",
@@ -323,7 +323,9 @@ function PasswordSignInButton() {
   );
 }
 
-function GitHubSignInButton() {
+function GitHubSignInButton(props: {
+  variant: "password" | "register" | "email";
+}) {
   const searchParams = useSearchParams();
   const callbackURL = searchParams?.get("redirect") || "/";
 
@@ -345,9 +347,13 @@ function GitHubSignInButton() {
         </svg>
       }
       onClick={async () => {
-        track("Sign In", { type: "github" });
+        track(
+          props.variant === "register" ? "click-sign-up" : "click-sign-in",
+          { type: "github" },
+        );
         Sentry.captureEvent({
-          message: "Sign In",
+          message:
+            props.variant === "register" ? "click-sign-up" : "click-sign-in",
           level: "info",
           extra: {
             type: "github",
@@ -380,7 +386,7 @@ function AlternativeSignInBox(props: {
       <div className="mt-6 flex flex-col gap-4">
         {props.variant === "email" && <PasswordSignInButton />}
         {props.variant === "password" && <EmailSignInButton />}
-        <GitHubSignInButton />
+        <GitHubSignInButton variant={props.variant} />
       </div>
     </div>
   );