From f33ae8229819e324097bc9cb43c68e7f7dbdc34d Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Wed, 4 Jan 2023 00:13:33 +0400
Subject: [PATCH] Add ga events tracking

---
 src/components/Analytics/Analytics.astro |  5 ++---
 src/components/Analytics/analytics.ts    | 24 +++---------------------
 src/components/Footer.astro              |  3 +++
 src/components/Sponsor/Sponsor.astro     | 14 +++++++-------
 src/lib/roadmap.ts                       |  2 +-
 src/roadmaps/devops/devops.md            |  4 ++++
 6 files changed, 20 insertions(+), 32 deletions(-)

diff --git a/src/components/Analytics/Analytics.astro b/src/components/Analytics/Analytics.astro
index 883a42c0e..cb8d627b9 100644
--- a/src/components/Analytics/Analytics.astro
+++ b/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() {
diff --git a/src/components/Analytics/analytics.ts b/src/components/Analytics/analytics.ts
index 375d6b17d..b103a1937 100644
--- a/src/components/Analytics/analytics.ts
+++ b/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');
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 5a778a3ff..b230df20c 100644
--- a/src/components/Footer.astro
+++ b/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>
diff --git a/src/components/Sponsor/Sponsor.astro b/src/components/Sponsor/Sponsor.astro
index c685224cc..9905eadd0 100644
--- a/src/components/Sponsor/Sponsor.astro
+++ b/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>
diff --git a/src/lib/roadmap.ts b/src/lib/roadmap.ts
index fd8610b67..eb4030fdc 100644
--- a/src/lib/roadmap.ts
+++ b/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;
diff --git a/src/roadmaps/devops/devops.md b/src/roadmaps/devops/devops.md
index fdef6646a..41f79fea9 100644
--- a/src/roadmaps/devops/devops.md
+++ b/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