Refactor event tracking to use trackAdEvent function

goldflag · goldflag · commit 1401e3ff354d · 2025-09-25T19:53:50.000-07:00
- Replaced instances of trackEvent with trackAdEvent across multiple components to unify event tracking methodology.
- Updated PricingCard, HomePage, ComparisonPage, CustomHeader, and PricingSection components to ensure consistent tracking for signup, demo, and login actions.
- Removed the obsolete trackEvent file to streamline the codebase and enhance maintainability.
diff --git a/client/src/app/subscribe/components/PricingCard.tsx b/client/src/app/subscribe/components/PricingCard.tsx
@@ -5,8 +5,16 @@ import { cn } from "@/lib/utils";
 import { toast } from "sonner";
 import { BACKEND_URL } from "@/lib/const";
 import { authClient } from "@/lib/auth";
-import { EVENT_TIERS, STANDARD_FEATURES, PRO_FEATURES, FREE_FEATURES, findPriceForTier, formatEventTier } from "./utils";
+import {
+  EVENT_TIERS,
+  STANDARD_FEATURES,
+  PRO_FEATURES,
+  FREE_FEATURES,
+  findPriceForTier,
+  formatEventTier,
+} from "./utils";
 import { getStripePrices } from "../../../lib/stripe";
+import { trackAdEvent } from "../../../lib/trackAdevent";
 
 export function PricingCard({ isLoggedIn }: { isLoggedIn: boolean }) {
   const stripePrices = getStripePrices();
@@ -66,6 +74,7 @@ export function PricingCard({ isLoggedIn }: { isLoggedIn: boolean }) {
       });
 
       const data = await response.json();
