Add UTM params to website details page

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(() => {

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 && <FilterButtons buttons={buttons} selected={type} onClick={setType} />}
+      <MetricsTable
+        {...props}
+        title={formatMessage(messages[type])}
+        type={type}
+        metric={formatMessage(messages.views)}
+        websiteId={websiteId}
+        updateOnTypeChange
+        delay={0}
+      />
+    </>
+  );
+}

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: <FormattedMessage id="metrics.events" defaultMessage="Events" />,
       value: resolve({ view: 'event' }),
     },
+    {
+      label: <FormattedMessage id="metrics.utm" defaultMessage="UTM" />,
+      value: resolve({ view: 'utm' }),
+    },
   ];
 
   const tableProps = {

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"
 }