mirror of
https://github.com/kremalicious/umami.git
synced 2024-12-22 01:03:39 +01:00
cbf64e561a
- Remove redundant checks and returns - Add an additional check for local storage (some browsers still lack it) - Using some better practices - Use MutationObserver for events - Add initial events on DOM full render, send first trackView on complete readyState
186 lines
4.5 KiB
JavaScript
186 lines
4.5 KiB
JavaScript
import { doNotTrack, hook } from '../lib/web';
|
|
import { removeTrailingSlash } from '../lib/url';
|
|
|
|
(window => {
|
|
const {
|
|
screen: { width, height },
|
|
navigator: { language },
|
|
location: { hostname, pathname, search },
|
|
localStorage,
|
|
sessionStorage,
|
|
document,
|
|
history,
|
|
} = window;
|
|
|
|
const script = document.querySelector('script[data-website-id]');
|
|
|
|
if (!script) return;
|
|
|
|
const attr = script.getAttribute.bind(script);
|
|
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 domain = attr('data-domains') || '';
|
|
const domains = domain.split(',').map(n => n.trim());
|
|
|
|
const eventClass = /^umami--([a-z]+)--([\w]+[\w-]*)$/;
|
|
const eventSelect = "[class*='umami--']";
|
|
const cacheKey = 'umami.cache';
|
|
|
|
const disableTracking = () =>
|
|
(localStorage && localStorage.getItem('umami.disabled')) ||
|
|
(dnt && doNotTrack()) ||
|
|
(domain && !domains.includes(hostname));
|
|
|
|
const root = hostUrl
|
|
? removeTrailingSlash(hostUrl)
|
|
: script.src.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(req.response);
|
|
}
|
|
};
|
|
|
|
req.send(JSON.stringify(data));
|
|
};
|
|
|
|
const collect = (type, params, uuid) => {
|
|
if (disableTracking()) return;
|
|
|
|
const payload = {
|
|
website: uuid,
|
|
hostname,
|
|
screen,
|
|
language,
|
|
cache: useCache && sessionStorage.getItem(cacheKey),
|
|
};
|
|
|
|
Object.keys(params).forEach(key => {
|
|
payload[key] = params[key];
|
|
});
|
|
|
|
post(
|
|
`${root}/api/collect`,
|
|
{
|
|
type,
|
|
payload,
|
|
},
|
|
res => useCache && sessionStorage.setItem(cacheKey, 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 addEvent = element => {
|
|
element.className.split(' ').forEach(className => {
|
|
if (!eventClass.test(className)) return;
|
|
|
|
const [, type, value] = className.split('--');
|
|
const listener = listeners[className]
|
|
? listeners[className]
|
|
: (listeners[className] = () => trackEvent(value, type));
|
|
|
|
element.addEventListener(type, listener, true);
|
|
});
|
|
};
|
|
|
|
const monitorMutate = mutations => {
|
|
mutations.forEach(mutation => {
|
|
const element = mutation.target;
|
|
addEvent(element);
|
|
element.querySelectorAll(eventSelect).forEach(addEvent);
|
|
});
|
|
};
|
|
|
|
/* Handle history changes */
|
|
|
|
const handlePush = (state, title, url) => {
|
|
if (!url) return;
|
|
|
|
currentRef = currentUrl;
|
|
const newUrl = url.toString();
|
|
|
|
if (newUrl.substring(0, 4) === 'http') {
|
|
currentUrl = '/' + newUrl.split('/').splice(3).join('/');
|
|
} else {
|
|
currentUrl = newUrl;
|
|
}
|
|
|
|
if (currentUrl !== currentRef) {
|
|
trackView();
|
|
}
|
|
};
|
|
|
|
/* Global */
|
|
|
|
if (!window.umami) {
|
|
const umami = eventValue => trackEvent(eventValue);
|
|
umami.trackView = trackView;
|
|
umami.trackEvent = trackEvent;
|
|
|
|
window.umami = umami;
|
|
}
|
|
|
|
/* Start */
|
|
|
|
if (autoTrack && !disableTracking()) {
|
|
history.pushState = hook(history, 'pushState', handlePush);
|
|
history.replaceState = hook(history, 'replaceState', handlePush);
|
|
|
|
const update = () => {
|
|
switch (document.readyState) {
|
|
/* DOM rendered, add event listeners */
|
|
case 'interactive': {
|
|
document.querySelectorAll(eventSelect).forEach(addEvent);
|
|
const observer = new MutationObserver(monitorMutate);
|
|
observer.observe(document, { childList: true, subtree: true });
|
|
break;
|
|
}
|
|
/* Page loaded, track our view */
|
|
case 'complete':
|
|
trackView();
|
|
break;
|
|
}
|
|
};
|
|
document.addEventListener('readystatechange', update, true);
|
|
update();
|
|
}
|
|
})(window);
|