How to track users with web scripts
This article describes how to write a JavaScript script to send user data back to the server.
I made a code warehouse , which contains all the examples below, and can run to check the effect.
1. Synchronous AJAX
The common practice of sending data back to the server is to put the collected user data in the
unload
event and send it back to the server using AJAX requests.
However, asynchronous AJAX
unload
may not be successful
in the
event, because the web page is already being uninstalled, and the browser may or may not send it.
Therefore, it is necessary to change to a synchronous AJAX request.
window.addEventListener('unload', function (event) { let xhr = new XMLHttpRequest(); xhr.open('post', '/log', false); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.send('foo=bar'); });
In the above code,
xhr.open()
the third parameter of the method is
false
to indicate a synchronization request.
The biggest problem with this method is that the browser will gradually not allow the use of synchronous AJAX on the main thread. Therefore, the above code actually cannot be used.
Two, asynchronous AJAX
Asynchronous AJAX can actually be used.
The premise is
unload
that there must be some time-consuming synchronization operations
in the
event.
This will allow enough time to ensure that asynchronous AJAX can be sent successfully.
function log() { let xhr = new XMLHttpRequest(); xhr.open('post', '/log', true); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.send('foo=bar'); } window.addEventListener('unload', function(event) { log(); // a time-consuming operation for (let i = 1; i < 10000; i++) { for (let m = 1; m < 10000; m++) { continue; } } });
In the above code, a double loop is forced to execute, which prolongs the
unload
execution time of
the
event and causes the asynchronous AJAX to be sent successfully.
3. Track user clicks
setTimeout
It can also delay page unloading to ensure that asynchronous requests are sent successfully.
Here is an example to track user clicks.
// HTML 代码如下 // <a id="target" href="https://baidu.com">click</a> const clickTime = 350; const theLink = document.getElementById('target'); function log() { let xhr = new XMLHttpRequest(); xhr.open('post', '/log', true); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.send('foo=bar'); } theLink.addEventListener('click', function (event) { event.preventDefault(); log(); setTimeout(function () { window.location.href = theLink.getAttribute('href'); }, clickTime); });
Using the above code
setTimeout
, it took 350 milliseconds for the page to jump, thus allowing time for asynchronous AJAX to be issued.
Four, rebound tracking
To track user clicks, you can also use bounce tracking.
The so-called “rebound tracking” means that when a web page jumps, it first jumps to one or more intermediate URLs in order to collect information, and then jumps to the original target URL.
// HTML 代码如下 // <a id="target" href="https://baidu.com">click</a> const theLink = document.getElementById('target'); theLink.addEventListener('click', function (event) { event.preventDefault(); window.location.href = '/jump?url=' + encodeURIComponent(theLink.getAttribute('href')); });
In the above code, when the user clicks, it will be forced to jump to an intermediate URL, carry the information, and then jump to the original target URL after processing.
Google and Baidu do this now. When you click on a search result, it bounces back many times before jumping to the target URL.
Five, Beacon API
All of the above practices will delay web page uninstallation and seriously affect user experience.
In order to solve the problem of unsuccessful asynchronous requests when the web page is uninstalled, the browser has implemented a Beacon API to allow asynchronous requests to be sent out of the current main thread and sent in the browser process, so that it can be guaranteed.
window.addEventListener('unload', function (event) { navigator.sendBeacon('/log', 'foo=bar'); });
In the above code, the
navigator.sendBeacon()
method can guarantee that asynchronous requests will be issued.
The first parameter is the requested URL, and the second parameter is the data sent.
Note that the Beacon API sends out POST requests.
Six, ping attribute
HTML
<a>
tags have an
ping
attribute. As long as the user clicks, a POST request will be sent to the URL specified by the attribute.
<a href="https://baidu.com" ping="/log?foo=bar"> click </a>
In the above code, when the user clicks on the redirect,
/log
a POST request
will be sent to
this URL.
ping
The attribute cannot specify the data body, it seems that it can only carry information through the query string of the URL.
Seven, reference link
- Link Click Analytics and Privacy , John Wilander
- ping Attribute , David Walsh
(over)