Refactor event tracking implementation

2 years ago · 4786265e04
parent 8badf383b2
commit 4786265e04
8 changed files with 127 additions and 57 deletions
--- a/src/components/Analytics/Analytics.astro
+++ b/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>
--- a/src/components/DownloadPopup.astro
+++ b/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>
--- a/src/components/Footer.astro
+++ b/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>
--- a/src/components/ResourcesAlert.astro
+++ b/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>
--- a/src/components/RoadmapHeader.astro
+++ b/src/components/RoadmapHeader.astro
@ -1,8 +1,8 @@
 ---
-import Icon from "./Icon.astro";
-import ResourcesAlert from "./ResourcesAlert.astro";
-import TopicSearch from "./TopicSearch/TopicSearch.astro";
-import YouTubeAlert from "./YouTubeAlert.astro";
+import Icon from './Icon.astro';
+import ResourcesAlert from './ResourcesAlert.astro';
+import TopicSearch from './TopicSearch/TopicSearch.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="py-5 sm:py-12 container relative">
+<div class='border-b'>
+  <div class='py-5 sm:py-12 container relative'>
    <YouTubeAlert />

-    <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">
+    <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'>
        {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 gap-1 sm:gap-2">
+    <div class='flex justify-between'>
+      <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">
-              &larr;<span class='hidden sm:inline'>&nbsp;All Roadmaps</span>
-            </a>
+              <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"
-                  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"
-                  onclick="window.fireEvent({ category: 'Subscription', action: 'Clicked Popup Opener', label: 'Download Roadmap 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'
+                  aria-label='Download Roadmap'
+                  ga-category='Subscription'
+                  ga-action='Clicked Popup Opener'
+                  ga-label='Download Roadmap Popup'
                >
-                  <Icon icon="download" />
-                  <span class="hidden sm:inline ml-2">Download</span>
+                  <Icon icon='download' />
+                  <span class='hidden sm:inline ml-2'>Download</span>
                </button>
              )}

              <button
-                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"
-                aria-label="Subscribe for Updates"
-                onclick="window.fireEvent({ category: 'Subscription', action: 'Clicked Popup Opener', label: 'Subscribe Roadmap 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'
+                aria-label='Subscribe for Updates'
+                ga-category='Subscription'
+                ga-action='Clicked Popup Opener'
+                ga-label='Subscribe Roadmap Popup'
              >
-                <Icon icon="email" />
-                <span class="ml-2">Subscribe</span>
+                <Icon icon='email' />
+                <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"
-              aria-label="Back to Visual Roadmap"
+              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'
            >
              &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"
-            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"
+            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'
+            aria-label='Suggest Changes'
          >
-            <Icon icon="comment" class="h-3 w-3" />
-            <span class="ml-2 hidden sm:inline">Suggest Changes</span>
-            <span class="ml-2 inline sm:hidden">Suggest</span>
+            <Icon icon='comment' class='h-3 w-3' />
+            <span class='ml-2 hidden sm:inline'>Suggest Changes</span>
+            <span class='ml-2 inline sm:hidden'>Suggest</span>
          </a>
        )
      }
--- a/src/components/Sponsor/Sponsor.astro
+++ b/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
--- a/src/components/SubscribePopup.astro
+++ b/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>
--- a/src/components/YouTubeBanner.astro
+++ b/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'>
-    <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">
-        <Icon icon="close" />
-    </button>
-</div>
+<div
+  class='sticky top-0 border-b border-b-yellow-300 z-10 flex h-[37px]'
+  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'
+  >
+    <Icon icon='close' />
+  </button>
+</div>