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; }, {}); }