From ca7fe2bd6ac6749cbb318b0d32d6849cff206f6a Mon Sep 17 00:00:00 2001
From: Siamak <siamak@users.noreply.github.com>
Date: Fri, 31 Jan 2025 14:12:16 +0330
Subject: [PATCH] feat: add AnalyticsLinkButton for conversion tracking (#1469)

---
 .../components/shared/AnalyticsLinkButton.tsx | 33 +++++++++++++++++++
 .../templates/i18nPage/I18nPageContent.tsx    |  9 ++---
 2 files changed, 36 insertions(+), 6 deletions(-)
 create mode 100644 apps/frontend/components/shared/AnalyticsLinkButton.tsx

diff --git a/apps/frontend/components/shared/AnalyticsLinkButton.tsx b/apps/frontend/components/shared/AnalyticsLinkButton.tsx
new file mode 100644
index 000000000..98699ec1c
--- /dev/null
+++ 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
index e83f06510..90c862f8b 100644
--- 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] && (
               <>