1. 程式人生 > >js記錄使用者在網站的瀏覽記錄和停留時間

js記錄使用者在網站的瀏覽記錄和停留時間

問題

公司想統計一個使用者從進入官網到註冊,這個流程該使用者整個的瀏覽路線,在哪個頁面停留的時間比較長,從而更有針對性的對客戶行為進行分析,瞭解使用者的真正需求。。。

雖然百度統計之類的也可以記錄使用者的瀏覽行為,但是這類統計是全部跟蹤使用者,而無法精確的跟蹤到註冊的使用者之前一系列的行為,而我們只需要針對註冊使用者進行有目的性的行為分析。。。

解決問題所使用的知識(可以跳過直接看下面的解決方案)

1、setInterval

setInterval() 方法可按照指定的週期(以毫秒計)來呼叫函式或計算表示式。

setInterval(code,millisec[,"lang"
])
  • code 必需。要呼叫的函式或要執行的程式碼串。
  • millisec 必須。週期性執行或呼叫 code 之間的時間間隔,以毫秒計。
  • lang 可選。 JScript | VBScript | JavaScript

2、localStorage

HTML5 提供的客戶端儲存資料的新方法,localStorage 沒有時間限制的資料儲存。

之前,這些都是由 cookie 完成的。但是 cookie 不適合大量資料的儲存,因為它們由每個對伺服器的請求來傳遞,這使得 cookie速度很慢而且效率也不高。對於不同的網站,資料儲存於不同的區域,並且一個網站只能訪問其自身的資料。

  • 儲存資料方法
var arr = [0, 1, 2, 3];
localStorage.setItem("num", arr);
  • 讀取資料方法
localStorage.getItem("num");

weber.pub

3、onbeforeunload

onbeforeunload 事件在即將離開當前頁面(重新整理或關閉)時觸發。
該事件可用於彈出對話方塊,提示使用者是繼續瀏覽頁面還是離開當前頁面。

另外
- 頁面載入時只執行onload
- 頁面關閉時先執行onbeforeunload,最後onunload
- 頁面重新整理時先執行onbeforeunload,然後onunload

,最後onload

4、eval()

eval() 函式可計算某個字串,並執行其中的的 JavaScript 程式碼。

這裡我使用eval() 來解析JSON字串。

var dataObj=eval("("+data+")");//轉換為json物件 

eval這裡要新增"("+data+")" 一對小括號,原因在於:eval本身的問題。 由於json是以{}的方式來開始以及結束的,在JS中,它會被當成一個語句塊來處理,所以必須強制性的將它轉換成一種表示式。

加上圓括號的目的是迫使eval函式在處理JavaScript程式碼的時候強制將括號內的表示式(expression)轉化為物件,而不是作為語句(statement)來執行。

var weber = '[{"url":"weber","name":"web開發者","time":"160902"},{"url":"weber","name":"canglingyue","time":"160823"}]';
var eWeber = eval('(' + weber + ')');
console.log(eWeber);

weber.pub

5、JSON.stringify

JSON.stringify()JavaScript值轉換為JavaScript物件表示法 (Json) 字串(詳細解釋可參照

6、referrer

refer 是用來獲取使用者來路url 就是告訴人家我是從哪個頁面過來的,可以用於統計訪問本網站的使用者來源,也可以用來防盜鏈。

function getReferrer() {
    var referrer = '';
    try {
        referrer = window.top.document.referrer;
    } catch(e) {
        if(window.parent) {
            try {
                referrer = window.parent.document.referrer;
            } catch(e2) {
                referrer = '';
            }
        }
    }
    if(referrer === '') {
        referrer = document.referrer;
    }
    return referrer;
}

解決方案

原來是想使用 cookie 來記錄,但是考慮到 cookie 所能記錄的資料最大為 4k ,可能不夠用,於是使用了 HTML5localStorage (最大資料 5M )來儲存( IE8 以上瀏覽器支援)。這裡使用到了 jquery.cookie 的外掛,所以頁面要引入 jqueryjquery.cookie

程式碼分段解析

var second = 0;
window.setInterval(function () {
    second ++;
}, 1000); 

當用戶進入頁面我們就會啟動一個定時器,這個定時器可以記錄使用者在該頁面瀏覽時間

var tjArr = localStorage.getItem("jsArr") ? localStorage.getItem("jsArr") : '[{}]';
$.cookie('tjRefer', getReferrer() ,{expires:1,path:'/'});

定義儲存資料的變數 tjArr ,如果已經存到 localStorage 則從中讀取,沒有這初始化資料。

獲取使用者的 refer 資訊,並存入 cookie 之中(後面解決頁面重新整理問題會使用到)。

var dataArr = {
    'url' : location.href,
    'time' : second,
    'refer' : getReferrer(),
    'timeIn' : Date.parse(new Date()),
    'timeOut' : Date.parse(new Date()) + (second * 1000)
};

定義一個JSON用來儲存使用者瀏覽資料,使用者訪問頁面url、使用者頁面停留時間、使用者來源頁面、使用者進入頁面時間、使用者離開頁面時間。

tjArr = eval('(' + tjArr + ')');
tjArr.push(dataArr);
tjArr= JSON.stringify(tjArr);
localStorage.setItem("jsArr", tjArr);

資料解析和儲存過程

使用者重新整理頁面問題的解決

if($.cookie('tjRefer') == ''){
    var tjT = eval('(' + localStorage.getItem("jsArr") + ')');
    if(tjT){
        tjT[tjT.length-1].time += second;
        var jsArr= JSON.stringify(tjT);
        localStorage.setItem("jsArr", jsArr);
    }
} 

使用者重新整理頁面會導致我們的定時器重置,也就是說如果我們不處理的話,會再次記錄這個頁面的瀏覽記錄(這是我們不希望看到的),於是我就想到 用重新整理頁面時 refer 資訊為空來作為判斷,我們去讀取存到 cookie 中的 refer 資訊作為判斷條件。

如果使用者重新整理頁面,我們就取出 最後一次 存入 localStorage 中的時間和本次的瀏覽時間相加,然後在更新最後一次存入的 localStorage 中。

整體程式碼的展示

var second = 0;
window.setInterval(function () {
    second ++;
}, 1000);
var tjArr = localStorage.getItem("jsArr") ? localStorage.getItem("jsArr") : '[{}]';
$.cookie('tjRefer', getReferrer() ,{expires:1,path:'/'});
window.onbeforeunload = function() {
    if($.cookie('tjRefer') == ''){
        var tjT = eval('(' + localStorage.getItem("jsArr") + ')');
        if(tjT){
            tjT[tjT.length-1].time += second;
            var jsArr= JSON.stringify(tjT);
            localStorage.setItem("jsArr", jsArr);
        }
    } else {
        var tjArr = localStorage.getItem("jsArr") ? localStorage.getItem("jsArr") : '[{}]';
        var dataArr = {
            'url' : location.href,
            'time' : second,
            'refer' : getReferrer(),
            'timeIn' : Date.parse(new Date()),
            'timeOut' : Date.parse(new Date()) + (second * 1000)
        };
        tjArr = eval('(' + tjArr + ')');
        tjArr.push(dataArr);
        tjArr= JSON.stringify(tjArr);
        localStorage.setItem("jsArr", tjArr);
    }
};
function getReferrer() {
    var referrer = '';
    try {
        referrer = window.top.document.referrer;
    } catch(e) {
        if(window.parent) {
            try {
                referrer = window.parent.document.referrer;
            } catch(e2) {
                referrer = '';
            }
        }
    }
    if(referrer === '') {
        referrer = document.referrer;
    }
    return referrer;
}