javascript - Wie kann eine Website den Browserverlauf, die Klicks auf Schaltflächen und die Verhaltensdaten zum Ausfüllen von Formularen besser abrufen?

Dies ist eine Interviewfrage für das heutige Interview. Die einfachere Sache, die ich mir überlegt habe, war, die relevanten Daten des Benutzers über Cookies aufzuzeichnen und sie dann an den Server zu senden, wenn die Webseite geschlossen wird.

Nach der Suche nach Baidu-Statistiken im Internet scheinen GA-bezogene Informationen auch relevante Informationen über Cookies aufzuzeichnen. Das Speichern von Daten erfolgt durch das Anfordern eines Bildes und das anschließende Einbringen verschiedener Parameter.

Ich weiß nicht, ob Sie andere gute Methoden haben.

Antwortinhalt:

Dies ist eine Interviewfrage für das heutige Interview. Die einfachere Sache, die ich mir überlegt habe, war, die relevanten Daten des Benutzers über Cookies aufzuzeichnen und sie dann an den Server zu senden, wenn die Webseite geschlossen wird.

Nach der Suche nach Baidu-Statistiken im Internet scheinen GA-bezogene Informationen auch relevante Informationen über Cookies aufzuzeichnen. Das Speichern von Daten erfolgt durch das Anfordern eines Bildes und das anschließende Einbringen verschiedener Parameter.

Ich weiß nicht, ob Sie andere gute Methoden haben.

Mehr verrate ich nicht, Sie können es selbst herausfinden

<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>

Durchsuchen Sie den Track, klicken Sie auf die Schaltfläche, um in Mongo auf dem Server zu schreiben, und das Formular js überwacht den Dom

Bei diesen in Cookies gespeicherten Statistiken handelt es sich im Allgemeinen nur um einige ID-Werte, die zur Identifizierung von Benutzern verwendet werden. Die Betriebsaufzeichnungsdaten des Benutzers sollten sofort an den Statistikserver gesendet werden. Es ist nicht erforderlich, sie vor dem Senden lokal zu speichern. Die Menge dieser Daten ist sehr gering und führt nicht zu einer Überlastung. Was das Versenden angeht, verwenden die meisten von ihnen das, was Sie verstehen, um einfach ein Bild zu laden und die Daten über Parameter weiterzuleiten.

„Wenn die Webseite geschlossen wird, wird sie an den Server gesendet.“ Wenn der Browser geschlossen ist, kann Ihr JS grundsätzlich nichts tun.