diff --git a/apps/site/src/app/studio/page.tsx b/apps/site/src/app/studio/page.tsx
index f78e254297..c91df6461a 100644
--- a/apps/site/src/app/studio/page.tsx
+++ b/apps/site/src/app/studio/page.tsx
@@ -3,11 +3,10 @@ import { createPageMetadata } from "@/lib/page-metadata";
import { Button } from "@prisma/eclipse";
import { JsonLd } from "@prisma-docs/ui/components/json-ld";
import Image from "next/image";
+import { ConsoleCtaButton } from "@/components/console-cta-button";
import { CopyCode } from "@/components/homepage/copy-btn";
import { Youtube } from "@prisma-docs/ui/components/youtube";
-const CONSOLE_URL =
- "https://console.prisma.io/login?utm_source=website&utm_medium=studio&utm_campaign=cta";
const STUDIO_DOCS_URL = "https://www.prisma.io/docs/studio";
const TRY_STUDIO_COMMAND = `npx try-prisma@latest --template orm/starter \\
&& cd hello-prisma \\
@@ -130,12 +129,20 @@ export default function StudioPage() {
-
+ >
+
diff --git a/apps/site/src/components/console-cta-button.tsx b/apps/site/src/components/console-cta-button.tsx
index 3b400d3d07..df221f2aed 100644
--- a/apps/site/src/components/console-cta-button.tsx
+++ b/apps/site/src/components/console-cta-button.tsx
@@ -2,12 +2,11 @@
import { useEffect, useState } from "react";
import { Button, type ButtonProps } from "@prisma/eclipse";
-import { getUtmParams, hasUtmParams, type UtmParams } from "@prisma-docs/ui/lib/utm";
+import { getUtmParams, type UtmParams } from "@prisma-docs/ui/lib/utm";
import { trackCTA } from "@prisma-docs/ui/lib/analytics";
interface ConsoleCtaButtonProps extends Omit
{
consolePath: "/login" | "/sign-up";
- defaultUtm: UtmParams;
target?: string;
rel?: string;
/** Where this CTA sits, e.g. "navbar", "hero", "pricing". Sent with the cta_click event. */
@@ -30,7 +29,6 @@ function buildConsoleHref(consolePath: "/login" | "/sign-up", utmParams: UtmPara
export function ConsoleCtaButton({
consolePath,
- defaultUtm,
children,
target,
rel,
@@ -38,15 +36,13 @@ export function ConsoleCtaButton({
ctaText,
...props
}: ConsoleCtaButtonProps) {
- const [href, setHref] = useState(() => buildConsoleHref(consolePath, defaultUtm));
+ const [href, setHref] = useState(() => buildConsoleHref(consolePath, {}));
useEffect(() => {
const currentUtmParams = getUtmParams(new URLSearchParams(window.location.search));
- setHref(
- buildConsoleHref(consolePath, hasUtmParams(currentUtmParams) ? currentUtmParams : defaultUtm),
- );
- }, [consolePath, defaultUtm]);
+ setHref(buildConsoleHref(consolePath, currentUtmParams));
+ }, [consolePath]);
return (
@@ -502,7 +514,18 @@ function NavigationMobileMenu({
variant={buttonVariant}
className="whitespace-nowrap w-full"
>
- Get started
+
+ trackCTA({
+ cta_text: "Get started",
+ cta_location: "navbar_mobile",
+ cta_destination: signupHref,
+ })
+ }
+ >
+ Get started
+
diff --git a/packages/ui/src/components/web-navigation.tsx b/packages/ui/src/components/web-navigation.tsx
index 43fa542f70..604754b108 100644
--- a/packages/ui/src/components/web-navigation.tsx
+++ b/packages/ui/src/components/web-navigation.tsx
@@ -17,6 +17,7 @@ import {
import { useEffect, useState } from "react";
import { FontAwesomeScript as WebFA } from "./fontawesome-web";
import { cn } from "../lib/cn";
+import { trackCTA } from "../lib/analytics";
export interface Link {
text: string;
@@ -54,11 +55,7 @@ function buildHref(base: string, utm?: WebNavigationProps["utm"]) {
return isAbsolute ? url.toString() : `${url.pathname}${url.search}${url.hash}`;
}
-function buildConsoleHref(
- pathname: "/login" | "/sign-up",
- utm?: WebNavigationProps["utm"],
- preserveExactUtm = false,
-) {
+function buildConsoleHref(pathname: "/login" | "/sign-up", utm?: WebNavigationProps["utm"]) {
if (!utm) {
return `https://console.prisma.io${pathname}`;
}
@@ -71,10 +68,6 @@ function buildConsoleHref(
}
}
- if (!preserveExactUtm && !href.searchParams.has("utm_campaign")) {
- href.searchParams.set("utm_campaign", pathname === "/login" ? "login" : "signup");
- }
-
return href.toString();
}
@@ -85,8 +78,8 @@ export function WebNavigation({
buttonVariant = "ppg",
}: WebNavigationProps) {
const [mobileView, setMobileView] = useState(false);
- const loginHref = buildConsoleHref("/login", utm, preserveExactUtm);
- const signupHref = buildConsoleHref("/sign-up", utm, preserveExactUtm);
+ const loginHref = buildConsoleHref("/login", utm);
+ const signupHref = buildConsoleHref("/sign-up", utm);
const logoHref = preserveExactUtm
? buildHref("https://www.prisma.io", utm)
: "https://www.prisma.io";
@@ -160,12 +153,34 @@ export function WebNavigation({