From c935e2457edc7e59b2929a346d8492afda3fe1f4 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Wed, 19 Jun 2024 12:24:34 +0100
Subject: [PATCH] Add tracking of topic resource clicks

---
 src/components/TopicDetail/TopicDetail.tsx | 14 +++++++++++++-
 src/lib/browser.ts                         | 15 +++++++++++++++
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/src/components/TopicDetail/TopicDetail.tsx b/src/components/TopicDetail/TopicDetail.tsx
index 14bca6a5e..468bc1df1 100644
--- a/src/components/TopicDetail/TopicDetail.tsx
+++ b/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(
diff --git a/src/lib/browser.ts b/src/lib/browser.ts
index 202732226..425e27cc9 100644
--- a/src/lib/browser.ts
+++ b/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;