This approach demonstrates how to measure the loading time from the moment a user clicks on a link until the destination page fully loads. It’s particularly useful for tracking the performance of pages within a sales funnel.
Set Up the Link Click Event Listener
Attach an event listener to the desired links to record the timestamp when a user initiates navigation:
document.addEventListener('click', function(event) {
const target = event.target.closest('.link');
if (target) {
const timeThen = Date.now();
localStorage.setItem('ip2timing', timeThen.toString());
}
});Retrieve Stored Data and Send Timing Information
Upon loading the destination page, retrieve the stored timestamp and calculate the duration. Then, send this data to a specified URL for storage or analysis:
window.addEventListener('load', function() {
const ipElement = document.getElementById('ip');
if (!ipElement) return;
const currentIP = ipElement.textContent || '';
const storedTime = localStorage.getItem('ip2timing');
if (!storedTime) return;
const timeThen = parseInt(storedTime, 10);
const timeNow = Date.now();
const duration = (timeNow - timeThen) / 1000; // duration in seconds
const pageId = '7'; // Replace with dynamic value as needed
// Function to send a ping by loading an image
function sendPing(url, timeout = 1500) {
return new Promise((resolve, reject) => {
const img = new Image();
let timer;
img.onload = () => {
clearTimeout(timer);
resolve({ status: 'success', duration: Date.now() - timeNow });
};
img.onerror = () => {
clearTimeout(timer);
resolve({ status: 'error', duration: Date.now() - timeNow });
};
timer = setTimeout(() => {
img.src = ''; // Cancel the image load
reject({ status: 'timeout', duration: timeout });
}, timeout);
img.src = `${url}?cache=${Date.now()}`;
});
}
// Only send the ping if the IP matches
if (currentIP === currentIP) {
const pingUrl = `https://www.example.com/search-timing.php?duration=${duration}&page_id=${pageId}&when=${timeNow}`;
sendPing(pingUrl)
.then(response => {
// Handle successful ping
console.log('Ping response:', response);
})
.catch(error => {
// Handle ping error
console.error('Ping error:', error);
});
localStorage.removeItem('ip2timing');
}
});Ensure that the element with the ID ip exists on the destination page and contains the user’s IP address or a unique identifier.
Replace '7' with the appropriate page_id value, which can be dynamically set using data attributes, JavaScript variables, AJAX calls, or server-side rendering.
The sendPing function simulates a ping by loading an image from the specified URL. This method is commonly used to send lightweight tracking requests without affecting page performance.
