diff --git a/components/metrics/MetricsTable.js b/components/metrics/MetricsTable.js
index 29121487..df4beb08 100644
--- a/components/metrics/MetricsTable.js
+++ b/components/metrics/MetricsTable.js
@@ -22,6 +22,7 @@ export default function MetricsTable({
filterOptions,
limit,
onDataLoad,
+ delay = null,
...props
}) {
const [{ startDate, endDate, modified }] = useDateRange(websiteId);
@@ -46,9 +47,9 @@ export default function MetricsTable({
country,
},
onDataLoad,
- delay: DEFAULT_ANIMATION_DURATION,
+ delay: delay || DEFAULT_ANIMATION_DURATION,
},
- [modified, url, referrer, os, browser, device, country],
+ [type, modified, url, referrer, os, browser, device, country],
);
const filteredData = useMemo(() => {
diff --git a/components/metrics/UTMTable.js b/components/metrics/UTMTable.js
new file mode 100644
index 00000000..dc9cca92
--- /dev/null
+++ b/components/metrics/UTMTable.js
@@ -0,0 +1,48 @@
+import React, { useState } from 'react';
+import { useIntl, defineMessages } from 'react-intl';
+import MetricsTable from './MetricsTable';
+import FilterButtons from 'components/common/FilterButtons';
+
+export const UTM_SOURCE = 'utm_source';
+export const UTM_MEDIUM = 'utm_medium';
+export const UTM_CAMPAIGN = 'utm_campaign';
+export const UTM_CONTENT = 'utm_content';
+export const UTM_TERM = 'utm_term';
+
+const messages = defineMessages({
+ utm_source: { id: 'metrics.utm_source', defaultMessage: 'UTM Source' },
+ utm_medium: { id: 'metrics.utm_medium', defaultMessage: 'UTM Medium' },
+ utm_campaign: { id: 'metrics.utm_campaign', defaultMessage: 'UTM Campaign' },
+ utm_content: { id: 'metrics.utm_content', defaultMessage: 'UTM Content' },
+ utm_term: { id: 'metrics.utm_term', defaultMessage: 'UTM Term' },
+ views: { id: 'metrics.views', defaultMessage: 'Views' },
+ none: { id: 'label.none', defaultMessage: 'None' },
+});
+
+export default function UTMTable({ websiteId, showFilters, ...props }) {
+ const [type, setType] = useState(UTM_SOURCE);
+ const { formatMessage } = useIntl();
+
+ const buttons = [
+ { label: formatMessage(messages.utm_source), value: UTM_SOURCE },
+ { label: formatMessage(messages.utm_medium), value: UTM_MEDIUM },
+ { label: formatMessage(messages.utm_campaign), value: UTM_CAMPAIGN },
+ { label: formatMessage(messages.utm_content), value: UTM_CONTENT },
+ { label: formatMessage(messages.utm_term), value: UTM_TERM },
+ ];
+
+ return (
+ <>
+ {showFilters && }
+
+ >
+ );
+}
diff --git a/components/pages/WebsiteDetails.js b/components/pages/WebsiteDetails.js
index 1b22d9ed..869b7a85 100644
--- a/components/pages/WebsiteDetails.js
+++ b/components/pages/WebsiteDetails.js
@@ -23,6 +23,7 @@ import usePageQuery from 'hooks/usePageQuery';
import { DEFAULT_ANIMATION_DURATION } from 'lib/constants';
import styles from './WebsiteDetails.module.css';
import ScreenTable from 'components/metrics/ScreenTable';
+import UTMTable from 'components/metrics/UTMTable';
const views = {
url: PagesTable,
@@ -34,6 +35,7 @@ const views = {
country: CountriesTable,
language: LanguagesTable,
event: EventsTable,
+ utm: UTMTable,
};
export default function WebsiteDetails({ websiteId }) {
@@ -94,6 +96,10 @@ export default function WebsiteDetails({ websiteId }) {
label: ,
value: resolve({ view: 'event' }),
},
+ {
+ label: ,
+ value: resolve({ view: 'utm' }),
+ },
];
const tableProps = {
diff --git a/lang/en-US.json b/lang/en-US.json
index 1580b500..c63d56a0 100644
--- a/lang/en-US.json
+++ b/lang/en-US.json
@@ -106,6 +106,12 @@
"metrics.referrers": "Referrers",
"metrics.screens": "Screens",
"metrics.unique-visitors": "Unique visitors",
+ "metrics.utm": "UTM",
+ "metrics.utm_source": "UTM Source",
+ "metrics.utm_medium": "UTM Medium",
+ "metrics.utm_campaign": "UTM Campaign",
+ "metrics.utm_content": "UTM Content",
+ "metrics.utm_term": "UTM Term",
"metrics.views": "Views",
"metrics.visitors": "Visitors"
}