Add analytics tracking for downloads, sign-ups, and tab openings

- Add download tracking to DownloadCard component on website download page with platform specification (macos-apple-silicon, macos-intel, linux-appimage, linux-deb, etc.)
- Add sign-up tracking in desktop app auth flow (user_signed_up event on SIGNED_IN)
- Add tab opening tracking with view specification in desktop app (tab_opened event with view type)

Co-Authored-By: [email protected] <[email protected]>

Author: devin-ai-integration[bot]

apps/desktop/src/auth.tsx

@@ -20,6 +20,7 @@ import {
   useState,
 } from "react";
 
+import { commands as analyticsCommands } from "@hypr/plugin-analytics";
 import { commands } from "@hypr/plugin-auth";
 
 import { env } from "./env";
@@ -238,6 +239,11 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
           setServerReachable(false);
         }
       }
+      if (event === "SIGNED_IN" && session) {
+        void analyticsCommands.event({
+          event: "user_signed_up",
+        });
+      }
       setSession(session);
     });
 

apps/desktop/src/store/zustand/tabs/basic.ts

@@ -1,5 +1,7 @@
 import type { StoreApi } from "zustand";
 
+import { commands as analyticsCommands } from "@hypr/plugin-analytics";
+
 import { id } from "../../../utils";
 import type { LifecycleState } from "./lifecycle";
 import type { NavigationState, TabHistory } from "./navigation";
@@ -34,10 +36,18 @@ export const createBasicSlice = <
   openCurrent: (tab) => {
     const { tabs, history } = get();
     set(openTab(tabs, tab, history, true));
+    void analyticsCommands.event({
+      event: "tab_opened",
+      view: tab.type,
+    });
   },
   openNew: (tab) => {
     const { tabs, history } = get();
     set(openTab(tabs, tab, history, false));
+    void analyticsCommands.event({
+      event: "tab_opened",
+      view: tab.type,
+    });
   },
   select: (tab) => {
     const { tabs } = get();

apps/web/src/routes/_view/download/index.tsx

@@ -8,6 +8,7 @@ import { cn } from "@hypr/utils";
 import { Image } from "@/components/image";
 import { SlashSeparator } from "@/components/slash-separator";
 import { usePlatform } from "@/hooks/use-platform";
+import { useAnalytics } from "@/hooks/use-posthog";
 
 export const Route = createFileRoute("/_view/download/")({
   component: Component,
@@ -60,18 +61,21 @@ function Component() {
                   spec="macOS 14.2+ (Apple Silicon)"
                   downloadUrl="/download/apple-silicon"
                   available={true}
+                  platform="macos-apple-silicon"
                 />
                 <DownloadCard
                   iconName="simple-icons:apple"
                   spec="macOS 14.2+ (Intel)"
                   downloadUrl="/download/apple-intel"
                   available={true}
+                  platform="macos-intel"
                 />
                 <DownloadCard
                   iconName="simple-icons:windows"
                   spec="Windows"
                   downloadUrl="#"
                   available={false}
+                  platform="windows"
                 />
               </div>
 
@@ -84,12 +88,14 @@ function Component() {
                   spec="Linux (AppImage)"
                   downloadUrl="/download/linux-appimage"
                   available={true}
+                  platform="linux-appimage"
                 />
                 <DownloadCard
                   iconName="simple-icons:linux"
                   spec="Linux (.deb)"
                   downloadUrl="/download/linux-deb"
                   available={true}
+                  platform="linux-deb"
                 />
               </div>
             </div>
@@ -115,12 +121,14 @@ function Component() {
                   spec="iOS 15+"
                   downloadUrl="#"
                   available={false}
+                  platform="ios"
                 />
                 <DownloadCard
                   iconName="simple-icons:android"
                   spec="Android 10+"
                   downloadUrl="#"
                   available={false}
+                  platform="android"
                 />
               </div>
             </div>
@@ -191,12 +199,24 @@ function DownloadCard({
   spec,
   downloadUrl,
   available,
+  platform,
 }: {
   iconName: string;
   spec: string;
   downloadUrl: string;
   available: boolean;
+  platform: string;
 }) {
+  const { track } = useAnalytics();
+
+  const handleClick = () => {
+    track("download_clicked", {
+      platform,
+      spec,
+      source: "download_page",
+    });
+  };
+
   return (
     <div className="flex flex-col items-center p-6 rounded-sm border border-neutral-100 bg-white hover:bg-stone-50 transition-all duration-200">
       <Icon icon={iconName} className="text-5xl text-neutral-700 mb-4" />
@@ -206,6 +226,7 @@ function DownloadCard({
         <a
           href={downloadUrl}
           download
+          onClick={handleClick}
           className="group w-full px-4 h-11 flex items-center justify-center bg-linear-to-t from-stone-600 to-stone-500 text-white rounded-full shadow-md hover:shadow-lg hover:scale-[102%] active:scale-[98%] transition-all text-base font-medium"
         >
           Download