Refactor event tracking implementation

src/components/Analytics/Analytics.astro

@@ -2,7 +2,8 @@
 ---
 
 <script src='./analytics.js'></script>
-<script async src='https://www.googletagmanager.com/gtag/js?id=UA-139582634-1'></script>
+<script async src='https://www.googletagmanager.com/gtag/js?id=UA-139582634-1'
+></script>
 <script is:inline>
   // @ts-nocheck
   window.dataLayer = window.dataLayer || [];
@@ -12,4 +13,29 @@
   gtag('js', new Date());
 
   gtag('config', 'UA-139582634-1');
+
+  document.addEventListener('click', (e) => {
+    let trackEl = e.target;
+    if (!trackEl.getAttribute('ga-category')) {
+      trackEl = trackEl.closest('[ga-category]');
+    }
+
+    if (!trackEl) {
+      return;
+    }
+
+    const category = trackEl.getAttribute('ga-category');
+    const action = trackEl.getAttribute('ga-action');
+    const label = trackEl.getAttribute('ga-label');
+
+    if (!category) {
+      return;
+    }
+
+    window.fireEvent({
+      category,
+      action,
+      label,
+    });
+  });
 </script>

src/components/DownloadPopup.astro

@@ -34,9 +34,21 @@ import CaptchaFields from './Captcha/CaptchaFields.astro';
       type='submit'
       name='submit'
       class='text-white bg-gradient-to-r from-amber-700 to-blue-800 hover:from-amber-800 hover:to-blue-900 font-regular rounded-md text-md px-5 py-2.5 w-full text-center mr-2'
-      onclick="window.fireEvent({ category: 'Subscription', action: 'Submitted Popup Form', label: 'Download Roadmap Popup' })"
+      submit-download-form
     >
       Send Link
     </button>
   </form>
 </Popup>
+
+<script>
+  document
+    .querySelector('[submit-download-form]')
+    ?.addEventListener('click', () => {
+      window.fireEvent({
+        category: 'Subscription',
+        action: 'Submitted Popup Form',
+        label: 'Download Roadmap Popup',
+      });
+    });
+</script>

src/components/Footer.astro

@@ -84,23 +84,29 @@ import Icon from './Icon.astro';
         <div class='text-gray-400 text-sm'>
           <p>
             <a
-              href='https://thenewstack.io/category/devops/'
+              href='https://thenewstack.io/category/devops?utm_source=roadmap.sh&utm_medium=Referral&utm_campaign=Footer'
               target='_blank'
-              onclick="window.fireEvent({ category: 'PartnerClick', action: `TNS Referral`, label: `TNS Referral - Footer` })"
+              ga-category='PartnerClick'
+              ga-action='TNS Referral'
+              ga-label='TNS Referral - Footer'
               class='text-gray-400 hover:text-white'>DevOps</a
             >
             <span class='mx-1.5'>&middot;</span>
             <a
-              href='https://thenewstack.io/category/kubernetes/'
+              href='https://thenewstack.io/category/kubernetes?utm_source=roadmap.sh&utm_medium=Referral&utm_campaign=Footer'
               target='_blank'
-              onclick="window.fireEvent({ category: 'PartnerClick', action: `TNS Referral`, label: `TNS Referral - Footer` })"
+              ga-category='PartnerClick'
+              ga-action='TNS Referral'
+              ga-label='TNS Referral - Footer'
               class='text-gray-400 hover:text-white'>Kubernetes</a
             >
             <span class='mx-1.5'>&middot;</span>
             <a
-              href='https://thenewstack.io/category/cloud-native/'
+              href='https://thenewstack.io/category/cloud-native?utm_source=roadmap.sh&utm_medium=Referral&utm_campaign=Footer'
               target='_blank'
-              onclick="window.fireEvent({ category: 'PartnerClick', action: `TNS Referral`, label: `TNS Referral - Footer` })"
+              ga-category='PartnerClick'
+              ga-action='TNS Referral'
+              ga-label='TNS Referral - Footer'
               class='text-gray-400 hover:text-white'>Cloud-Native</a
             >
           </p>

src/components/ResourcesAlert.astro

@@ -29,10 +29,12 @@ const roadmapTitle =
         <p class='text-sm'>
           Get the latest {roadmapTitle} news from our sister site{' '}
           <a
-            href='https://thenewstack.io'
+            href='https://thenewstack.io?utm_source=roadmap.sh&utm_medium=Referral&utm_campaign=Alert'
             target='_blank'
             class='font-semibold underline'
-            onclick="window.fireEvent({ category: 'PartnerClick', action: `TNS Referral`, label: `TNS Referral - Roadmap` })"
+            ga-category='PartnerClick'
+            ga-action='TNS Referral'
+            ga-label='TNS Referral - Roadmap'
           >
             TheNewStack.io
           </a>

