feat: add AnalyticsLinkButton for conversion tracking (#1469)

codemod-com · Jan 31, 2025 · ca7fe2b · ca7fe2b
1 parent 8102367
commit ca7fe2b
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 6 deletions.
diff --git a/apps/frontend/components/shared/AnalyticsLinkButton.tsx b/apps/frontend/components/shared/AnalyticsLinkButton.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import type React from "react";
+import { useCallback } from "react";
+import LinkButton from "./LinkButton";
+
+interface AnalyticsLinkButtonProps {
+  href?: string;
+  children?: React.ReactNode;
+}
+
+const AnalyticsLinkButton = ({ href, children }: AnalyticsLinkButtonProps) => {
+  const handleMouseDown = useCallback(() => {
+    if (typeof window !== "undefined" && "gtag_report_conversion" in window) {
+      // @ts-ignore
+      gtag_report_conversion(href);
+    }
+  }, [href]);
+
+  return (
+    <LinkButton
+      href={href}
+      onMouseDown={handleMouseDown}
+      intent="primary"
+      arrow
+      hideExternalIcon
+    >
+      {children}
+    </LinkButton>
+  );
+};
+
+export default AnalyticsLinkButton;
diff --git a/apps/frontend/components/templates/i18nPage/I18nPageContent.tsx b/apps/frontend/components/templates/i18nPage/I18nPageContent.tsx
@@ -1,7 +1,7 @@
+import AnalyticsLinkButton from "@/components/shared/AnalyticsLinkButton";
 import GradientBlob from "@/components/shared/GradientBlob";
 import GradientBorderBox from "@/components/shared/GradientBorderBox";
 import InfiniteSlider from "@/components/shared/InfiniteSlider";
-import LinkButton from "@/components/shared/LinkButton";
 import BookOpenLinkButton from "@/components/shared/animated-icons/BookOpenLinkButton";
 import CobeSection from "./Cobe";
 import type { I18NPageProps } from "./Page";
@@ -43,15 +43,12 @@ export default function I18NPageSections({ data }: I18NPageProps) {
           </div>
           <div className="flex justify-between gap-4">
             {data.hero?.ctas?.[0] && (
-              <LinkButton
+              <AnalyticsLinkButton
                 key={data.hero?.ctas?.[0]._key}
-                intent="primary"
-                arrow
-                hideExternalIcon
                 href={data.hero?.ctas?.[0].link}
               >
                 {data.hero?.ctas?.[0].label}
-              </LinkButton>
+              </AnalyticsLinkButton>
             )}
             {data.hero?.ctas?.[1] && (
               <>