Add event tracking for topic load

src/components/Analytics/analytics.ts

@@ -2,6 +2,8 @@ export {};
 
 declare global {
   interface Window {
+    // To selectively enable/disable debug logs
+    __DEBUG__: boolean;
     gtag: any;
     fireEvent: (props: GAEventType) => void;
   }
@@ -27,6 +29,10 @@ window.fireEvent = (props: GAEventType) => {
     return;
   }
 
+  if (window.__DEBUG__) {
+    console.log('Analytics event fired', props);
+  }
+
   window.gtag('event', action, {
     event_category: category,
     event_label: label,

src/components/TopicOverlay/topic.js

@@ -177,7 +177,16 @@ export class Topic {
     this.activeTopicId = topicId;
 
     this.resetDOM();
-    this.renderTopicFromUrl(`/best-practices/${bestPracticeId}/${topicId.replaceAll(':', '/')}`);
+
+    const topicUrl = `/best-practices/${bestPracticeId}/${topicId.replaceAll(':', '/')}`;
+
+    window.fireEvent({
+      category: `BestPracticesClick`,
+      action: `Load Topic`,
+      label: topicUrl,
+    });
+
+    this.renderTopicFromUrl(topicUrl).then(() => null);
   }
 
   handleRoadmapTopicClick(e) {
@@ -192,7 +201,15 @@ export class Topic {
     this.activeTopicId = topicId;
 
     this.resetDOM();
-    this.renderTopicFromUrl(`/${roadmapId}/${topicId.replaceAll(':', '/')}`);
+    const topicUrl = `/${roadmapId}/${topicId.replaceAll(':', '/')}`;
+
+    window.fireEvent({
+      category: `RoadmapClick`,
+      action: `Load Topic`,
+      label: topicUrl,
+    });
+
+    this.renderTopicFromUrl(topicUrl).then(() => null);
   }
 
   querySvgElementsByTopicId(topicId) {