Add tracking of topic resource clicks

src/components/TopicDetail/TopicDetail.tsx

@@ -24,7 +24,7 @@ import type {
 import { markdownToHtml, sanitizeMarkdown } from '../../lib/markdown';
 import { cn } from '../../lib/classname';
 import { Ban, FileText, HeartHandshake, X } from 'lucide-react';
-import { getUrlParams } from '../../lib/browser';
+import { getUrlParams, parseUrl } from '../../lib/browser';
 import { Spinner } from '../ReactIcons/Spinner';
 import { GitHubIcon } from '../ReactIcons/GitHubIcon.tsx';
 import { GoogleIcon } from '../ReactIcons/GoogleIcon.tsx';
@@ -381,6 +381,18 @@ export function TopicDetail(props: TopicDetailProps) {
                           href={link.url}
                           target="_blank"
                           className="group font-medium text-gray-800 underline underline-offset-1 hover:text-black"
+                          onClick={() => {
+                            // if it is one of our roadmaps, we want to track the click
+                            if (canSubmitContribution) {
+                              const parsedUrl = parseUrl(link.url);
+
+                              window.fireEvent({
+                                category: 'TopicResourceClick',
+                                action: `Click: ${parsedUrl.hostname}`,
+                                label: `${resourceType} / ${resourceId} / ${topicId} / ${link.url}`,
+                              });
+                            }
+                          }}
                         >
                           <span
                             className={cn(

src/lib/browser.ts

@@ -12,6 +12,21 @@ export function getUrlParams() {
   return paramsObj;
 }
 
+export function parseUrl(url: string) {
+  const parser = document.createElement('a');
+  parser.href = url;
+
+  return {
+    protocol: parser.protocol,
+    hostname: parser.hostname,
+    port: parser.port,
+    pathname: parser.pathname,
+    search: parser.search,
+    hash: parser.hash,
+    host: parser.host,
+  };
+}
+
 export function deleteUrlParam(key: string) {
   if (typeof window === 'undefined') {
     return;