Enhance plausible tracking for registrations (#343)

Author: Pabl0cks

packages/nextjs/app/_components/RegisterUser.tsx

@@ -58,7 +58,13 @@ export const RegisterUser = () => {
           )}
           <button
             className="flex items-center justify-center py-1.5 lg:py-2 px-3 lg:px-4 border-2 border-primary rounded-full bg-base-300 hover:bg-base-200 transition-colors cursor-pointer mt-4 text-sm w-full"
-            onClick={() => handleRegister({ referrer: storedReferrer, originalUtmParams: parsedUtmParams })}
+            onClick={() =>
+              handleRegister({
+                referrer: storedReferrer,
+                originalUtmParams: parsedUtmParams,
+                eventTrigger: "header_register_tooltip_button",
+              })
+            }
             disabled={isRegistering}
             data-testid="register-user-tooltip-button"
           >

packages/nextjs/app/api/users/register/route.ts

@@ -11,11 +11,14 @@ type RegisterPayload = {
   signature: `0x${string}`;
   referrer: string | null;
   originalUtmParams?: Record<string, string>;
+  eventPath?: string;
+  eventTrigger?: string;
 };
 
 export async function POST(req: Request) {
   try {
-    const { address, signature, referrer, originalUtmParams } = (await req.json()) as RegisterPayload;
+    const { address, signature, referrer, originalUtmParams, eventPath, eventTrigger } =
+      (await req.json()) as RegisterPayload;
 
     if (!address || !signature) {
       return NextResponse.json({ error: "Address and signature are required" }, { status: 400 });
@@ -53,8 +56,11 @@ export async function POST(req: Request) {
             originalUtmCampaign: originalUtmParams?.utm_campaign,
             originalUtmTerm: originalUtmParams?.utm_term,
             originalUtmContent: originalUtmParams?.utm_content,
+            eventPath: eventPath ?? undefined,
+            eventTrigger: eventTrigger ?? undefined,
           },
           req,
+          eventPath ? `https://speedrunethereum.com${eventPath}` : undefined,
         );
       } catch (e) {
         console.error(`Error tracking plausible event ${PlausibleEvent.SIGNUP_SRE} for user ${address}`);

packages/nextjs/app/challenge/[challengeId]/_components/ConnectAndRegisterBanner.tsx

@@ -58,6 +58,7 @@ export const ConnectAndRegisterBanner = () => {
                   handleRegister({
                     referrer: storedReferrer,
                     originalUtmParams: parsedUtmParams,
+                    eventTrigger: "challenge_banner_register_button",
                   })
                 }
                 disabled={isRegistering}

packages/nextjs/app/start/_components/ConnectAndRegisterSection.tsx

@@ -25,7 +25,11 @@ export const ConnectAndRegisterSection = () => {
   const handleRegisterClick = async () => {
     setIsLocalLoading(true);
     try {
-      await handleRegister({ referrer: storedReferrer, originalUtmParams: parsedUtmParams });
+      await handleRegister({
+        referrer: storedReferrer,
+        originalUtmParams: parsedUtmParams,
+        eventTrigger: "start_register_button",
+      });
     } catch (error) {
       console.error("Registration failed:", error);
     } finally {

packages/nextjs/hooks/useUserRegister.ts

@@ -14,15 +14,26 @@ export function useUserRegister() {
     mutationFn: async ({
       referrer,
       originalUtmParams,
+      eventTrigger,
     }: {
       referrer: string | null;
       originalUtmParams?: Record<string, string>;
+      eventTrigger?: string;
     }) => {
       if (!address) throw new Error("Wallet not connected");
 
       const signature = await signWithNotification(EIP_712_TYPED_DATA__USER_REGISTER);
 
-      return registerUser({ address, signature, referrer, originalUtmParams });
+      const eventPath = typeof window !== "undefined" ? window.location.pathname : undefined;
+
+      return registerUser({
+        address,
+        signature,
+        referrer,
+        originalUtmParams,
+        eventPath,
+        eventTrigger,
+      });
     },
     onSuccess: user => {
       queryClient.setQueryData(["user", address], user);

packages/nextjs/services/api/users/index.ts

@@ -22,18 +22,22 @@ export async function registerUser({
   signature,
   referrer,
   originalUtmParams,
+  eventPath,
+  eventTrigger,
 }: {
   address: string;
   signature: string;
   referrer: string | null;
   originalUtmParams?: Record<string, string>;
+  eventPath?: string;
+  eventTrigger?: string;
 }) {
   const response = await fetch("/api/users/register", {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
     },
-    body: JSON.stringify({ address, signature, referrer, originalUtmParams }),
+    body: JSON.stringify({ address, signature, referrer, originalUtmParams, eventPath, eventTrigger }),
   });
 
   const data = await response.json();

packages/nextjs/services/plausible.ts

@@ -10,11 +10,12 @@ export async function trackPlausibleEvent(
   eventName: PlausibleEvent,
   props?: Record<string, string | number | boolean | undefined>,
   request?: Request,
+  eventUrl?: string,
 ) {
   const payload = {
     domain: "speedrunethereum.com",
     name: eventName,
-    url: `https://speedrunethereum.com`,
+    url: eventUrl ?? `https://speedrunethereum.com`,
     props,
   };