feat: add event tracker

src/modules/homepage/components/BuyACoffee.tsx

@@ -20,6 +20,7 @@ const BuyACoffee: React.FC = () => {
           <button
             className="flex justify-center border border-solid w-full px-5 py-3 rounded-xl hover:border-gray-400"
             onClick={handleShowQris}
+            data-umami-event="Click : QRIS"
           >
             <Image
               src="/images/qris-logo.webp"
@@ -37,6 +38,7 @@ const BuyACoffee: React.FC = () => {
               alt="Bank Transfer"
               width={150}
               height={80}
+              data-umami-event="Click : Bank Transfer"
             />
           </Link>
           {/* <PaymentMethodButton

src/modules/homepage/components/Contact.tsx

@@ -35,6 +35,7 @@ const Contact = () => {
           <div
             className="hover:underline text-neutral-800 text-lg md:text-lg cursor-pointer"
             onClick={() => handleEmailClick("aulianza.dev@gmail.com")}
+            data-umami-event="Click : Email"
           >
             {copiedEmail ? "Copied!" : "aulianza.dev@gmail.com"}
           </div>

src/modules/homepage/components/LinkItem.tsx

@@ -19,12 +19,14 @@ const LinkItem = ({
   onClick,
 }: LinkItemProps) => {
   return (
-    <button
+    <a
       onClick={() => onClick(href, target)}
-      className="relative inline-flex items-center justify-start py-4 pl-4 pr-14 overflow-hidden font-medium text-neutral-800 transition-all duration-150 ease-in-out rounded-lg hover:pl-12 hover:pr-6 bg-white group border shadow-sm"
+      className="relative inline-flex items-center justify-start py-4 pl-4 pr-14 overflow-hidden font-medium text-neutral-800 transition-all duration-150 ease-in-out rounded-lg hover:pl-12 hover:pr-6 bg-white group border shadow-sm cursor-pointer"
       data-aos="fade-down"
       data-aos-duration="1000"
       data-aos-delay={index * 100}
+      data-umami-event={`Click Link : ${label}`}
+      href="javascript:;"
     >
       <span
         className={clsx(
@@ -70,7 +72,7 @@ const LinkItem = ({
           {label}
         </span>
       </div>
-    </button>
+    </a>
   );
 };
 

src/modules/homepage/components/PaymentMethodButton.tsx

@@ -13,7 +13,12 @@ const PaymentMethodButton: React.FC<PaymentMethodButtonProps> = ({
   imageSrc,
   altText,
 }) => (
-  <Link href={href} target="_blank" className="w-full">
+  <Link
+    href={href}
+    target="_blank"
+    className="w-full"
+    data-umami-event={`Click : ${altText}`}
+  >
     <button className="flex justify-center border border-solid w-full px-5 py-3 rounded-xl hover:border-gray-400">
       <Image src={imageSrc} alt={altText} width={90} height={40} />
     </button>

src/modules/homepage/components/Socials.tsx

@@ -26,6 +26,7 @@ const Socials = () => {
             data-aos-duration="1000"
             data-aos-delay={index * 100}
             title={item?.title}
+            data-umami-event={`Click Socials: ${item?.title}`}
           >
             {item?.icon}
           </a>

src/modules/payment/components/AccountCard.tsx

@@ -71,6 +71,7 @@ const AccountCard = ({
             <div
               className="flex items-center gap-1 cursor-pointer text-xs border py-1 px-1.5 rounded-full border-neutral-300 group-hover:border-white"
               onClick={handleCopy}
+              data-umami-event={`Copy : Account Number ${bank}`}
             >
               <CopyIcon size={14} />
               <span>Copy</span>