If you are building frontend application, Sometimes you need to track the user actions for debugging or performance improvement or for A/B testing. What are the important actions essential for these use cases
- click
- URL change
- API calls
- input change event
How to do this ?
- Storing this tracking data in sessionStorage is a good idea since it won't share with other tabs.
- If user performs above actions, then store those info in sessionStorage as array of actions with time
Here is the code snippet
const generateXPathWithNearestParentId = element => {
let path = '';
let nearestParentId = null;
// Check if the current element's has an ID
if (element.id) {
nearestParentId = element.id;
}
while (!nearestParentId && element !== document.body) {
const tagName = element.tagName.toLowerCase();
let index = 1;
let sibling = element.previousElementSibling;
while (sibling) {
if (sibling.tagName.toLowerCase() === tagName) {
index += 1;
}
sibling = sibling.previousElementSibling;
}
if (index === 1) {
path = `/${tagName}${path}`;
} else {
path = `/${tagName}[${index}]${path}`;
}
// Check if the current element's parent has an ID
if (element.parentElement.id) {
nearestParentId = element.parentElement.id;
break; // Stop searching when we find the nearest parent with an ID
}
element = element.parentElement;
}
if (nearestParentId) {
path = `//*[@id='${nearestParentId}']${path}`;
return path;
}
return path; // No parent with an ID found
};
const handleClick = event => {
const tracks = JSON.parse(
sessionStorage.getItem('tracks') || '[]'
);
const target = generateXPathWithNearestParentId(event.target);
const track = {
type: 'click',
target,
time: new Date(),
};
tracks.push(track);
sessionStorage.setItem('tracks', JSON.stringify(tracks));
};
const handleChange = event => {
const tracks = JSON.parse(
sessionStorage.getItem('tracks') || '[]'
);
const prevCommand =
tracks && tracks.length ? tracks[tracks.length - 1] : null;
const target = generateXPathWithNearestParentId(event.target);
const track = {
type: 'change',
target,
value: event.target.value,
time: new Date(),
};
if (
prevCommand &&
prevCommand.type === 'change' &&
prevCommand.target === target
) {
tracks.pop();
}
tracks.push(track);
sessionStorage.setItem('tracks', JSON.stringify(tracks));
};
const handleDocumentLoad = () => {
let oldHref = document.location.href;
const body = document.querySelector('body');
const observer = new MutationObserver(mutations => {
if (oldHref !== document.location.href) {
oldHref = document.location.href;
const tracks = JSON.parse(
sessionStorage.getItem('tracks') || '[]'
);
const track = {
type: 'url',
value: oldHref,
time: new Date(),
};
tracks.push(track);
sessionStorage.setItem('tracks', JSON.stringify(tracks));
}
});
observer.observe(body, { childList: true, subtree: true });
};
document.addEventListener('click', handleClick);
document.addEventListener('input', handleChange);
window.onload = handleDocumentLoad;
Incredible insights on tracking user actions using JavaScript! The article provides a comprehensive guide, making it easy for developers to enhance user experience and analyze behavior. A game-changer for web development! JavaScript
ReplyDelete