Refactored tracker. Added handling for buttons.

This commit is contained in:
Mike Cao 2024-01-14 21:17:11 -08:00
parent 2197551e58
commit 28d2787880
9 changed files with 152 additions and 209 deletions

View file

@ -82,15 +82,15 @@ export function TestConsole({ websiteId }: { websiteId: string }) {
<WebsiteSelect websiteId={website?.id} onSelect={handleChange} />
</PageHeader>
{website && (
<>
<div className={styles.container}>
<Script
async
data-website-id={websiteId}
src={`${process.env.basePath}/script.js`}
data-cache="true"
/>
<div className={styles.test}>
<div>
<div className={styles.actions}>
<div className={styles.group}>
<div className={styles.header}>Page links</div>
<div>
<Link href={`/console/${websiteId}/page/1/?q=abc`}>page one</Link>
@ -114,12 +114,11 @@ export function TestConsole({ websiteId }: { websiteId: string }) {
</a>
</div>
</div>
<div>
<div className={styles.group}>
<div className={styles.header}>Click events</div>
<Button id="send-event-button" data-umami-event="button-click" variant="primary">
Send event
</Button>
<p />
<Button
id="send-event-data-button"
data-umami-event="button-click"
@ -129,23 +128,39 @@ export function TestConsole({ websiteId }: { websiteId: string }) {
>
Send event with 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 className={styles.wrapped}>Button with div</div>
</Button>
<div data-umami-event="div-click" className={styles.wrapped}>
DIV with attribute
</div>
<div data-umami-event="div-click-one" className={styles.wrapped}>
<div data-umami-event="div-click-two" className={styles.wrapped}>
<div data-umami-event="div-click-three" className={styles.wrapped}>
Nested DIV
</div>
</div>
</div>
</div>
<div>
<div className={styles.group}>
<div className={styles.header}>Javascript events</div>
<Button id="manual-button" variant="primary" onClick={handleClick}>
Run script
</Button>
<p />
<Button id="manual-button" variant="primary" onClick={handleIdentifyClick}>
Run identify
</Button>
</div>
</div>
<div>
<WebsiteChart websiteId={website.id} />
<EventsChart websiteId={website.id} />
</div>
</>
<WebsiteChart websiteId={website.id} />
<EventsChart websiteId={website.id} />
</div>
)}
</Page>
);