122 lines
3.3 KiB
JavaScript
122 lines
3.3 KiB
JavaScript
import React from 'react'
|
|
import Conversions from './conversions'
|
|
import ListReport from '../reports/list'
|
|
import * as metrics from '../reports/metrics'
|
|
import * as url from '../../util/url'
|
|
import * as api from '../../api'
|
|
import {
|
|
EVENT_PROPS_PREFIX,
|
|
getGoalFilter,
|
|
FILTER_OPERATIONS
|
|
} from '../../util/filters'
|
|
import { useSiteContext } from '../../site-context'
|
|
import { useQueryContext } from '../../query-context'
|
|
import { customPropsRoute } from '../../router'
|
|
|
|
export const SPECIAL_GOALS = {
|
|
404: { title: '404 Pages', prop: 'path' },
|
|
'Outbound Link: Click': { title: 'Outbound Links', prop: 'url' },
|
|
'Cloaked Link: Click': { title: 'Cloaked Links', prop: 'url' },
|
|
'File Download': { title: 'File Downloads', prop: 'url' },
|
|
'WP Search Queries': {
|
|
title: 'WordPress Search Queries',
|
|
prop: 'search_query'
|
|
},
|
|
'WP Form Completions': { title: 'WordPress Form Completions', prop: 'path' }
|
|
}
|
|
|
|
function getSpecialGoal(query) {
|
|
const goalFilter = getGoalFilter(query)
|
|
if (!goalFilter) {
|
|
return null
|
|
}
|
|
const [operation, _filterKey, clauses] = goalFilter
|
|
if (operation === FILTER_OPERATIONS.is && clauses.length == 1) {
|
|
return SPECIAL_GOALS[clauses[0]] || null
|
|
}
|
|
return null
|
|
}
|
|
|
|
export function specialTitleWhenGoalFilter(query, defaultTitle) {
|
|
return getSpecialGoal(query)?.title || defaultTitle
|
|
}
|
|
|
|
function SpecialPropBreakdown({ prop, afterFetchData }) {
|
|
const site = useSiteContext()
|
|
const { query } = useQueryContext()
|
|
|
|
function fetchData() {
|
|
return api.get(url.apiPath(site, `/custom-prop-values/${prop}`), query)
|
|
}
|
|
|
|
function getExternalLinkUrlFactory() {
|
|
if (prop === 'path') {
|
|
return (listItem) => url.externalLinkForPage(site, listItem.name)
|
|
} else if (prop === 'search_query') {
|
|
return null // WP Search Queries should not become external links
|
|
} else {
|
|
return (listItem) => listItem.name
|
|
}
|
|
}
|
|
|
|
function getFilterInfo(listItem) {
|
|
return {
|
|
prefix: EVENT_PROPS_PREFIX,
|
|
filter: ['is', `${EVENT_PROPS_PREFIX}${prop}`, [listItem['name']]]
|
|
}
|
|
}
|
|
|
|
function chooseMetrics() {
|
|
return [
|
|
metrics.createVisitors({
|
|
renderLabel: (_query) => 'Visitors',
|
|
meta: { plot: true }
|
|
}),
|
|
metrics.createEvents({
|
|
renderLabel: (_query) => 'Events',
|
|
meta: { hiddenOnMobile: true }
|
|
}),
|
|
metrics.createConversionRate()
|
|
].filter((metric) => !!metric)
|
|
}
|
|
|
|
return (
|
|
<ListReport
|
|
fetchData={fetchData}
|
|
afterFetchData={afterFetchData}
|
|
getFilterInfo={getFilterInfo}
|
|
keyLabel={prop}
|
|
metrics={chooseMetrics()}
|
|
detailsLinkProps={{
|
|
path: customPropsRoute.path,
|
|
params: { propKey: url.maybeEncodeRouteParam(prop) },
|
|
search: (search) => search
|
|
}}
|
|
getExternalLinkUrl={getExternalLinkUrlFactory()}
|
|
color="bg-red-50"
|
|
colMinWidth={90}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export default function GoalConversions({ afterFetchData, onGoalFilterClick }) {
|
|
const { query } = useQueryContext()
|
|
|
|
const specialGoal = getSpecialGoal(query)
|
|
if (specialGoal) {
|
|
return (
|
|
<SpecialPropBreakdown
|
|
prop={specialGoal.prop}
|
|
afterFetchData={afterFetchData}
|
|
/>
|
|
)
|
|
} else {
|
|
return (
|
|
<Conversions
|
|
onGoalFilterClick={onGoalFilterClick}
|
|
afterFetchData={afterFetchData}
|
|
/>
|
|
)
|
|
}
|
|
}
|