mirror of
https://github.com/umami-software/umami.git
synced 2026-02-13 09:05:36 +01:00
Updates to Revenue report.
This commit is contained in:
Mike Cao
parent
4995a0e1e4
commit
095d1f2070
19 changed files with 365 additions and 416 deletions
202
src/app/(main)/console/[websiteId]/TestConsolePage.tsx
Normal file
202
src/app/(main)/console/[websiteId]/TestConsolePage.tsx
Normal file
|
|
@ -0,0 +1,202 @@
|
|||
'use client';
|
||||
import { Button, Grid, Column, Heading } from '@umami/react-zen';
|
||||
import Link from 'next/link';
|
||||
import Script from 'next/script';
|
||||
import { PageBody } from '@/components/common/PageBody';
|
||||
import { EventsChart } from '@/components/metrics/EventsChart';
|
||||
import { WebsiteChart } from '@/app/(main)/websites/[websiteId]/WebsiteChart';
|
||||
import { useWebsiteQuery } from '@/components/hooks';
|
||||
import { PageHeader } from '@/components/common/PageHeader';
|
||||
|
||||
export function TestConsolePage({ websiteId }: { websiteId: string }) {
|
||||
const { data } = useWebsiteQuery(websiteId);
|
||||
|
||||
function handleRunScript() {
|
||||
window['umami'].track(props => ({
|
||||
...props,
|
||||
url: '/page-view',
|
||||
referrer: 'https://www.google.com',
|
||||
}));
|
||||
window['umami'].track('track-event-no-data');
|
||||
window['umami'].track('track-event-with-data', {
|
||||
test: 'test-data',
|
||||
boolean: true,
|
||||
booleanError: 'true',
|
||||
time: new Date(),
|
||||
user: `user${Math.round(Math.random() * 10)}`,
|
||||
number: 1,
|
||||
number2: Math.random() * 100,
|
||||
time2: new Date().toISOString(),
|
||||
nested: {
|
||||
test: 'test-data',
|
||||
number: 1,
|
||||
object: {
|
||||
test: 'test-data',
|
||||
},
|
||||
},
|
||||
array: [1, 2, 3],
|
||||
});
|
||||
}
|
||||
|
||||
function handleRunRevenue() {
|
||||
window['umami'].track(props => ({
|
||||
...props,
|
||||
url: '/checkout-cart',
|
||||
referrer: 'https://www.google.com',
|
||||
}));
|
||||
window['umami'].track('checkout-cart', {
|
||||
revenue: parseFloat((Math.random() * 1000).toFixed(2)),
|
||||
currency: 'USD',
|
||||
});
|
||||
window['umami'].track('affiliate-link', {
|
||||
revenue: parseFloat((Math.random() * 1000).toFixed(2)),
|
||||
currency: 'USD',
|
||||
});
|
||||
window['umami'].track('promotion-link', {
|
||||
revenue: parseFloat((Math.random() * 1000).toFixed(2)),
|
||||
currency: 'USD',
|
||||
});
|
||||
window['umami'].track('checkout-cart', {
|
||||
revenue: parseFloat((Math.random() * 1000).toFixed(2)),
|
||||
currency: 'EUR',
|
||||
});
|
||||
window['umami'].track('promotion-link', {
|
||||
revenue: parseFloat((Math.random() * 1000).toFixed(2)),
|
||||
currency: 'EUR',
|
||||
});
|
||||
window['umami'].track('affiliate-link', {
|
||||
item1: {
|
||||
productIdentity: 'ABC424',
|
||||
revenue: parseFloat((Math.random() * 10000).toFixed(2)),
|
||||
currency: 'JPY',
|
||||
},
|
||||
item2: {
|
||||
productIdentity: 'ZYW684',
|
||||
revenue: parseFloat((Math.random() * 10000).toFixed(2)),
|
||||
currency: 'JPY',
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function handleRunIdentify() {
|
||||
window['umami'].identify({
|
||||
userId: 123,
|
||||
name: 'brian',
|
||||
number: Math.random() * 100,
|
||||
test: 'test-data',
|
||||
boolean: true,
|
||||
booleanError: 'true',
|
||||
time: new Date(),
|
||||
time2: new Date().toISOString(),
|
||||
nested: {
|
||||
test: 'test-data',
|
||||
number: 1,
|
||||
object: {
|
||||
test: 'test-data',
|
||||
},
|
||||
},
|
||||
array: [1, 2, 3],
|
||||
});
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<PageBody>
|
||||
<PageHeader title="Test console">
|
||||
<Column>{data.name}</Column>
|
||||
</PageHeader>
|
||||
<Column gap="6" paddingY="6">
|
||||
<Script
|
||||
async
|
||||
data-website-id={websiteId}
|
||||
src={`${process.env.basePath || ''}/script.js`}
|
||||
data-cache="true"
|
||||
/>
|
||||
<Grid columns="1fr 1fr 1fr" gap>
|
||||
<Column gap>
|
||||
<Heading>Page links</Heading>
|
||||
<div>
|
||||
<Link href={`/console/${websiteId}?page=1`}>page one</Link>
|
||||
</div>
|
||||
<div>
|
||||
<Link href={`/console/${websiteId}?page=2 `}>page two</Link>
|
||||
</div>
|
||||
<div>
|
||||
<a href="https://www.google.com" data-umami-event="external-link-direct">
|
||||
external link (direct)
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
href="https://www.google.com"
|
||||
data-umami-event="external-link-tab"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
external link (tab)
|
||||
</a>
|
||||
</div>
|
||||
</Column>
|
||||
<Column gap>
|
||||
<Heading>Click events</Heading>
|
||||
<Button id="send-event-button" data-umami-event="button-click" variant="primary">
|
||||
Send event
|
||||
</Button>
|
||||
<Button
|
||||
id="send-event-data-button"
|
||||
data-umami-event="button-click"
|
||||
data-umami-event-name="bob"
|
||||
data-umami-event-id="123"
|
||||
variant="primary"
|
||||
>
|
||||
Send event with data
|
||||
</Button>
|
||||
<Button
|
||||
id="generate-revenue-button"
|
||||
data-umami-event="checkout-cart"
|
||||
data-umami-event-revenue={(Math.random() * 10000).toFixed(2).toString()}
|
||||
data-umami-event-currency="USD"
|
||||
variant="primary"
|
||||
>
|
||||
Generate revenue data
|
||||
</Button>
|
||||
<Button
|
||||
id="button-with-div-button"
|
||||
data-umami-event="button-click"
|
||||
data-umami-event-name={'bob'}
|
||||
data-umami-event-id="123"
|
||||
variant="primary"
|
||||
>
|
||||
<div>Button with div</div>
|
||||
</Button>
|
||||
<div data-umami-event="div-click">DIV with attribute</div>
|
||||
<div data-umami-event="div-click-one">
|
||||
<div data-umami-event="div-click-two">
|
||||
<div data-umami-event="div-click-three">Nested DIV</div>
|
||||
</div>
|
||||
</div>
|
||||
</Column>
|
||||
<Column gap>
|
||||
<Heading>Javascript events</Heading>
|
||||
<Button id="manual-button" variant="primary" onClick={handleRunScript}>
|
||||
Run script
|
||||
</Button>
|
||||
<Button id="manual-button" variant="primary" onClick={handleRunIdentify}>
|
||||
Run identify
|
||||
</Button>
|
||||
<Button id="manual-button" variant="primary" onClick={handleRunRevenue}>
|
||||
Revenue script
|
||||
</Button>
|
||||
</Column>
|
||||
</Grid>
|
||||
<Heading>Pageviews</Heading>
|
||||
<WebsiteChart websiteId={websiteId} />
|
||||
<Heading>Events</Heading>
|
||||
<EventsChart websiteId={websiteId} />
|
||||
</Column>
|
||||
</PageBody>
|
||||
);
|
||||
}
|
||||
22
src/app/(main)/console/[websiteId]/page.tsx
Normal file
22
src/app/(main)/console/[websiteId]/page.tsx
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
import { Metadata } from 'next';
|
||||
import { TestConsolePage } from './TestConsolePage';
|
||||
|
||||
async function getEnabled() {
|
||||
return !!process.env.ENABLE_TEST_CONSOLE;
|
||||
}
|
||||
|
||||
export default async function ({ params }: { params: Promise<{ websiteId: string }> }) {
|
||||
const { websiteId } = await params;
|
||||
|
||||
const enabled = await getEnabled();
|
||||
|
||||
if (!enabled) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return <TestConsolePage websiteId={websiteId} />;
|
||||
}
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Test Console',
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue