Refactor tracker.

This commit is contained in:
Mike Cao 2020-09-18 13:40:46 -07:00
parent 2e22deb58a
commit 023adafa39
8 changed files with 85 additions and 136 deletions

View file

@ -13,44 +13,25 @@ import { removeTrailingSlash } from '../lib/url';
} = window;
const script = document.querySelector('script[data-website-id]');
const attr = key => script && script.getAttribute(key);
// eslint-disable-next-line no-undef
if (!script || (__DNT__ && doNotTrack())) return;
const website = attr('data-website-id');
const hostUrl = attr('data-host-url');
const autoTrack = attr('data-auto-track') !== 'false';
const dnt = attr('data-do-not-track') === 'true';
if (!script || (dnt && doNotTrack())) return;
const website = script.getAttribute('data-website-id');
const hostUrl = script.getAttribute('data-host-url');
const skipAuto = script.getAttribute('data-skip-auto');
const root = hostUrl
? removeTrailingSlash(hostUrl)
: new URL(script.src).href.split('/').slice(0, -1).join('/');
const screen = `${width}x${height}`;
const listeners = [];
let currentUrl = `${pathname}${search}`;
let currentRef = document.referrer;
/* Handle events */
/* Collect metrics */
const removeEvents = () => {
listeners.forEach(([element, type, listener]) => {
element && element.removeEventListener(type, listener, true);
});
listeners.length = 0;
};
const loadEvents = () => {
document.querySelectorAll('[class*=\'umami--\']').forEach(element => {
element.className.split(' ').forEach(className => {
if (/^umami--([a-z]+)--([a-z0-9_]+[a-z0-9-_]+)$/.test(className)) {
const [, type, value] = className.split('--');
const listener = () => collectEvent(type, value);
listeners.push([element, type, listener]);
element.addEventListener(type, listener, true);
}
});
});
};
const collect = (type, params, uuid) => {
const payload = {
website: uuid,
@ -70,17 +51,56 @@ import { removeTrailingSlash } from '../lib/url';
payload,
});
};
const pageView = (url = currentUrl, referrer = currentRef, uuid = website) => collect('pageview', {
url,
referrer,
}, uuid);
/* Collect metrics */
const pageViewWithAutoEvents = (url, referrer) => pageView(url, referrer).then(() => setTimeout(loadEvents, 300));
const pageView = (url = currentUrl, referrer = currentRef, uuid = website) =>
collect(
'pageview',
{
url,
referrer,
},
uuid,
);
const pageEvent = (event_value, event_type = 'custom', url = currentUrl, uuid = website) =>
collect(
'event',
{
event_type,
event_value,
url,
},
uuid,
);
/* Handle events */
const loadEvents = () => {
document.querySelectorAll("[class*='umami--']").forEach(element => {
element.className.split(' ').forEach(className => {
if (/^umami--([a-z]+)--([a-z0-9_]+[a-z0-9-_]+)$/.test(className)) {
const [, type, value] = className.split('--');
const listener = () => pageEvent(value, type);
listeners.push([element, type, listener]);
element.addEventListener(type, listener, true);
}
});
});
};
const removeEvents = () => {
listeners.forEach(([element, type, listener]) => {
element && element.removeEventListener(type, listener, true);
});
listeners.length = 0;
};
/* Handle history changes */
/* Handle history */
const handlePush = (state, title, url) => {
removeEvents();
currentRef = currentUrl;
const newUrl = url.toString();
@ -91,38 +111,27 @@ import { removeTrailingSlash } from '../lib/url';
currentUrl = newUrl;
}
pageViewWithAutoEvents(currentUrl, currentRef);
pageView(currentUrl, currentRef);
setTimeout(loadEvents, 300);
};
const collectEvent = (event_type, event_value, url = currentUrl, uuid = website) => collect('event', {
url,
event_type,
event_value,
}, uuid);
/* Global */
const registerAutoEvents = () => {
history.pushState = hook(history, 'pushState', handlePush);
history.replaceState = hook(history, 'replaceState', handlePush);
return pageViewWithAutoEvents(currentUrl, currentRef);
};
if (!window.umami) {
const umami = event_value => pageEvent(event_value);
umami.pageView = pageView;
umami.pageEvent = pageEvent;
const umamiFunctions = { collect, pageView, collectEvent, registerAutoEvents };
const scheduledCalls = window.umami.calls;
window.umami = event_value => collect('event', { event_type: 'custom', event_value });
Object.keys(umamiFunctions).forEach((key) => {
window.umami[key] = umamiFunctions[key];
});
if (scheduledCalls) {
scheduledCalls.forEach(([fnName, ...params]) => {
window.umami[fnName].apply(window.umami, params);
});
window.umami = umami;
}
/* Start */
if (!skipAuto) {
registerAutoEvents().catch(e => console.error(e));
if (autoTrack) {
history.pushState = hook(history, 'pushState', handlePush);
history.replaceState = hook(history, 'replaceState', handlePush);
pageView(currentUrl, currentRef);
}
})(window);