added tag conversion

src/components/CallNowDialog.tsx

@@ -1,11 +1,11 @@
-import React from "react";
-import { cn } from "@/lib/utils";
 import {
-    getPhoneNumber,
     getContactLink,
+    getPhoneNumber,
     TRANSITION_ALL,
 } from "@/lib/constants";
+import { cn } from "@/lib/utils";
 import { PhoneCall } from "lucide-react";
+import React from "react";
 import Title from "./atoms/title";
 
 interface CallNowDialogProps {
@@ -21,6 +21,13 @@ function CallNowDialog({ page }: CallNowDialogProps) {
         setOpen(true);
     }, []);
 
+    const handleClick = () => {
+        // @ts-ignore
+        if (typeof gtag_report_conversion === "function") {
+            gtag_report_conversion();
+        }
+    };
+
     return open ? (
         <div
             className={cn(
@@ -38,6 +45,7 @@ function CallNowDialog({ page }: CallNowDialogProps) {
                         "flex items-center gap-4 rounded-full bg-lime-700 px-8 py-6 text-lime-50",
                     )}
                     href={contactLink}
+                    onClick={handleClick}
                 >
                     <PhoneCall className="h-8 w-auto" />
                     <p className="text-xl font-semibold">{phoneNumber}</p>

src/components/HeroSection.astro

@@ -43,7 +43,10 @@ import MaxWidthWrapper from "./other/max.width.wrapper";
                     />
                 </div>
                 <div class="flex flex-col sm:flex-row gap-4">
-                    <a href={CONTACT_LINK}>
+                    <a
+                        href={CONTACT_LINK}
+                        onclick="if (typeof gtag_report_conversion === 'function') { gtag_report_conversion(); }"
+                    >
                         <Button
                             size={"lg"}
                             className="w-full sm:w-max"

src/components/Partners.tsx

@@ -1,12 +1,20 @@
 import { contactLinks } from "@/lib/constants";
 
 function Partners() {
+    const handleClick = () => {
+        // @ts-ignore
+        if (typeof gtag_report_conversion === "function") {
+            gtag_report_conversion();
+        }
+    };
+
     return (
         <div className="flex w-full flex-col items-center justify-center gap-8 rounded-xl p-8 md:flex-row md:flex-wrap md:justify-around">
             <a
                 href={contactLinks.spectrum}
                 data-aos="zoom-in-left"
                 data-aos-duration="500"
+                onClick={handleClick}
             >
                 <img
                     src={"/assets/spectrum.png"}
@@ -18,6 +26,7 @@ function Partners() {
                 href={contactLinks.optimum}
                 data-aos="zoom-in"
                 data-aos-duration="500"
+                onClick={handleClick}
             >
                 <img
                     src={"/assets/optimum.png"}

src/components/molecules/CallButton.tsx

@@ -20,8 +20,15 @@ export default function CallButton({
     rounded,
     page,
 }: CallButtonProps) {
+    const handleClick = () => {
+        // @ts-ignore
+        if (typeof gtag_report_conversion === "function") {
+            gtag_report_conversion();
+        }
+    };
+
     return (
-        <a href={getContactLink(page)}>
+        <a href={getContactLink(page)} onClick={handleClick}>
             <Button
                 size="lg"
                 variant={variant}

src/components/molecules/footer.astro

@@ -42,6 +42,7 @@ const contactLink = getContactLink(page);
                             <a
                                 href={contactLink}
                                 class="text-blue-50 hover:text-blue-100"
+                                onclick="if (typeof gtag_report_conversion === 'function') { gtag_report_conversion(); }"
                             >
                                 {phoneNumber}
                             </a>

src/components/molecules/navbar.tsx

@@ -107,7 +107,17 @@ function Navbar({
                             </li>
                         ))}
 
-                        <a href={getContactLink(page)}>
+                        <a
+                            href={getContactLink(page)}
+                            onClick={() => {
+                                // @ts-ignore
+                                if (
+                                    typeof gtag_report_conversion === "function"
+                                ) {
+                                    gtag_report_conversion();
+                                }
+                            }}
+                        >
                             <Button
                                 variant={variant}
                                 className="w-full"

src/pages/index.astro

@@ -45,6 +45,23 @@ const page = "default";
             window.gtag("config", "AW-17772291743");
         </script>
 
+        <script is:inline>
+            window.gtag_report_conversion = function (url) {
+                var callback = function () {
+                    if (typeof url != "undefined") {
+                        window.location = url;
+                    }
+                };
+                gtag("event", "conversion", {
+                    send_to: "AW-17772291743/bFAiCOHr3eYbEJ_NvppC",
+                    value: 1.0,
+                    currency: "USD",
+                    event_callback: callback,
+                });
+                return false;
+            };
+        </script>
+
         <meta charset="utf-8" />
         <meta
             name="viewport"