+      trackAdEvent("checkout", { tier: selectedTierPrice.name });
 
       if (!response.ok) {
         throw new Error(data.error || "Failed to create checkout session.");
diff --git a/client/src/lib/trackAdEvent.ts b/client/src/lib/trackAdEvent.ts
@@ -0,0 +1,36 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+declare global {
+  interface Window {
+    twq?: (action: string, eventId: string, data?: any) => void;
+    fbq?: (action: string, eventName: string, data?: any) => void;
+  }
+}
+
+export function trackAdEvent(eventName: "signup" | "checkout" | "login", eventData?: Record<string, any>) {
+  // Track X/Twitter lead event for signup-related buttons
+  if (typeof window !== "undefined" && window.twq) {
+    if (["signup"].some(event => eventName.toLowerCase().includes(event))) {
+      window.twq("event", "tw-qj0po-qjdz6", {});
+    }
+    if (["demo"].some(event => eventName.toLowerCase().includes(event))) {
+      window.twq("event", "tw-qj0po-qje0f", {});
+    }
+    if (["checkout"].some(event => eventName.toLowerCase().includes(event))) {
+      window.twq("event", "tw-qj0po-qjju2", {});
+    }
+  }
+
+  // Track Facebook lead event
+  if (typeof window !== "undefined" && window.fbq) {
+    if (["signup"].some(event => eventName.toLowerCase().includes(event))) {
+      window.fbq("track", "Lead", eventData);
+    }
+    if (["checkout"].some(event => eventName.toLowerCase().includes(event))) {
+      window.fbq("track", "InitiateCheckout", eventData);
+    }
+    // Track custom events for other button clicks
+    if (!["signup", "demo"].some(event => eventName.toLowerCase().includes(event))) {
+      window.fbq("trackCustom", eventName, eventData);
+    }
+  }
+}
diff --git a/docs-v2/src/app/(home)/page.tsx b/docs-v2/src/app/(home)/page.tsx
@@ -4,7 +4,7 @@ import Link from "next/link";
 import { CheckCircle } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { GitHubStarButton } from "@/components/GitHubStarButton";
-import { trackEvent } from "@/lib/trackEvent";
+import { trackAdEvent } from "@/lib/trackAdEvent";
 import { EventTracking } from "@/components/Cards/EventTracking";
 import { GoalConversion } from "@/components/Cards/GoalConversion";
 import { RealTimeAnalytics } from "@/components/Cards/RealTimeAnalytics";
@@ -114,15 +114,15 @@ export default function HomePage() {
               data-rybbit-prop-location="hero"
             >
               <button
-                onClick={() => trackEvent("signup", { location: "hero", button_text: "Track your site" })}
+                onClick={() => trackAdEvent("signup", { location: "hero", button_text: "Track your site" })}
                 className="w-full sm:w-auto bg-emerald-600 hover:bg-emerald-500 text-white font-medium px-5 py-3 rounded-lg shadow-lg shadow-emerald-900/20 transform hover:-translate-y-0.5 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50 cursor-pointer"
               >
                 Track your site
               </button>
             </Link>
             <Link href="https://demo.rybbit.io/21" className="w-full sm:w-auto" data-rybbit-event="demo">
               <button
-                onClick={() => trackEvent("demo", { location: "hero", button_text: "See live demo" })}
+                onClick={() => trackAdEvent("demo", { location: "hero", button_text: "See live demo" })}
                 className="w-full sm:w-auto bg-neutral-800 hover:bg-neutral-700 text-white font-medium px-5 py-3 rounded-lg border border-neutral-600 transform hover:-translate-y-0.5 transition-all duration-200 hover:border-neutral-400 focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:ring-opacity-50 cursor-pointer"
               >
                 See live demo
@@ -480,7 +480,9 @@ export default function HomePage() {
               <div className="flex flex-col sm:flex-row items-center justify-center gap-4 md:gap-6 mb-6 md:mb-8 w-full sm:w-auto">
                 <Link href="https://app.rybbit.io/signup" className="w-full sm:w-auto">
                   <button
-                    onClick={() => trackEvent("signup", { location: "bottom_cta", button_text: "Track your site for free" })}
+                    onClick={() =>
+                      trackAdEvent("signup", { location: "bottom_cta", button_text: "Track your site for free" })
+                    }
                     className="w-full sm:w-auto bg-emerald-600 hover:bg-emerald-500 text-white text-lg font-medium px-6 md:px-8 py-3 md:py-4 rounded-lg shadow-lg shadow-emerald-900/20 transform hover:-translate-y-0.5 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50 cursor-pointer"
                   >
                     Track your site for free
diff --git a/docs-v2/src/app/compare/components/ComparisonPage.tsx b/docs-v2/src/app/compare/components/ComparisonPage.tsx
@@ -1,10 +1,10 @@
-import { CheckCircle, CircleMinus, CircleX } from "lucide-react";
-import { trackEvent } from "../../../lib/trackEvent";
-import Link from "next/link";
-import Image from "next/image";
-import { cn } from "../../../lib/utils";
+import { CheckCircle, CircleMinus } from "lucide-react";
 import { Tilt_Warp } from "next/font/google";
+import Image from "next/image";
+import Link from "next/link";
 import React from "react";
+import { trackAdEvent } from "../../../lib/trackAdEvent";
+import { cn } from "../../../lib/utils";
 
 const tilt_wrap = Tilt_Warp({
   subsets: ["latin"],
@@ -24,19 +24,11 @@ export interface ComparisonSection {
 
 export interface ComparisonPageProps {
   competitorName: string;
-  competitorLogo?: React.ReactNode;
   sections: ComparisonSection[];
-  demoUrl?: string;
   comparisonContent?: React.ReactNode;
 }
 
-export function ComparisonPage({
-  competitorName,
-  competitorLogo,
-  sections,
-  demoUrl = "https://demo.rybbit.io/21",
-  comparisonContent,
-}: ComparisonPageProps) {
+export function ComparisonPage({ competitorName, sections, comparisonContent }: ComparisonPageProps) {
   const renderFeatureValue = (value: string | boolean) => {
     if (typeof value === "boolean") {
       return value ? (
@@ -83,15 +75,15 @@ export function ComparisonPage({
               data-rybbit-prop-location="hero"
             >
               <button
-                onClick={() => trackEvent("signup", { location: "hero", button_text: "Track your site" })}
+                onClick={() => trackAdEvent("signup", { location: "hero", button_text: "Track your site" })}
                 className="w-full sm:w-auto bg-emerald-600 hover:bg-emerald-500 text-white font-medium px-5 py-3 rounded-lg shadow-lg shadow-emerald-900/20 transform hover:-translate-y-0.5 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50 cursor-pointer"
               >
                 Track your site
               </button>
             </Link>
             <Link href="https://demo.rybbit.io/21" className="w-full sm:w-auto" data-rybbit-event="demo">
               <button
-                onClick={() => trackEvent("demo", { location: "hero", button_text: "See live demo" })}
+                onClick={() => trackAdEvent("demo", { location: "hero", button_text: "See live demo" })}
                 className="w-full sm:w-auto bg-neutral-800 hover:bg-neutral-700 text-white font-medium px-5 py-3 rounded-lg border border-neutral-600 transform hover:-translate-y-0.5 transition-all duration-200 hover:border-neutral-400 focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:ring-opacity-50 cursor-pointer"
               >
                 See live demo
@@ -212,7 +204,9 @@ export function ComparisonPage({
             <div className="flex flex-col sm:flex-row items-center justify-center gap-4 md:gap-6 mb-6 md:mb-8 w-full sm:w-auto">
               <Link href="https://app.rybbit.io/signup" className="w-full sm:w-auto">
                 <button
-                  onClick={() => trackEvent("signup", { location: "bottom_cta", button_text: "Track your site for free" })}
+                  onClick={() =>
+                    trackAdEvent("signup", { location: "bottom_cta", button_text: "Track your site for free" })
+                  }
                   className="w-full sm:w-auto bg-emerald-600 hover:bg-emerald-500 text-white text-lg font-medium px-6 md:px-8 py-3 md:py-4 rounded-lg shadow-lg shadow-emerald-900/20 transform hover:-translate-y-0.5 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50 cursor-pointer"
                 >
                   Track your site for free
diff --git a/docs-v2/src/components/CustomHeader.tsx b/docs-v2/src/components/CustomHeader.tsx
@@ -4,7 +4,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { useState } from "react";
 import { Menu, X } from "lucide-react";
-import { trackEvent } from "@/lib/trackEvent";
+import { trackAdEvent } from "@/lib/trackAdEvent";
 
 export function CustomHeader() {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
@@ -73,7 +73,7 @@ export function CustomHeader() {
           {/* Login Button */}
           <a href="https://app.rybbit.io" target="_blank" rel="noopener noreferrer">
             <button
-              onClick={() => trackEvent("login", { location: "header" })}
+              onClick={() => trackAdEvent("login", { location: "header" })}
               className="bg-neutral-800 hover:bg-neutral-700 text-white text-sm font-medium px-3 py-1.5 rounded-md border border-neutral-600 transform hover:-translate-y-0.5 transition-all duration-200 hover:border-neutral-400 focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:ring-opacity-50"
             >
               Login
@@ -140,7 +140,7 @@ export function CustomHeader() {
             <div className="pt-2 border-t border-neutral-800">
               <a href="https://app.rybbit.io" target="_blank" rel="noopener noreferrer" className="block w-full">
                 <button
-                  onClick={() => trackEvent("login", { location: "header" })}
+                  onClick={() => trackAdEvent("login", { location: "header" })}
                   className="w-full bg-neutral-800 hover:bg-neutral-700 text-white text-sm font-medium px-3 py-2 rounded-md border border-neutral-600"
                 >
                   Login
diff --git a/docs-v2/src/components/PricingSection.tsx b/docs-v2/src/components/PricingSection.tsx
@@ -5,7 +5,7 @@ import { Check, X, CheckCircle } from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
 import { cn } from "@/lib/utils";
-import { trackEvent } from "@/lib/trackEvent";
+import { trackAdEvent } from "@/lib/trackAdEvent";
 
 // Available event tiers for the slider
 const EVENT_TIERS = [100_000, 250_000, 500_000, 1_000_000, 2_000_000, 5_000_000, 10_000_000, "Custom"];
@@ -197,7 +197,7 @@ export function PricingSection() {
 
                 <Link href="https://app.rybbit.io/signup" className="w-full block">
                   <button
-                    onClick={() => trackEvent("signup", { location: "pricing" })}
+                    onClick={() => trackAdEvent("signup", { location: "pricing" })}
                     data-rybbit-event="signup"
                     data-rybbit-prop-location="free"
                     className="w-full bg-neutral-700 hover:bg-neutral-600 text-white font-medium px-5 py-3 rounded-lg border border-neutral-600 transform hover:-translate-y-0.5 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:ring-opacity-50 cursor-pointer"
@@ -253,7 +253,7 @@ export function PricingSection() {
                 ) : (
                   <Link href="https://app.rybbit.io/signup" className="w-full block">
                     <button
-                      onClick={() => trackEvent("signup", { location: "pricing" })}
+                      onClick={() => trackAdEvent("signup", { location: "pricing" })}
                       data-rybbit-event="signup"
                       data-rybbit-prop-location="standard"
                       className="w-full bg-emerald-600 hover:bg-emerald-500 text-white font-medium px-5 py-3 rounded-lg shadow-lg shadow-emerald-900/20 transform hover:-translate-y-0.5 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50 cursor-pointer"
@@ -318,7 +318,7 @@ export function PricingSection() {
                 ) : (
                   <Link href="https://app.rybbit.io/signup" className="w-full block">
                     <button
-                      onClick={() => trackEvent("signup", { location: "pricing" })}
+                      onClick={() => trackAdEvent("signup", { location: "pricing" })}
                       data-rybbit-event="signup"
                       data-rybbit-prop-location="pro"
                       className="w-full bg-emerald-600 hover:bg-emerald-500 text-white font-medium px-5 py-3 rounded-lg shadow-lg shadow-emerald-900/20 transform hover:-translate-y-0.5 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50 cursor-pointer"
diff --git a/docs-v2/src/lib/trackAdEvent.ts b/docs-v2/src/lib/trackAdEvent.ts
@@ -6,7 +6,7 @@ declare global {
   }
 }
 
-export function trackEvent(eventName: "signup" | "demo" | "login", eventData?: Record<string, any>) {
+export function trackAdEvent(eventName: "signup" | "demo" | "login", eventData?: Record<string, any>) {
   // Track X/Twitter lead event for signup-related buttons
   if (typeof window !== "undefined" && window.twq) {
     if (["signup"].some(event => eventName.toLowerCase().includes(event))) {

Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@ declare global {`
`6`	`6`	`}`
`7`	`7`	`}`
`8`	`8`
`9`		`-export function trackEvent(eventName: "signup" \| "demo" \| "login", eventData?: Record<string, any>) {`
	`9`	`+export function trackAdEvent(eventName: "signup" \| "demo" \| "login", eventData?: Record<string, any>) {`
`10`	`10`	`// Track X/Twitter lead event for signup-related buttons`
`11`	`11`	`if (typeof window !== "undefined" && window.twq) {`
`12`	`12`	`if (["signup"].some(event => eventName.toLowerCase().includes(event))) {`