Add new contact form

website/app/services/support/contact/page.tsx

@@ -1,9 +1,7 @@
 import React from "react";
 
-import { getRecentBlogPostTeasers } from "@/lib/blog";
 import ContactPage from "@/page-components/services/support/contact";
 
 export default function Page() {
-  const recentPosts = getRecentBlogPostTeasers();
-  return <ContactPage recentPosts={recentPosts} />;
+  return <ContactPage />;
 }

website/lib/analytics.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import { useEffect } from "react";
+
+declare global {
+  interface Window {
+    gtag?: (...args: unknown[]) => void;
+  }
+}
+
+function getContentGroup(pathname: string): string {
+  if (pathname.startsWith("/docs")) {
+    return "Documentation";
+  }
+  if (pathname.startsWith("/blog")) {
+    return "Blog";
+  }
+  if (pathname.startsWith("/products")) {
+    return "Products";
+  }
+  if (pathname.startsWith("/platform")) {
+    return "Platform";
+  }
+  if (pathname.startsWith("/services")) {
+    return "Services";
+  }
+  if (pathname.startsWith("/pricing")) {
+    return "Pricing";
+  }
+  if (pathname.startsWith("/legal") || pathname.startsWith("/licensing")) {
+    return "Legal";
+  }
+  if (pathname === "/") {
+    return "Home";
+  }
+  return "Other";
+}
+
+export function AnalyticsContentGroup() {
+  const pathname = usePathname();
+
+  useEffect(() => {
+    if (window.gtag) {
+      window.gtag("set", { content_group: getContentGroup(pathname) });
+    }
+  }, [pathname]);
+
+  return null;
+}
+
+export function AnalyticsClickTracker() {
+  const pathname = usePathname();
+
+  useEffect(() => {
+    function handleClick(e: MouseEvent) {
+      const el = (e.target as HTMLElement).closest<HTMLElement>("[data-track]");
+      if (!el || !window.gtag) {
+        return;
+      }
+
+      window.gtag("event", el.dataset.track, {
+        event_label: el.dataset.trackLabel || el.textContent?.trim(),
+        link_url: el.getAttribute("href") || undefined,
+        page_path: pathname,
+      });
+    }
+
+    document.addEventListener("click", handleClick);
+    return () => document.removeEventListener("click", handleClick);
+  }, [pathname]);
+
+  return null;
+}

website/lib/providers.tsx

@@ -6,6 +6,7 @@ import { Provider } from "react-redux";
 import createStore from "@/state";
 import { initialState as workshopsInitialState } from "@/state/workshops/workshops.state";
 import { StyledComponentsRegistry } from "./registry";
+import { AnalyticsClickTracker, AnalyticsContentGroup } from "./analytics";
 
 export interface LatestBlogPost {
   title: string;
@@ -46,6 +47,8 @@ export function Providers({ children, latestBlogPost }: ProvidersProps) {
     <Provider store={store}>
       <LatestBlogPostContext.Provider value={latestBlogPost ?? null}>
         <StyledComponentsRegistry>{children}</StyledComponentsRegistry>
+        <AnalyticsContentGroup />
+        <AnalyticsClickTracker />
       </LatestBlogPostContext.Provider>
     </Provider>
   );

website/src/components/layout/site/header.tsx

@@ -921,12 +921,14 @@ const DemoAndLaunch: FC<DemoAndLaunchProps> = ({ tools }) => {
   return (
     <>
       <RequestDemoLink
-        to="mailto:contact@chillicream.com?subject=Demo"
-        prefetch={false}
+        to="/services/support/contact"
+        data-track="contact_us_click"
       >
-        Request a Demo
+        Contact Us
       </RequestDemoLink>
-      <LaunchLink to={tools.nitro}>Launch</LaunchLink>
+      <LaunchLink to={tools.nitro} data-track="launch_click">
+        Launch
+      </LaunchLink>
     </>
   );
 };