src/components/RoadmapHeader.astro

@@ -1,8 +1,8 @@
 ---
-import Icon from "./Icon.astro";
+import Icon from './Icon.astro';
-import ResourcesAlert from "./ResourcesAlert.astro";
+import ResourcesAlert from './ResourcesAlert.astro';
-import TopicSearch from "./TopicSearch/TopicSearch.astro";
+import TopicSearch from './TopicSearch/TopicSearch.astro';
-import YouTubeAlert from "./YouTubeAlert.astro";
+import YouTubeAlert from './YouTubeAlert.astro';
 
 export interface Props {
   title: string;
@@ -22,50 +22,57 @@ const {
   hasTopics = false,
 } = Astro.props;
 
-
 const isRoadmapReady = !isUpcoming;
 ---
 
-<div class="border-b">
+<div class='border-b'>
-  <div class="py-5 sm:py-12 container relative">
+  <div class='py-5 sm:py-12 container relative'>
     <YouTubeAlert />
 
-    <div class="mt-0 mb-3 sm:mb-6 sm:mt-4">
+    <div class='mt-0 mb-3 sm:mb-6 sm:mt-4'>
-      <h1 class="text-2xl sm:text-4xl mb-0.5 sm:mb-2 font-bold">
+      <h1 class='text-2xl sm:text-4xl mb-0.5 sm:mb-2 font-bold'>
         {title}
       </h1>
-      <p class="text-gray-500 text-sm sm:text-lg">{description}</p>
+      <p class='text-gray-500 text-sm sm:text-lg'>{description}</p>
     </div>
 
-    <div class="flex justify-between">
+    <div class='flex justify-between'>
-      <div class="flex gap-1 sm:gap-2">
+      <div class='flex gap-1 sm:gap-2'>
         {
           !hasSearch && (
             <>
-            <a href='/roadmaps/' class='bg-gray-500 py-1.5 px-3 rounded-md text-white text-xs sm:text-sm font-medium hover:bg-gray-600' aria-label="Back to All Roadmaps">
+              <a
+                href='/roadmaps/'
+                class='bg-gray-500 py-1.5 px-3 rounded-md text-white text-xs sm:text-sm font-medium hover:bg-gray-600'
+                aria-label='Back to All Roadmaps'
+              >
                 &larr;<span class='hidden sm:inline'>&nbsp;All Roadmaps</span>
               </a>
 
               {isRoadmapReady && (
                 <button
-                  data-popup="download-popup"
+                  data-popup='download-popup'
-                  class="inline-flex items-center justify-center bg-yellow-400 py-1.5 px-3 text-xs sm:text-sm font-medium rounded-md hover:bg-yellow-500"
+                  class='inline-flex items-center justify-center bg-yellow-400 py-1.5 px-3 text-xs sm:text-sm font-medium rounded-md hover:bg-yellow-500'
-                  aria-label="Download Roadmap"
+                  aria-label='Download Roadmap'
-                  onclick="window.fireEvent({ category: 'Subscription', action: 'Clicked Popup Opener', label: 'Download Roadmap Popup' })"
+                  ga-category='Subscription'
+                  ga-action='Clicked Popup Opener'
+                  ga-label='Download Roadmap Popup'
                 >
-                  <Icon icon="download" />
+                  <Icon icon='download' />
-                  <span class="hidden sm:inline ml-2">Download</span>
+                  <span class='hidden sm:inline ml-2'>Download</span>
                 </button>
               )}
 
               <button
-                data-popup="subscribe-popup"
+                data-popup='subscribe-popup'
-                class="inline-flex items-center justify-center bg-yellow-400 py-1.5 px-3 text-xs sm:text-sm font-medium rounded-md hover:bg-yellow-500"
+                class='inline-flex items-center justify-center bg-yellow-400 py-1.5 px-3 text-xs sm:text-sm font-medium rounded-md hover:bg-yellow-500'
-                aria-label="Subscribe for Updates"
+                aria-label='Subscribe for Updates'
-                onclick="window.fireEvent({ category: 'Subscription', action: 'Clicked Popup Opener', label: 'Subscribe Roadmap Popup' })"
+                ga-category='Subscription'
+                ga-action='Clicked Popup Opener'
+                ga-label='Subscribe Roadmap Popup'
               >
-                <Icon icon="email" />
+                <Icon icon='email' />
-                <span class="ml-2">Subscribe</span>
+                <span class='ml-2'>Subscribe</span>
               </button>
             </>
           )
@@ -75,11 +82,11 @@ const isRoadmapReady = !isUpcoming;
           hasSearch && (
             <a
               href={`/${roadmapId}/`}
-              class="bg-gray-500 py-1.5 px-3 rounded-md text-white text-xs sm:text-sm font-medium hover:bg-gray-600"
+              class='bg-gray-500 py-1.5 px-3 rounded-md text-white text-xs sm:text-sm font-medium hover:bg-gray-600'
-              aria-label="Back to Visual Roadmap"
+              aria-label='Back to Visual Roadmap'
             >
               &larr;
-              <span class="inline">&nbsp;Visual Roadmap</span>
+              <span class='inline'>&nbsp;Visual Roadmap</span>
             </a>
           )
         }
@@ -89,13 +96,13 @@ const isRoadmapReady = !isUpcoming;
         isRoadmapReady && (
           <a
             href={`https://github.com/kamranahmedse/developer-roadmap/issues/new?title=[Suggestion] ${title}`}
-            target="_blank"
+            target='_blank'
-            class="inline-flex items-center justify-center bg-gray-500 text-white py-1.5 px-3 text-xs sm:text-sm font-medium rounded-md hover:bg-gray-600"
+            class='inline-flex items-center justify-center bg-gray-500 text-white py-1.5 px-3 text-xs sm:text-sm font-medium rounded-md hover:bg-gray-600'
-            aria-label="Suggest Changes"
+            aria-label='Suggest Changes'
           >
-            <Icon icon="comment" class="h-3 w-3" />
+            <Icon icon='comment' class='h-3 w-3' />
-            <span class="ml-2 hidden sm:inline">Suggest Changes</span>
+            <span class='ml-2 hidden sm:inline'>Suggest Changes</span>
-            <span class="ml-2 inline sm:hidden">Suggest</span>
+            <span class='ml-2 inline sm:hidden'>Suggest</span>
           </a>
         )
       }

src/components/Sponsor/Sponsor.astro

@@ -26,7 +26,9 @@ const {
   id='sponsor-ad'
   target='_blank'
   rel='noopener sponsored'
-  onclick={event ? `window.fireEvent(${JSON.stringify(event)})` : ''}
+  ga-category={event?.category}
+  ga-action={event?.action}
+  ga-label={event?.label}
   class='fixed bottom-[15px] right-[20px] outline-transparent z-50 bg-white max-w-[330px] shadow-lg outline-0 hidden'
 >
   <button

src/components/SubscribePopup.astro

@@ -33,7 +33,9 @@ import CaptchaFields from './Captcha/CaptchaFields.astro';
       type='submit'
       name='submit'
       class='text-white bg-gradient-to-r from-amber-700 to-blue-800 hover:from-amber-800 hover:to-blue-900 font-regular rounded-md text-md px-5 py-2.5 w-full text-center mr-2'
-      onclick="window.fireEvent({ category: 'Subscription', action: 'Submitted Popup Form', label: 'Subscribe Roadmap Popup' })"
+      ga-category='Subscription'
+      ga-action='Submitted Popup Form'
+      ga-label='Subscribe Roadmap Popup'
     >
       Subscribe
     </button>

src/components/YouTubeBanner.astro

@@ -1,12 +1,25 @@
 ---
-import Icon from "./Icon.astro";
+import Icon from './Icon.astro';
 ---
 
-<div class='sticky top-0 border-b border-b-yellow-300 z-10 flex h-[37px]' id='sticky-youtube-banner'>
+<div
-    <a href='https://youtube.com/theroadmap?sub_confirmation=1' target='_blank' class='flex bg-yellow-200 text-center flex-1 items-center justify-center text-sm hover:bg-yellow-300 outline-0 '>
+  class='sticky top-0 border-b border-b-yellow-300 z-10 flex h-[37px]'
-        <Icon icon="youtube" class="mr-2" /> We now have a YouTube Channel.&nbsp;<span class='hidden sm:inline'>Subscribe for the video content.</span>
+  id='sticky-youtube-banner'
+>
+  <a
+    href='https://youtube.com/theroadmap?sub_confirmation=1'
+    target='_blank'
+    class='flex bg-yellow-200 text-center flex-1 items-center justify-center text-sm hover:bg-yellow-300 outline-0'
+  >
+    <Icon icon='youtube' class='mr-2' /> We now have a YouTube Channel.&nbsp;<span
+      class='hidden sm:inline'>Subscribe for the video content.</span
+    >
   </a>
-    <button class='text-yellow-500 bg-yellow-200 hover:text-yellow-900 hover:bg-yellow-400 outline-0 px-2' onclick='this.parentElement.classList.add("hidden")' aria-label="Close">
+  <button
-        <Icon icon="close" />
+    class='text-yellow-500 bg-yellow-200 hover:text-yellow-900 hover:bg-yellow-400 outline-0 px-2'
+    onclick='this.parentElement.classList.add("hidden")'
+    aria-label='Close'
+  >
+    <Icon icon='close' />
   </button>
 </div>