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 (
- {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 (
-
+
-
{key}
+
{param.replace(/^utm_/, '')}
({
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;
}, {});
}