Refactored session and collect process.

This commit is contained in:
Mike Cao 2020-07-20 01:54:21 -07:00
parent e58aa9e90f
commit 132bbcbe0d
7 changed files with 192 additions and 252 deletions

View file

@ -1,134 +1,111 @@
import 'promise-polyfill/src/polyfill';
import 'unfetch/polyfill';
const {
screen: { width, height },
navigator: { language },
location: { hostname, pathname, search },
localStorage: store,
document,
history,
} = window;
((window, sessionKey) => {
const {
screen: { width, height },
navigator: { language },
location: { hostname, pathname, search },
localStorage: store,
document,
history,
} = window;
/* Load script */
const script = document.querySelector('script[data-website-id]');
const website = script && script.getAttribute('data-website-id');
const hostUrl = new URL(script.src).origin;
const screen = `${width}x${height}`;
const listeners = [];
const script = document.querySelector('script[data-website-id]');
let currentUrl = `${pathname}${search}`;
let currentRef = document.referrer;
if (script) {
const website_id = script.getAttribute('data-website-id');
/* Helper methods */
if (website_id) {
const sessionKey = 'umami.session';
const hostUrl = new URL(script.src).origin;
const screen = `${width}x${height}`;
let currentUrl = `${pathname}${search}`;
let currenrRef = document.referrer;
const listeners = [];
const post = (url, params) =>
fetch(url, {
method: 'post',
cache: 'no-cache',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify(params),
}).then(res => res.json());
/* Helper methods */
const post = (url, params) =>
fetch(url, {
method: 'post',
cache: 'no-cache',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify(params),
}).then(res => res.json());
const createSession = data =>
post(`${hostUrl}/api/session`, data).then(({ success, ...session }) => {
if (success) {
store.setItem(sessionKey, JSON.stringify(session));
return success;
}
});
const getSession = () => JSON.parse(store.getItem(sessionKey));
const getSessionData = url => ({ website_id, hostname, url, screen, language });
const pageView = (url, referrer) =>
post(`${hostUrl}/api/collect`, {
type: 'pageview',
payload: { url, referrer, session: getSession() },
}).then(({ success }) => {
if (!success) {
store.removeItem(sessionKey);
}
return success;
});
const trackEvent = (url, event_type, event_value) =>
post(`${hostUrl}/api/collect`, {
type: 'event',
payload: { url, event_type, event_value, session: getSession() },
});
const execute = (url, referrer) => {
const data = getSessionData(url);
if (!store.getItem(sessionKey)) {
createSession(data).then(success => success && pageView(url, referrer));
} else {
pageView(url, referrer).then(
success =>
!success && createSession(data).then(success => success && pageView(url, referrer)),
);
}
const collect = (type, params) => {
const payload = {
session: store.getItem(sessionKey),
url: currentUrl,
referrer: currentRef,
website,
hostname,
screen,
language,
};
/* Handle push state */
const handlePush = (state, title, url) => {
removeEvents();
currenrRef = currentUrl;
currentUrl = url;
execute(currentUrl, currenrRef);
setTimeout(loadEvents, 300);
};
const hook = (type, cb) => {
const orig = history[type];
return (state, title, url) => {
const args = [state, title, url];
cb.apply(null, args);
return orig.apply(history, args);
};
};
history.pushState = hook('pushState', handlePush);
history.replaceState = hook('replaceState', handlePush);
/* Handle events */
const removeEvents = () => {
listeners.forEach(([element, type, listener]) => {
element.removeEventListener(type, listener, true);
if (params) {
Object.keys(params).forEach(key => {
payload[key] = params[key];
});
listeners.length = 0;
};
}
const loadEvents = () => {
document.querySelectorAll("[class*='umami--']").forEach(element => {
element.className.split(' ').forEach(className => {
if (/^umami--/.test(className)) {
const [, type, value] = className.split('--');
if (type && value) {
const listener = () => trackEvent(currentUrl, type, value);
listeners.push([element, type, listener]);
element.addEventListener(type, listener, true);
}
return post(`${hostUrl}/api/collect`, {
type,
payload,
}).then(({ ok, session }) => ok && session && store.setItem(sessionKey, session));
};
const pageView = () => collect('pageview').then(() => setTimeout(loadEvents, 300));
const pageEvent = (event_type, event_value) => collect('event', { event_type, event_value });
/* Handle history */
const handlePush = (state, title, url) => {
removeEvents();
currentRef = currentUrl;
currentUrl = url;
pageView();
};
const hook = (type, cb) => {
const orig = history[type];
return (state, title, url) => {
const args = [state, title, url];
cb.apply(null, args);
return orig.apply(history, args);
};
};
history.pushState = hook('pushState', handlePush);
history.replaceState = hook('replaceState', handlePush);
/* Handle events */
const removeEvents = () => {
listeners.forEach(([element, type, listener]) => {
element.removeEventListener(type, listener, true);
});
listeners.length = 0;
};
const loadEvents = () => {
document.querySelectorAll("[class*='umami--']").forEach(element => {
element.className.split(' ').forEach(className => {
if (/^umami--/.test(className)) {
const [, type, value] = className.split('--');
if (type && value) {
const listener = () => pageEvent(type, value);
listeners.push([element, type, listener]);
element.addEventListener(type, listener, true);
}
});
}
});
};
});
};
/* Start */
/* Start */
execute(currentUrl, currenrRef);
loadEvents();
}
}
pageView();
})(window, 'umami.session');