umami/tracker/index.js
2020-10-04 22:27:59 -07:00

172 lines
3.9 KiB
JavaScript

import { doNotTrack, hook } from '../lib/web';
import { removeTrailingSlash } from '../lib/url';
(window => {
const {
screen: { width, height },
navigator: { language },
location: { hostname, pathname, search },
sessionStorage,
document,
history,
} = window;
const script = document.querySelector('script[data-website-id]');
const attr = key => script && script.getAttribute(key);
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');
const useCache = attr('data-cache');
const domains = attr('data-domains');
if (
!script ||
(dnt && doNotTrack()) ||
(domains &&
!domains
.split(',')
.map(n => n.trim())
.includes(hostname))
) {
return;
}
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;
/* Collect metrics */
const post = (url, data, callback) => {
const req = new XMLHttpRequest();
req.open('POST', url, true);
req.setRequestHeader('Content-Type', 'application/json');
req.onreadystatechange = () => {
if (req.readyState === 4) {
callback && callback(req.response);
}
};
req.send(JSON.stringify(data));
};
const collect = (type, params, uuid) => {
const key = 'umami.cache';
const payload = {
website: uuid,
hostname,
screen,
language,
cache: useCache && sessionStorage.getItem(key),
};
if (params) {
Object.keys(params).forEach(key => {
payload[key] = params[key];
});
}
return post(
`${root}/api/collect`,
{
type,
payload,
},
res => useCache && sessionStorage.setItem(key, res),
);
};
const trackView = (url = currentUrl, referrer = currentRef, uuid = website) =>
collect(
'pageview',
{
url,
referrer,
},
uuid,
);
const trackEvent = (event_value, event_type = 'custom', url = currentUrl, uuid = website) =>
collect(
'event',
{
event_type,
event_value,
url,
},
uuid,
);
/* Handle events */
const addEvents = () => {
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 = () => trackEvent(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 */
const handlePush = (state, title, url) => {
removeEvents();
currentRef = currentUrl;
const newUrl = url.toString();
if (newUrl.substring(0, 4) === 'http') {
const { pathname, search } = new URL(newUrl);
currentUrl = `${pathname}${search}`;
} else {
currentUrl = newUrl;
}
trackView(currentUrl, currentRef);
setTimeout(addEvents, 300);
};
/* Global */
if (!window.umami) {
const umami = event_value => trackEvent(event_value);
umami.trackView = trackView;
umami.trackEvent = trackEvent;
window.umami = umami;
}
/* Start */
if (autoTrack) {
history.pushState = hook(history, 'pushState', handlePush);
history.replaceState = hook(history, 'replaceState', handlePush);
trackView(currentUrl, currentRef);
addEvents();
}
})(window);