feat: implement new tracker

.env.example

@@ -1,2 +1,3 @@
 SUPABASE_URL=
 SUPABASE_ANON_KEY=
+WORKER_URL=

build/esbuild-build.ts

@@ -25,7 +25,7 @@ export const esBuildContext: esbuild.BuildOptions = {
     ".json": "dataurl",
   },
   outdir: "static/dist",
-  define: createEnvDefines(["SUPABASE_URL", "SUPABASE_ANON_KEY"], {
+  define: createEnvDefines(["SUPABASE_URL", "SUPABASE_ANON_KEY", "WORKER_URL"], {
     SUPABASE_STORAGE_KEY: generateSupabaseStorageKey(),
     GIT_REVISION: execSync(`git rev-parse --short HEAD`).toString().trim(),
     NODE_ENV: process.env.NODE_ENV || "development",

src/home/authentication.ts

@@ -1,4 +1,4 @@
-import { trackDevRelReferral } from "./devrel-tracker";
+import { trackDevRelReferral } from "./tracking/devrel-tracker";
 import { getGitHubAccessToken } from "./getters/get-github-access-token";
 import { getGitHubUser } from "./getters/get-github-user";
 import { GitHubUser } from "./github-types";
@@ -13,7 +13,7 @@ export async function authentication() {
 
   const gitHubUser: null | GitHubUser = await getGitHubUser();
   if (gitHubUser) {
-    trackDevRelReferral(gitHubUser.login + "|" + gitHubUser.id);
+    await trackDevRelReferral(gitHubUser.id);
     await displayGitHubUserInformation(gitHubUser);
   }
 }

src/home/getters/get-github-referrals.ts

@@ -0,0 +1,36 @@
+declare const WORKER_URL: string; // @DEV: passed in at build time check build/esbuild-build.ts
+
+export async function getReferralFromUser(devGitHubId: number): Promise<string | null> {
+    const url = `${WORKER_URL}/get?key=${encodeURIComponent(devGitHubId)}`;
+
+    const response = await fetch(url, {
+        method: 'GET',
+    });
+
+    if (response.status === 200) {
+      const referralId = await response.text();
+      return referralId;
+    } else if (response.status == 404) {
+      // No referral id found for devGitHubId
+      return null;
+    } else {
+      console.error(`Failed to get key: '${devGitHubId}'. Status: ${response.status}`);
+      return null;
+    }
+}
+
+export async function getListOfReferrals(): Promise<any> {
+  const url = `${WORKER_URL}/list`;
+
+  const response = await fetch(url, {
+      method: 'GET',
+  });
+
+  if (response.status === 200) {
+    const data = await response.json();
+    return data; // return JSON file of pairs {key, value}
+  } else {
+    console.error(`Failed to fetch list. Status: ${response.status}`);
+    return null;
+  }
+}

src/home/home.ts

@@ -1,6 +1,6 @@
 import { grid } from "../the-grid";
 import { authentication } from "./authentication";
-import { initiateDevRelTracking } from "./devrel-tracker";
+import { initiateDevRelTracking } from "./tracking/devrel-tracker";
 import { displayGitHubIssues } from "./fetch-github/fetch-and-display-previews";
 import { readyToolbar } from "./ready-toolbar";
 import { registerServiceWorker } from "./register-service-worker";

src/home/tracking/cloudflare-tracking-worker.js

@@ -0,0 +1,53 @@
+addEventListener('fetch', event => {
+	event.respondWith(handleRequest(event.request));
+});
+
+const corsHeaders = {
+	"Access-Control-Allow-Origin": "*",
+};
+
+async function handleRequest(request) {
+	const url = new URL(request.url);
+
+	if (url.pathname === '/set') {
+			const key = url.searchParams.get('key');
+			const value = url.searchParams.get('value');
+
+			if(key && value) {
+				await userToReferral.put(key, value);
+
+				return new Response(`Key '${key}' added with value '${value}'`, { headers: corsHeaders, status: 200 });
+			} else {
+				return new Response('Missing key or value in query params', { headers: corsHeaders, status: 400 });
+			}
+	}
+
+	if (url.pathname === '/get') {
+			const key = url.searchParams.get('key');
+
+			if (key) {
+				const value = await userToReferral.get(key);
+
+				return value ? 
+					new Response(`Value for '${key}': ${value}`, { headers: corsHeaders, status: 200 }) : 
+					new Response(`No value found for '${key}'`, { headers: corsHeaders, status: 404 });
+			} else {
+				return new Response('Missing key in query params', { headers: corsHeaders, status: 400 });
+			}
+	}
+
+	if (url.pathname == '/list') {
+			const keys = await userToReferral.list(); // get at max 1000 keys
+			const keyValuePairs = {};
+
+			for (const key of keys.keys) {
+				const value = await userToReferral.get(key.name);
+				keyValuePairs[key.name] = value; 
+			}
+
+			return new Response(JSON.stringify(keyValuePairs, null, 2), {
+				headers: {...corsHeaders, 'Content-Type': 'application/json' },
+			});
+	}
+	return new Response('Not Found', { headers: corsHeaders, status: 404 });
+}

src/home/tracking/devrel-tracker.ts

@@ -0,0 +1,31 @@
+declare const WORKER_URL: string; // @DEV: passed in at build time check build/esbuild-build.ts
+
+export function initiateDevRelTracking() {
+  const oldDevRelCode = localStorage.getItem("devRel");
+  if (!oldDevRelCode) {
+    const urlParams = new URLSearchParams(window.location.search);
+    const devRelCode = urlParams.get("ref");
+    if (devRelCode) {
+      localStorage.setItem("devRel", devRelCode);
+    }
+  }
+}
+
+export async function trackDevRelReferral(devGitHubId: number) {
+  const devRelCode = localStorage.getItem("devRel");
+
+  // key: user_id (devGitHubId), value: referral_id (devRelCode)
+  if (devRelCode && devRelCode != "done") {
+    const url = `${WORKER_URL}/set?key=${encodeURIComponent(devGitHubId)}&value=${encodeURIComponent(devRelCode)}`;
+
+    const response = await fetch(url, {
+        method: 'POST',
+    });
+
+    if (response.status === 200) {
+      localStorage.setItem("devRel", "done");
+    } else {
+      console.error(`Failed to set referral. Status: ${response.status}`);
+    }
+  }
+}

static/index.html

@@ -4,18 +4,6 @@
     <meta charset="UTF-8" />
     <title>DevPool Directory | Ubiquity DAO</title>
 
-    <!-- Google tag (gtag.js) -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-VZLJ61H1YM"></script>
-    <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag() {
-        dataLayer.push(arguments);
-      }
-      gtag("js", new Date());
-
-      gtag("config", "G-VZLJ61H1YM");
-    </script>
-
     <link rel="stylesheet" href="style/style.css" />
     <link rel="stylesheet" href="style/inverted-style.css" />
     <link rel="stylesheet" href="style/special.css" />