fix: GA setup for Register Now button

Author: theamankumarsingh

src/components/landing/CTAReg.tsx

@@ -5,6 +5,7 @@ import { Terminal, ArrowRight, Radio } from 'lucide-react';
 import Link from 'next/link';
 
 import animation from '@/src/animation';
+import { trackRegisterClick } from '@/src/utils/trackRegisterClick';
 
 const eventID = process.env.EVENT_ID || process.env.NEXT_PUBLIC_EVENT_ID;
 const data = require(`../../data/${eventID}/index.json`);
@@ -52,6 +53,14 @@ const LandingJoinMissionControl = ({ UTMSource }: { UTMSource?: string }) => {
           {/* Primary Action */}
           <a
             href={registerUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            onClick={(event) =>
+              trackRegisterClick(event, {
+                ctaLocation: UTMSource ? `cta_reg_${UTMSource}` : 'cta_reg',
+                url: registerUrl,
+              })
+            }
             className="group relative px-8 py-4 bg-sky-digital text-black font-bold font-heading text-lg tracking-wider uppercase overflow-hidden"
           >
             <div className="absolute inset-0 bg-white translate-y-full group-hover:translate-y-0 transition-transform duration-300"></div>

src/components/landing/Header.tsx

@@ -14,6 +14,7 @@ if (typeof window !== 'undefined') {
 import { AlertTriangle, Radio, Terminal, ChevronRight, Crosshair, Banknote, Users, ShieldCheck, Award, Zap } from 'lucide-react';
 
 import animations from '../../animation';
+import { trackRegisterClick } from '../../utils/trackRegisterClick';
 
 const eventID = process.env.EVENT_ID || process.env.NEXT_PUBLIC_EVENT_ID;
 const data = require(`../../data/${eventID}/index.json`);
@@ -356,8 +357,14 @@ const LandingHeader = () => {
                       <a
                         href="https://register.inctf.in"
                         target="_blank"
+                        rel="noopener noreferrer"
                         className="bg-red-950/40 hover:bg-red-600 text-alert-crimson hover:text-white font-mono text-sm sm:text-base font-bold tracking-wider px-9 py-3 sm:px-14 sm:py-3.5 rounded-md border-2 border-alert-crimson hover:border-red-600 shadow-[0_0_12px_rgba(244,63,94,0.3)] hover:shadow-[0_0_20px_rgba(244,63,94,0.6)] transition-all duration-300 flex items-center justify-center uppercase mt-1 register-btn opacity-70 hover:opacity-100"
-                        onClick={() => { if (typeof window !== 'undefined' && (window as any).gtag) (window as any).gtag('event', 'register_cta_click', { cta_location: 'countdown' }); }}
+                        onClick={(event) =>
+                          trackRegisterClick(event, {
+                            ctaLocation: 'countdown',
+                            url: 'https://register.inctf.in',
+                          })
+                        }
                       >
                         REGISTER NOW
                       </a>

src/components/shared/TopBar/MobileMenu.tsx

@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 import Link from 'next/link';
 
 import SocialMediaLinks from '../SocialMediaLinks';
+import { trackRegisterClick } from '../../../utils/trackRegisterClick';
 import { ChevronDown, ChevronUp, X } from 'lucide-react';
 
 const SideBarMenu = styled.div`
@@ -120,10 +121,15 @@ const MobileMenu = ({ onClose, config }) => {
         {cta && (
           <Link
             href={cta.link || '#'}
-            onClick={() => {
+            target="_blank"
+            rel="noopener noreferrer"
+            onClick={(event) => {
               onClose?.();
-              if (typeof window !== 'undefined' && (window as any).gtag) {
-                (window as any).gtag('event', 'register_cta_click', { cta_location: 'mobile_nav' });
+              if (cta.link) {
+                trackRegisterClick(event, {
+                  ctaLocation: 'mobile_nav',
+                  url: cta.link,
+                });
               }
             }}
             className="block w-full"

src/components/shared/TopBar/index.tsx

@@ -6,6 +6,7 @@ import Modal from 'react-modal';
 import { clearAllBodyScrollLocks } from 'body-scroll-lock';
 
 import Logo from '../Logo';
+import { trackRegisterClick } from '../../../utils/trackRegisterClick';
 
 import MobileMenu from './MobileMenu';
 import TopBarSearch from './search';
@@ -312,10 +313,11 @@ const TopBar = ({ UTMSource = null }) => {
                           <Link
                             href={topbarConfig?.CTA?.link}
                             target="_blank"
-                            onClick={() => {
-                              if (typeof window !== 'undefined' && (window as any).gtag) {
-                                (window as any).gtag('event', 'register_cta_click', { cta_location: 'top_bar' });
-                              }
+                            onClick={(event) => {
+                              trackRegisterClick(event, {
+                                ctaLocation: 'top_bar',
+                                url: topbarConfig?.CTA?.link,
+                              });
                             }}
                           >
                             <span className="px-6 py-2 rounded-none border border-alert-crimson bg-alert-crimson/10 text-alert-crimson font-bold font-tactical uppercase tracking-wider hover:bg-alert-crimson hover:text-white transition-all duration-300 ml-3 shadow-[0_0_10px_rgba(244,63,94,0.25)] hover:shadow-[0_0_25px_rgba(244,63,94,0.6)] cursor-pointer inline-flex items-center">
@@ -353,10 +355,11 @@ const TopBar = ({ UTMSource = null }) => {
                 href={topbarConfig.CTA.link}
                 target="_blank"
                 className="px-3 py-1 border border-alert-crimson bg-alert-crimson/10 text-alert-crimson font-bold uppercase tracking-wider text-xs rounded-none hover:bg-alert-crimson hover:text-white transition-all duration-300"
-                onClick={() => {
-                  if (typeof window !== 'undefined' && (window as any).gtag) {
-                    (window as any).gtag('event', 'register_cta_click', { cta_location: 'top_bar_mobile' });
-                  }
+                onClick={(event) => {
+                  trackRegisterClick(event, {
+                    ctaLocation: 'top_bar_mobile',
+                    url: topbarConfig.CTA.link,
+                  });
                 }}
               >
                 Register

src/utils/trackRegisterClick.ts

@@ -0,0 +1,57 @@
+import type { MouseEvent } from 'react';
+
+type RegisterClickOptions = {
+  ctaLocation: string;
+  url: string;
+  target?: '_blank' | '_self';
+};
+
+const NAVIGATION_FALLBACK_DELAY_MS = 500;
+
+export function trackRegisterClick(
+  event: MouseEvent<HTMLAnchorElement>,
+  { ctaLocation, url, target = '_blank' }: RegisterClickOptions,
+) {
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  const isModifiedClick = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button !== 0;
+  if (isModifiedClick) {
+    return;
+  }
+
+  const navigate = () => {
+    if (target === '_self') {
+      window.location.assign(url);
+      return;
+    }
+
+    window.open(url, '_blank', 'noopener,noreferrer');
+  };
+
+  if (typeof window.gtag !== 'function') {
+    return;
+  }
+
+  event.preventDefault();
+
+  let hasNavigated = false;
+
+  const navigateOnce = () => {
+    if (hasNavigated) {
+      return;
+    }
+
+    hasNavigated = true;
+    navigate();
+  };
+
+  window.gtag('event', 'register_cta_click', {
+    cta_location: ctaLocation,
+    transport_type: 'beacon',
+    event_callback: navigateOnce,
+  });
+
+  window.setTimeout(navigateOnce, NAVIGATION_FALLBACK_DELAY_MS);
+}