javascript - What is a better way for a website to obtain user’s browsing history, button clicks, and form filling related behavioral data?

This is an interview question for today's interview. The simpler thing I thought of was to record the user's relevant data through cookies, and then send it to the server when the web page is closed.

I searched Baidu Statistics on the Internet and found GA related information. It seems that relevant information is also recorded through cookies. Saving data is achieved by requesting a picture and then bringing different parameters.

I don’t know if you have any other good methods.

Reply content:

This is an interview question for today's interview. The simpler thing I thought of was to record the user's relevant data through cookies, and then send it to the server when the web page is closed.

I searched Baidu Statistics on the Internet and found GA related information. It seems that relevant information is also recorded through cookies. Saving data is achieved by requesting a picture and then bringing different parameters.

I don’t know if you have any other good methods.

I won’t say any more, you can figure it out yourself

<code>var _hmt = _hmt || [];

/* 指定要响应JS-API调用的帐号的站点id */
//_hmt.push([ '_setAccount', 'XXXXXXXX' ]);
// 用于发送某个指定URL的PV统计请求，通常用于AJAX页面的PV统计。
// _hmt.push(['_trackPageview', pageURL]);
// 用于触发某个事件，如某个按钮的点击，或播放器的播放/停止，以及游戏的开始/暂停等。
// _hmt.push(['_trackEvent', category, action, opt_label, opt_value]);
// 用户访问一个安装了百度统计代码的页面时，代码会自动发送该页面的PV统计请求，如果不希望自动统计该页面的PV，就可以使用本接口。主要用于iframe嵌套页面等情况。
// _hmt.push(['_setAutoPageview', false]);


(function() {
    //加载百度的统计代码
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?XXXXXXX";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
})();


(function() {
    function doMonitorForDataTrack(target) {
        var target = target;
        var _track = target.getAttribute("data-track");
        if (typeof (_hmt) != "undefined" && _track != '') {
            if (_track.indexOf("_hmt.push") > -1) {
                eval(_track);
            } else {
                var _trackArr = _track.split('.');
                if (_trackArr.length < 2) return;
                var category = 'Click';// 必填项，参数为字符串
                var action = '';// 必填项，参数为字符串
                var label = '';// 可选，参数为字符串
                
                /**当只有一个分割字符，
                 * 例如 data-track="index.10001"，执行函数 _hmt.push(['_trackEvent', 'Click', 'index', '10001‘])
                 * */
                if (_trackArr.length == 2) {
                    category = 'Click';
                    action = _trackArr[0];// 必填项，参数为字符串
                    label = _trackArr[1];// 可选，参数为字符串
                }
                /**当有超过两个或两个以上分割字符，
                 * 如 data-track="songli.BTN.担保交易"，执行_hmt.push(['_trackEvent', 'songli', 'BTN', '担保交易‘]);
                 * 如 data-track="songli.BTN.担保交易.1002" ，执行_hmt.push(['_trackEvent', 'songli', 'BTN', '担保交易.1002‘]);
                 *  */
                else {
                    category = _trackArr.shift();// 必填项，参数为字符串
                    action = _trackArr.shift();// 必填项，参数为字符串
                    label = _trackArr.join('.');// 可选，参数为字符串
                }
                _hmt.push([ '_trackEvent', category, action, label ]);
            }
        }
    }

    function addEvent(obj, type, fn) {
        if (obj.attachEvent) {
            obj['e' + type + fn] = fn;
            obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
            obj.attachEvent('on' + type, obj[type + fn]);
        } else
            obj.addEventListener(type, fn, false);
    }
    var _elemArr = document.getElementsByTagName('A'), _elemLen = _elemArr.length;
    var _body = document.body || document.documentElement;
    
    addEvent(_body, "click", function(event) {
        var event = event ? event : window.event;
        var target = event.srcElement ? event.srcElement : event.target;
        if (target.getAttribute('data-track')){
            doMonitorForDataTrack(target);
        } else if (target.nodeName == "IMG" && target.parentNode.getAttribute('data-track')) {
            doMonitorForDataTrack(target.parentNode);
        }
    });

})();</code>

Browse the track, click the button to write to mongo on the server, and the form js monitors the dom

These statistics stored in cookies are generally just some ID values ​​used to identify users. The user's operation record data should be sent to the statistics server immediately. There is no need to save it locally before sending it. The amount of this type of data is very small and will not cause congestion. As for how to send it, most of them use what you understand to simply load a picture and pass the data up through parameters.

"When the web page is closed, it will be sent to the server." This is a problem. When the browser is closed, your JS will basically be unable to do anything.