javascript - 網站拿到使用者的瀏覽軌跡，按鈕點擊，表單填寫相關行為資料的比較好的方式是什麼？

這是今天面試的一道面試題，自己想到的比較簡單的是透過 cookie 記錄使用者的相關數據，然後當網頁關閉的時候再發送會服務端。

網上搜了下 百度統計， GA 的相關資料，貌似也是通過 cookie 記錄相關信息，保存數據是通過請求一張圖片然後帶上不同的參數來實現的。

不知道大家有沒有其他的好方法。

回覆內容：

這是今天面試的一道面試題，自己想到的比較簡單的是透過 cookie 記錄使用者的相關數據，然後當網頁關閉的時候再發送會服務端。

網上搜了下 百度統計， GA 的相關資料，貌似也是通過 cookie 記錄相關信息，保存數據是通過請求一張圖片然後帶上不同的參數來實現的。

不知道大家有沒有其他的好方法。

我不多說了，你自己意會

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

瀏覽軌跡，按鈕點選可以再服務端寫到mongo裡頭,表單js監聽dom了

這些個統計存在Cookie裡面的一般只是一些用來辨識使用者的ID值吧。使用者的操作記錄資料應該是立刻送到統計伺服器上去的，沒必要在本地保存一下再發送，這類的資料量很少，不會造成壅塞。至於怎麼發送過去，大部分都是採用你所理解的簡單的加載一個圖片，透過參數把資料傳上去。

“當網頁關閉的時候再發送會服務端”，這個是有問題額，瀏覽器關閉的時候你的JS基本上沒法任何事情了。