feat: add website analytics tracking (#38)

Author: sirily11

RxCodeMobile/Views/MobileChatView.swift

@@ -349,7 +349,7 @@ struct MobileChatView: View {
                     .environment(\.chatTrackedMessageID, trackedUserMessageID)
                     .environment(\.chatTrackedMessageGeometry, updateLatestUserMinY)
                 }
-                .scrollDismissesKeyboard(.interactively)
+                .mobileDismissesKeyboardOnScroll(.interactively)
                 .onGeometryChange(for: CGRect.self) { proxy in
                     proxy.frame(in: .global)
                 } action: { rect in

RxCodeMobile/Views/MobileKeyboardDismissModifier.swift

@@ -1,9 +1,40 @@
 import SwiftUI
+import UIKit
+
+private struct MobileKeyboardDismissOnScrollModifier: ViewModifier {
+    let mode: ScrollDismissesKeyboardMode
+    @GestureState private var isDragging = false
+
+    func body(content: Content) -> some View {
+        content
+            .scrollDismissesKeyboard(mode)
+            .simultaneousGesture(
+                DragGesture(minimumDistance: 2)
+                    .updating($isDragging) { _, state, _ in
+                        if !state {
+                            UIApplication.shared.dismissKeyboard()
+                        }
+                        state = true
+                    }
+            )
+    }
+}
 
 extension View {
     func mobileDismissesKeyboardOnScroll(
         _ mode: ScrollDismissesKeyboardMode = .interactively
     ) -> some View {
-        scrollDismissesKeyboard(mode)
+        modifier(MobileKeyboardDismissOnScrollModifier(mode: mode))
+    }
+}
+
+private extension UIApplication {
+    func dismissKeyboard() {
+        sendAction(
+            #selector(UIResponder.resignFirstResponder),
+            to: nil,
+            from: nil,
+            for: nil
+        )
     }
 }

website/README.md

@@ -18,6 +18,11 @@ Open [http://localhost:3000](http://localhost:3000) with your browser to see the
 
 You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
 
+## Environment
+
+Set `NEXT_PUBLIC_GOOGLE_ANALYTICS_ID` to enable Google Analytics page-view
+tracking and CTA click events.
+
 This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
 
 ## Learn More

website/app/analytics.tsx

@@ -0,0 +1,57 @@
+import Script from "next/script";
+
+const GOOGLE_ANALYTICS_ID = process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID?.trim();
+
+export const isGoogleAnalyticsEnabled = Boolean(GOOGLE_ANALYTICS_ID);
+
+export type AnalyticsEventName =
+  | "download_button_click"
+  | "app_store_button_click";
+
+type AnalyticsEventParams = Record<string, string | number | boolean | null>;
+
+declare global {
+  interface Window {
+    dataLayer?: unknown[];
+    gtag?: (
+      command: "js" | "config" | "event",
+      target: string | Date,
+      params?: Record<string, unknown>
+    ) => void;
+  }
+}
+
+export function GoogleAnalytics() {
+  if (!GOOGLE_ANALYTICS_ID) {
+    return null;
+  }
+
+  return (
+    <>
+      <Script
+        src={`https://www.googletagmanager.com/gtag/js?id=${GOOGLE_ANALYTICS_ID}`}
+        strategy="afterInteractive"
+      />
+      <Script id="google-analytics" strategy="afterInteractive">
+        {`
+          window.dataLayer = window.dataLayer || [];
+          function gtag(){dataLayer.push(arguments);}
+          gtag('js', new Date());
+          gtag('config', '${GOOGLE_ANALYTICS_ID}', { send_page_view: false });
+        `}
+      </Script>
+    </>
+  );
+}
+
+export function trackAnalyticsEvent(
+  eventName: AnalyticsEventName,
+  params: AnalyticsEventParams = {}
+) {
+  if (!isGoogleAnalyticsEnabled || typeof window === "undefined") {
+    return;
+  }
+
+  window.gtag?.("event", eventName, params);
+}
+

website/app/layout.tsx

@@ -1,6 +1,8 @@
 import type { Metadata } from "next";
 import { Geist, Inter, JetBrains_Mono } from "next/font/google";
+import { GoogleAnalytics } from "./analytics";
 import "./globals.css";
+import { PageViewTracker } from "./page-view-tracker";
 
 const inter = Inter({
   variable: "--font-inter",
@@ -63,7 +65,11 @@ export default function RootLayout({
       lang="en"
       className={`${inter.variable} ${geist.variable} ${jetbrainsMono.variable}`}
     >
-      <body className="min-h-screen flex flex-col">{children}</body>
+      <body className="min-h-screen flex flex-col">
+        {children}
+        <PageViewTracker />
+      </body>
+      <GoogleAnalytics />
     </html>
   );
 }

website/app/page-view-tracker.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import { useEffect } from "react";
+import { isGoogleAnalyticsEnabled } from "./analytics";
+
+export function PageViewTracker() {
+  const pathname = usePathname();
+
+  useEffect(() => {
+    if (!isGoogleAnalyticsEnabled || typeof window === "undefined") {
+      return;
+    }
+
+    const pagePath = `${window.location.pathname}${window.location.search}`;
+
+    window.gtag?.("event", "page_view", {
+      page_path: pagePath,
+      page_location: window.location.href,
+      page_title: document.title,
+    });
+  }, [pathname]);
+
+  return null;
+}

website/app/page.tsx

@@ -2,6 +2,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { AgentTalkFeature } from "./agent-talk-feature";
 import { formatSize, getLatestRelease } from "./lib/release";
+import { TrackedLink } from "./tracked-link";
 
 const GITHUB_REPO_URL = "https://github.com/rxtech-lab/rxcode";
 
@@ -202,12 +203,15 @@ function TopNav({
             </a>
           </div>
         </div>
-        <a
+        <TrackedLink
           href={release.dmgUrl}
+          analyticsEventName="download_button_click"
+          analyticsLabel="Download for macOS"
+          analyticsLocation="top_nav"
           className="hidden sm:inline-flex items-center gap-2 bg-primary text-on-primary px-4 py-2 font-mono text-[11px] tracking-widest uppercase border border-primary hover:bg-transparent hover:text-primary transition-colors"
         >
           Download for macOS
-        </a>
+        </TrackedLink>
       </div>
     </nav>
   );
@@ -244,8 +248,11 @@ function Hero({
         </p>
 
         <div className="mt-10 flex flex-col sm:flex-row gap-3">
-          <a
+          <TrackedLink
             href={release.dmgUrl}
+            analyticsEventName="download_button_click"
+            analyticsLabel={`Download for macOS ${release.tag}`}
+            analyticsLocation="hero"
             className="inline-flex items-center justify-center gap-3 bg-primary text-on-primary px-8 py-3.5 font-mono text-xs tracking-widest uppercase border border-primary hover:bg-transparent hover:text-primary transition-colors active:scale-95"
           >
             <AppleIcon className="w-4 h-4" />
@@ -255,7 +262,7 @@ function Hero({
               {release.tag}
               {sizeLabel ? ` · ${sizeLabel}` : ""}
             </span>
-          </a>
+          </TrackedLink>
           <a
             href={GITHUB_REPO_URL}
             target="_blank"
@@ -466,8 +473,11 @@ function MobileCompanion() {
             ))}
           </ul>
           {appStoreUrl ? (
-            <a
+            <TrackedLink
               href={appStoreUrl}
+              analyticsEventName="app_store_button_click"
+              analyticsLabel="Download on the App Store"
+              analyticsLocation="mobile_companion"
               target="_blank"
               rel="noreferrer"
               className="mt-8 inline-block w-fit hover:opacity-85 transition-opacity active:scale-95"
@@ -480,7 +490,7 @@ function MobileCompanion() {
                 unoptimized
                 className="h-[52px] w-auto"
               />
-            </a>
+            </TrackedLink>
           ) : null}
         </div>
         <div className="grid grid-cols-2 gap-4 sm:gap-5">
@@ -523,13 +533,16 @@ function CTA({
           start driving your agents visually.
         </p>
         <div className="flex flex-col sm:flex-row gap-3 justify-center">
-          <a
+          <TrackedLink
             href={release.dmgUrl}
+            analyticsEventName="download_button_click"
+            analyticsLabel={`Download RxCode ${release.tag}`}
+            analyticsLocation="cta"
             className="inline-flex items-center justify-center gap-3 bg-primary text-on-primary px-8 py-3.5 font-mono text-xs tracking-widest uppercase border border-primary hover:bg-transparent hover:text-primary transition-colors active:scale-95"
           >
             <AppleIcon className="w-4 h-4" />
             Download RxCode {release.tag}
-          </a>
+          </TrackedLink>
           <Link
             href="/release"
             className="inline-flex items-center justify-center gap-2 border border-outline text-on-surface px-8 py-3.5 font-mono text-xs tracking-widest uppercase hover:border-primary hover:text-primary transition-colors active:scale-95"

website/app/release/page.tsx

@@ -8,6 +8,7 @@ import {
   getLatestRelease,
   type AppReleaseNote,
 } from "../lib/release";
+import { TrackedLink } from "../tracked-link";
 
 const GITHUB_REPO_URL = "https://github.com/rxtech-lab/rxcode";
 
@@ -122,12 +123,15 @@ function ReleaseList({
       <section className="max-w-[var(--container-max)] mx-auto px-6 pt-4">
         <div className="bg-surface border border-surface-variant p-8 text-center text-on-surface-variant">
           <p>Release notes are temporarily unavailable.</p>
-          <a
+          <TrackedLink
             href={latestDmg}
+            analyticsEventName="download_button_click"
+            analyticsLabel="Download latest build"
+            analyticsLocation="release_empty_state"
             className="mt-6 inline-flex items-center justify-center gap-2 border border-outline px-6 py-3 font-mono text-xs tracking-widest uppercase hover:border-primary hover:text-primary transition-colors"
           >
             Download latest build
-          </a>
+          </TrackedLink>
         </div>
       </section>
     );
@@ -196,12 +200,15 @@ function ReleaseCard({
         </div>
         <div className="flex flex-wrap gap-3">
           {release.enclosureUrl && (
-            <a
+            <TrackedLink
               href={release.enclosureUrl}
+              analyticsEventName="download_button_click"
+              analyticsLabel={`Download ${tag}`}
+              analyticsLocation="release_card"
               className="inline-flex items-center justify-center gap-2 bg-primary text-on-primary px-5 py-2.5 font-mono text-[11px] tracking-widest uppercase border border-primary hover:bg-transparent hover:text-primary transition-colors active:scale-95"
             >
               Download .dmg
-            </a>
+            </TrackedLink>
           )}
           {release.link && (
             <a

website/app/tracked-link.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import type { AnchorHTMLAttributes, ReactNode } from "react";
+import {
+  type AnalyticsEventName,
+  trackAnalyticsEvent,
+} from "./analytics";
+
+type TrackedLinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
+  analyticsEventName: AnalyticsEventName;
+  analyticsLabel: string;
+  analyticsLocation: string;
+  children: ReactNode;
+};
+
+export function TrackedLink({
+  analyticsEventName,
+  analyticsLabel,
+  analyticsLocation,
+  children,
+  href,
+  onClick,
+  ...props
+}: TrackedLinkProps) {
+  return (
+    <a
+      href={href}
+      onClick={(event) => {
+        trackAnalyticsEvent(analyticsEventName, {
+          label: analyticsLabel,
+          location: analyticsLocation,
+          link_url: href ?? null,
+          transport_type: "beacon",
+        });
+        onClick?.(event);
+      }}
+      {...props}
+    >
+      {children}
+    </a>
+  );
+}