Merge pull request #1323 from cywio/utm-tracking

Add UTM parameters to dashboard

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,47 @@
+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}
+        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"
 }

pages/api/website/[id]/metrics.js

@@ -1,10 +1,11 @@
-import { getPageviewMetrics, getSessionMetrics, getWebsiteById } from 'queries';
+import { getPageviewMetrics, getSessionMetrics, getWebsiteById, getPageviewParams } from 'queries';
 import { ok, methodNotAllowed, unauthorized, badRequest } from 'lib/response';
 import { allowQuery } from 'lib/auth';
 import { useCors } from 'lib/middleware';
 
 const sessionColumns = ['browser', 'os', 'device', 'screen', 'country', 'language'];
 const pageviewColumns = ['url', 'referrer'];
+const paramTypes = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_content', 'utm_term', 'ref'];
 
 function getTable(type) {
   if (type === 'event') {
@@ -39,6 +40,52 @@ export default async (req, res) => {
     const startDate = new Date(+start_at);
     const endDate = new Date(+end_at);
 
+    if (paramTypes.includes(type)) {
+      const column = 'url';
+      const table = getTable(type);
+
+      let domain;
+      if (type === 'referrer') {
+        const website = await getWebsiteById(websiteId);
+
+        if (!website) {
+          return badRequest(res);
+        }
+
+        domain = website.domain;
+      }
+
+      const filters = {
+        domain,
+        url: type !== 'url' && table !== 'event' ? url : undefined,
+        referrer: type !== 'referrer' ? referrer : true,
+        os: type !== 'os' ? os : undefined,
+        browser: type !== 'browser' ? browser : undefined,
+        device: type !== 'device' ? device : undefined,
+        country: type !== 'country' ? country : undefined,
+        event_url: type !== 'url' && table === 'event' ? url : undefined,
+      };
+
+      let data = await getPageviewParams(
+        type,
+        websiteId,
+        startDate,
+        endDate,
+        column,
+        table,
+        filters,
+      );
+
+      let terms = {};
+      new Set(data.map(i => i.param)).forEach(term => (terms[term] = null));
+      for (let { param } of data) terms[param] += 1;
+
+      return ok(
+        res,
+        Object.keys(terms).map(i => ({ x: i, y: terms[i] })),
+      );
+    }
+
     if (sessionColumns.includes(type)) {
       let data = await getSessionMetrics(websiteId, startDate, endDate, type, {
         os,

queries/analytics/pageview/getPageviewParams.js

@@ -0,0 +1,45 @@
+import { getDatabase, parseFilters, rawQuery } from 'lib/queries';
+import { MYSQL, POSTGRESQL } from 'lib/constants';
+
+export function getPageviewParams(
+  param,
+  website_id,
+  start_at,
+  end_at,
+  column,
+  table,
+  filters = {},
+) {
+  const params = [param, website_id, start_at, end_at];
+  const { pageviewQuery, sessionQuery, eventQuery, joinSession } = parseFilters(
+    table,
+    column,
+    filters,
+    params,
+  );
+
+  let splitFn;
+  let db = getDatabase();
+  if (db === MYSQL) splitFn = 'substring_index';
+  if (db === POSTGRESQL) splitFn = 'split_part';
+  if (!splitFn) return Promise.reject(new Error('Unknown database.'));
+
+  return rawQuery(
+    `select * from (
+      select
+        url, ${splitFn}(${splitFn}(url, concat($1, '='), 2), '&', 1) param
+      from
+        pageview
+        ${joinSession}
+      where
+        ${table}.website_id=$2 and ${table}.created_at between $3 and $4
+        ${pageviewQuery}
+        ${joinSession && sessionQuery}
+        ${eventQuery}
+      group by 1, 2
+      order by 2 desc
+    ) q
+    where q.param <> ''`,
+    params,
+  );
+}

queries/index.js

@@ -17,6 +17,7 @@ import { getEventMetrics } from './analytics/event/getEventMetrics';
 import { getEvents } from './analytics/event/getEvents';
 import { saveEvent } from './analytics/event/saveEvent';
 import { getPageviewMetrics } from './analytics/pageview/getPageviewMetrics';
+import { getPageviewParams } from './analytics/pageview/getPageviewParams';
 import { getPageviews } from './analytics/pageview/getPageviews';
 import { getPageviewStats } from './analytics/pageview/getPageviewStats';
 import { savePageView } from './analytics/pageview/savePageView';
@@ -48,6 +49,7 @@ export {
   getEvents,
   saveEvent,
   getPageviewMetrics,
+  getPageviewParams,
   getPageviews,
   getPageviewStats,
   savePageView,