Refactor button components for event tracking and integrate Facebook pixel

- Replaced TrackedButton components with standard button elements across various pages to streamline event tracking using a custom trackEvent function.
- Integrated Facebook pixel tracking script into the layout component for enhanced analytics capabilities.
- Updated event tracking for signup and demo actions to ensure accurate data collection.

Author: goldflag

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 { TrackedButton } from "@/components/TrackedButton";
+import { trackEvent } from "@/lib/trackEvent";
 import { EventTracking } from "@/components/Cards/EventTracking";
 import { GoalConversion } from "@/components/Cards/GoalConversion";
 import { RealTimeAnalytics } from "@/components/Cards/RealTimeAnalytics";
@@ -113,22 +113,20 @@ export default function HomePage() {
               data-rybbit-event="signup"
               data-rybbit-prop-location="hero"
             >
-              <TrackedButton
-                eventName="signup_click"
-                eventData={{ location: "hero", button_text: "Track your site" }}
+              <button
+                onClick={() => trackEvent("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
-              </TrackedButton>
+              </button>
             </Link>
             <Link href="https://demo.rybbit.io/21" className="w-full sm:w-auto" data-rybbit-event="demo">
-              <TrackedButton
-                eventName="demo_click"
-                eventData={{ location: "hero", button_text: "See live demo" }}
+              <button
+                onClick={() => trackEvent("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
-              </TrackedButton>
+              </button>
             </Link>
           </div>
           <p className="text-neutral-400 text-xs md:text-sm flex items-center justify-center gap-2 mt-6">
@@ -481,13 +479,12 @@ 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">
-                  <TrackedButton
-                    eventName="signup_click"
-                    eventData={{ location: "bottom_cta", button_text: "Track your site for free" }}
+                  <button
+                    onClick={() => trackEvent("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
-                  </TrackedButton>
+                  </button>
                 </Link>
                 {/* <Link href="https://docs.tomato.gg" className="w-full sm:w-auto">
                   <button className="w-full sm:w-auto bg-neutral-800 hover:bg-neutral-700 text-white font-medium px-6 md:px-8 py-3 md:py-4 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">

docs-v2/src/app/compare/components/ComparisonPage.tsx

@@ -1,5 +1,5 @@
 import { CheckCircle, CircleMinus, CircleX } from "lucide-react";
-import { TrackedButton } from "../../../components/TrackedButton";
+import { trackEvent } from "../../../lib/trackEvent";
 import Link from "next/link";
 import Image from "next/image";
 import { cn } from "../../../lib/utils";
@@ -82,22 +82,20 @@ export function ComparisonPage({
               data-rybbit-event="signup"
               data-rybbit-prop-location="hero"
             >
-              <TrackedButton
-                eventName="signup_click"
-                eventData={{ location: "hero", button_text: "Track your site" }}
+              <button
+                onClick={() => trackEvent("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
-              </TrackedButton>
+              </button>
             </Link>
             <Link href="https://demo.rybbit.io/21" className="w-full sm:w-auto" data-rybbit-event="demo">
-              <TrackedButton
-                eventName="demo_click"
-                eventData={{ location: "hero", button_text: "See live demo" }}
+              <button
+                onClick={() => trackEvent("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
-              </TrackedButton>
+              </button>
             </Link>
           </div>
           <p className="text-neutral-400 text-xs md:text-sm flex items-center justify-center gap-2 mt-6">
@@ -213,13 +211,12 @@ 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">
-                <TrackedButton
-                  eventName="signup_click"
-                  eventData={{ location: "bottom_cta", button_text: "Track your site for free" }}
+                <button
+                  onClick={() => trackEvent("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
-                </TrackedButton>
+                </button>
               </Link>
             </div>
 

docs-v2/src/app/layout.tsx

@@ -106,6 +106,22 @@ a=t.getElementsByTagName(n)[0],a.parentNode.insertBefore(u,a))}(window,document,
 twq('config','qj0po');`,
           }}
         />
+        <Script
+          id="facebook-pixel"
+          strategy="afterInteractive"
+          dangerouslySetInnerHTML={{
+            __html: `!function(f,b,e,v,n,t,s)
+{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
+n.callMethod.apply(n,arguments):n.queue.push(arguments)};
+if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
+n.queue=[];t=b.createElement(e);t.async=!0;
+t.src=v;s=b.getElementsByTagName(e)[0];
+s.parentNode.insertBefore(t,s)}(window,document,'script',
+'https://connect.facebook.net/en_US/fbevents.js');
+fbq('init', '816836311029789');
+fbq('track', 'PageView');`,
+          }}
+        />
       </head>
       <Script
         src="https://demo.rybbit.io/api/script.js"

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 { TrackedButton } from "./TrackedButton";
+import { trackEvent } from "@/lib/trackEvent";
 
 export function CustomHeader() {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
@@ -72,13 +72,12 @@ export function CustomHeader() {
 
           {/* Login Button */}
           <a href="https://app.rybbit.io" target="_blank" rel="noopener noreferrer">
-            <TrackedButton
-              eventName="login_click"
-              eventData={{ location: "header" }}
+            <button
+              onClick={() => trackEvent("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
-            </TrackedButton>
+            </button>
           </a>
         </div>
 
@@ -140,13 +139,12 @@ export function CustomHeader() {
             </a>
             <div className="pt-2 border-t border-neutral-800">
               <a href="https://app.rybbit.io" target="_blank" rel="noopener noreferrer" className="block w-full">
-                <TrackedButton
-                  eventName="login_click"
-                  eventData={{ location: "header" }}
+                <button
+                  onClick={() => trackEvent("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
-                </TrackedButton>
+                </button>
               </a>
             </div>
           </div>

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 { TrackedButton } from "./TrackedButton";
+import { trackEvent } from "@/lib/trackEvent";
 
 // 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"];
@@ -196,15 +196,14 @@ export function PricingSection() {
                 </div>
 
                 <Link href="https://app.rybbit.io/signup" className="w-full block">
-                  <TrackedButton
-                    eventName="signup_click"
-                    eventData={{ location: "pricing" }}
+                  <button
+                    onClick={() => trackEvent("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"
                   >
                     Start for free
-                  </TrackedButton>
+                  </button>
                 </Link>
                 <div className="space-y-3 mt-6 mb-3">
                   {FREE_FEATURES.map((item, i) => (
@@ -253,15 +252,14 @@ export function PricingSection() {
                   </Link>
                 ) : (
                   <Link href="https://app.rybbit.io/signup" className="w-full block">
-                    <TrackedButton
-                      eventName="signup_click"
-                      eventData={{ location: "pricing" }}
+                    <button
+                      onClick={() => trackEvent("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"
                     >
                       Try for free
-                    </TrackedButton>
+                    </button>
                   </Link>
                 )}
 
@@ -319,15 +317,14 @@ export function PricingSection() {
                   </Link>
                 ) : (
                   <Link href="https://app.rybbit.io/signup" className="w-full block">
-                    <TrackedButton
-                      eventName="signup_click"
-                      eventData={{ location: "pricing" }}
+                    <button
+                      onClick={() => trackEvent("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"
                     >
                       Try for free
-                    </TrackedButton>
+                    </button>
                   </Link>
                 )}
 

docs-v2/src/components/TrackedButton.tsx

@@ -0,0 +1,33 @@
+/* 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 trackEvent(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))) {
+      window.twq("event", "tw-qj0po-qjdz6", {});
+    }
+    if (["demo"].some(event => eventName.toLowerCase().includes(event))) {
+      window.twq("event", "tw-qj0po-qje0f", {});
+    }
+  }
+
+  // Track Facebook lead event
+  if (typeof window !== "undefined" && window.fbq) {
+    if (["signup"].some(event => eventName.toLowerCase().includes(event))) {
+      window.fbq("track", "Lead", eventData);
+    }
+    // if (["demo"].some(event => eventName.toLowerCase().includes(event))) {
+    //   window.fbq("track", "ViewContent", eventData);
+    // }
+    // Track custom events for other button clicks
+    if (!["signup", "demo"].some(event => eventName.toLowerCase().includes(event))) {
+      window.fbq("trackCustom", eventName, eventData);
+    }
+  }
+}