From fb3536c3521d1f4d267050344dfa8af211d36d36 Mon Sep 17 00:00:00 2001
From: Mike Cao <moocao@gmail.com>
Date: Wed, 20 Mar 2024 19:52:07 -0700
Subject: [PATCH] Fixed UTM calculation.

---
 src/app/(main)/reports/utm/UTMView.module.css |  2 +-
 src/app/(main)/reports/utm/UTMView.tsx        |  8 ++---
 src/lib/constants.ts                          |  2 +-
 src/queries/analytics/reports/getUTM.ts       | 35 +++++++++----------
 4 files changed, 22 insertions(+), 25 deletions(-)

diff --git a/src/app/(main)/reports/utm/UTMView.module.css b/src/app/(main)/reports/utm/UTMView.module.css
index 9792e0f3..fa7cc0b4 100644
--- a/src/app/(main)/reports/utm/UTMView.module.css
+++ b/src/app/(main)/reports/utm/UTMView.module.css
@@ -1,5 +1,5 @@
 .title {
-  font-size: 18px;
+  font-size: 24px;
   line-height: 36px;
   font-weight: 700;
 }
diff --git a/src/app/(main)/reports/utm/UTMView.tsx b/src/app/(main)/reports/utm/UTMView.tsx
index d44e9882..e59b60eb 100644
--- a/src/app/(main)/reports/utm/UTMView.tsx
+++ b/src/app/(main)/reports/utm/UTMView.tsx
@@ -26,8 +26,8 @@ export default function UTMView() {
 
   return (
     <div>
-      {UTM_PARAMS.map(key => {
-        const items = toArray(data[key]);
+      {UTM_PARAMS.map(param => {
+        const items = toArray(data[param]);
         const chartData = {
           labels: items.map(({ name }) => name),
           datasets: [
@@ -42,9 +42,9 @@ export default function UTMView() {
         }, 0);
 
         return (
-          <div key={key} className={styles.row}>
+          <div key={param} className={styles.row}>
             <div>
-              <div className={styles.title}>{key}</div>
+              <div className={styles.title}>{param.replace(/^utm_/, '')}</div>
               <ListTable
                 metric={formatMessage(labels.views)}
                 data={items.map(({ name, value }) => ({
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index 78e7a71e..6b042603 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -228,7 +228,7 @@ export const URL_LENGTH = 500;
 export const PAGE_TITLE_LENGTH = 500;
 export const EVENT_NAME_LENGTH = 50;
 
-export const UTM_PARAMS = ['source', 'medium', 'campaign', 'term', 'content'];
+export const UTM_PARAMS = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content'];
 
 export const DESKTOP_OS = [
   'BeOS',
diff --git a/src/queries/analytics/reports/getUTM.ts b/src/queries/analytics/reports/getUTM.ts
index 118caa23..01269926 100644
--- a/src/queries/analytics/reports/getUTM.ts
+++ b/src/queries/analytics/reports/getUTM.ts
@@ -92,29 +92,26 @@ async function clickhouseQuery(
   ).then(result => parseParameters(result as any[]));
 }
 
-function parseParameters(result: any[]) {
-  return Object.values(result).reduce((data, { url_query, num }) => {
-    const params = url_query.split('&').map(n => decodeURIComponent(n));
+function parseParameters(data: any[]) {
+  return data.reduce((obj, { url_query, num }) => {
+    try {
+      const searchParams = new URLSearchParams(url_query);
 
-    for (const param of params) {
-      const [key, value] = param.split('=');
-
-      const match = key.match(/^utm_(\w+)$/);
-
-      if (match) {
-        const group = match[1];
-        const name = decodeURIComponent(value);
-
-        if (!data[group]) {
-          data[group] = { [name]: +num };
-        } else if (!data[group][name]) {
-          data[group][name] = +num;
-        } else {
-          data[group][name] += +num;
+      for (const [key, value] of searchParams) {
+        if (key.match(/^utm_(\w+)$/)) {
+          if (!obj[key]) {
+            obj[key] = { [value]: +num };
+          } else if (!obj[key][value]) {
+            obj[key][value] = +num;
+          } else {
+            obj[key][value] += +num;
+          }
         }
       }
+    } catch {
+      // Ignore
     }
 
-    return data;
+    return obj;
   }, {});
 }