Merge branch 'dev' into analytics

This commit is contained in:
Mike Cao 2023-04-04 00:36:11 -07:00
commit dea4b4766c
2 changed files with 39 additions and 24 deletions

View File

@ -49,15 +49,13 @@ export default function TestConsole() {
return null;
}
const websiteId = id?.[0];
const [websiteId] = id || [];
const website = data.find(({ id }) => websiteId === id);
return (
<Page loading={isLoading} error={error}>
<Head>
<title>
{router.query.id[2] ? `Umami Console page ${router.query.id[2]}` : 'Umami Console Select'}
</title>
<title>{website ? `${website.name} | Umami Console` : 'Umami Console'}</title>
</Head>
<PageHeader title="Test console">
<WebsiteSelect websiteId={website?.id} onSelect={handleChange} />
@ -74,10 +72,10 @@ export default function TestConsole() {
<Column xs="4">
<div className={styles.header}>Page links</div>
<div>
<Link href={`/console/${websiteId}/page/1/?q=123`}>page one</Link>
<Link href={`/console/${websiteId}/page/1/?q=abc`}>page one</Link>
</div>
<div>
<Link href={`/console/${websiteId}/page/2/?q=456 `}>page two</Link>
<Link href={`/console/${websiteId}/page/2/?q=123 `}>page two</Link>
</div>
<div>
<a href="https://www.google.com" data-umami-event="external-link-direct">

View File

@ -28,6 +28,7 @@
const endpoint = `${root}/api/send`;
const screen = `${width}x${height}`;
const eventRegex = /data-umami-event-([\w-_]+)/;
const eventNameAttribute = _data + 'umami-event';
/* Helper functions */
@ -90,15 +91,14 @@
};
const handleClick = () => {
const callback = e => {
const t = e.target;
const attr = t.getAttribute.bind(t);
const eventName = attr(_data + 'umami-event');
const trackElement = el => {
const attr = el.getAttribute.bind(el);
const eventName = attr(eventNameAttribute);
if (eventName) {
const eventData = {};
t.getAttributeNames().forEach(name => {
el.getAttributeNames().forEach(name => {
const match = name.match(eventRegex);
if (match) {
@ -106,23 +106,40 @@
}
});
if (t.tagName === 'A') {
const href = attr('href');
const target = attr('target');
return track(eventName, { data: eventData });
}
return Promise.resolve();
};
if (
href &&
target !== '_blank' &&
!(e.ctrlKey || e.shiftKey || e.metaKey || (e.button && e.button === 1))
) {
const callback = e => {
const el = e.target;
const anchor =
el.tagName === 'A'
? el
: el.parentElement && el.parentElement.tagName === 'A'
? el.parentElement
: null;
if (anchor) {
const { href, target } = anchor;
const external =
target === '_blank' ||
e.ctrlKey ||
e.shiftKey ||
e.metaKey ||
(e.button && e.button === 1);
const eventName = anchor.getAttribute(eventNameAttribute);
if (eventName && href) {
if (!external) {
e.preventDefault();
return track(eventName, { data: eventData }).then(() => {
location.href = href;
});
}
return trackElement(anchor).then(() => {
if (!external) location.href = href;
});
}
track(eventName, { data: eventData });
} else {
trackElement(el);
}
};