Add ga events tracking

src/components/Analytics/Analytics.astro

@@ -2,9 +2,8 @@
 ---
 
 <script src='./analytics.js'></script>
-<script async src='https://www.googletagmanager.com/gtag/js?id=UA-139582634-1'
-></script>
-<script>
+<script async src='https://www.googletagmanager.com/gtag/js?id=UA-139582634-1'></script>
+<script is:inline>
   // @ts-nocheck
   window.dataLayer = window.dataLayer || [];
   function gtag() {

src/components/Analytics/analytics.ts

@@ -3,29 +3,11 @@ export {};
 declare global {
   interface Window {
     gtag: any;
-    fireEvent: (props: EventType) => void;
-    firePageView: (url: string) => void;
+    fireEvent: (props: GAEventType) => void;
   }
 }
 
-/**
- * Tracks the page view on google analytics
- * @see https://developers.google.com/analytics/devguides/collection/gtagjs/pages
- * @param url URL to track
- * @returns void
- */
-window.firePageView = (url: string) => {
-  if (!window.gtag) {
-    console.warn('Missing GTAG - Analytics disabled');
-    return;
-  }
-
-  window.gtag('config', 'UA-139582634-1', {
-    page_path: url,
-  });
-};
-
-type EventType = {
+export type GAEventType = {
   action: string;
   category: string;
   label?: string;
@@ -38,7 +20,7 @@ type EventType = {
  * @param props Event properties
  * @returns void
  */
-window.fireEvent = (props: EventType) => {
+window.fireEvent = (props: GAEventType) => {
   const { action, category, label, value } = props;
   if (!window.gtag) {
     console.warn('Missing GTAG - Analytics disabled');

src/components/Footer.astro

@@ -86,18 +86,21 @@ import Icon from './Icon.astro';
             <a
               href='https://thenewstack.io/category/devops/'
               target='_blank'
+              onclick="window.fireEvent({ category: 'PartnerClick', action: `TNS Referral`, 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/'
               target='_blank'
+              onclick="window.fireEvent({ category: 'PartnerClick', action: `TNS Referral`, 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/'
               target='_blank'
+              onclick="window.fireEvent({ category: 'PartnerClick', action: `TNS Referral`, label: `TNS Referral - Footer` })"
               class='text-gray-400 hover:text-white'>Cloud-Native</a
             >
           </p>

src/components/Sponsor/Sponsor.astro

@@ -1,9 +1,12 @@
 ---
+import type { GAEventType } from '../Analytics/analytics';
+
 export type SponsorType = {
   url: string;
   title: string;
   imageUrl: string;
   description: string;
+  event: GAEventType;
 };
 
 export interface Props {
@@ -11,24 +14,21 @@ export interface Props {
 }
 
 const {
-  sponsor: { title, url, description, imageUrl },
+  sponsor: { title, url, description, imageUrl, event },
 } = Astro.props;
 ---
 
-<script src="./sponsor.js" />
+<script src='./sponsor.js'></script>
 
 <a
   href={url}
   id='sponsor-ad'
   target='_blank'
   rel='noopener sponsored'
+  onclick={event ? `window.fireEvent(${JSON.stringify(event)})` : ''}
   class='fixed bottom-[15px] right-[20px] outline-transparent z-50 bg-white max-w-[330px] shadow-lg outline-0 hidden'
 >
-  <img
-    src={ imageUrl }
-    class='w-[100px] lg:w-[130px]'
-    alt='Sponsor Banner'
-  />
+  <img src={imageUrl} class='w-[100px] lg:w-[130px]' alt='Sponsor Banner' />
   <span class='text-sm flex flex-col justify-between'>
     <span class='p-[10px]'>
       <span class='font-semibold mb-0.5 block'>{title}</span>

src/lib/roadmap.ts

@@ -1,5 +1,5 @@
 import type { MarkdownFileType } from './file';
-import type { SponsorType } from '../components/Sponsor.astro';
+import type { SponsorType } from '../components/Sponsor/Sponsor.astro';
 
 export interface RoadmapFrontmatter {
   jsonUrl: string;

src/roadmaps/devops/devops.md

@@ -12,6 +12,10 @@ sponsor:
   imageUrl: "https://i.imgur.com/uNJWl4L.png"
   title: "Free Kubernetes eBook"
   description: "Learn how to manage and optimize Kubernetes resources with this free eBook."
+  event:
+    category: "SponsorClick"
+    action: "Ambassador EBook Redirect"
+    label: "Clicked Ambassador EBook Link"
 dimensions:
   width: 968
   height: 2527.46