在微信上做一次推廣活動,頁面共計三個按鈕,需要分別統計點擊次數,pc上的相關統計用的是“百度統計”,因為H5活動頁的時效性等原因,并沒有使用百度統計,而是自己實現一個簡單的統計小方案:前端點擊時請求一個空白小gif圖,帶有參數,后端同事根據nginx請求日志做統計,通過在cookie中存入一個不會重疊的時間戳作為key值來區分是否同一用戶(uv)。
請求的圖片存在七牛中,是固定不變的,主要變化是后面兩個參數:用戶標識uid和按鈕標識,其中生成不重復(把重復率降到最低)的用戶標識很有意思。
時間戳用new Date().getTime()得出一個13位的“隨機數”,精確到毫秒,但萬一同一毫秒有兩個以上用戶點擊呢?于是再嚴謹一些,用for循環在隨機一個5位字符串拼接,這樣的重復率絕對夠用:
uid = new Date().getTime();var randomNumber = '';for(var i = 0 ; i < 5 ; i ++){ randomNumber += new String (Math.floor(Math.random() * 10));}uid = uid + randomNumber;
下面是具體邏輯代碼,當網頁中已有請求圖片時,更改url的參數也一樣能從新發起一個get請求,避免每次點擊都append一張圖片。這種實現方法感覺比點擊發送ajax更加方便。
statistics: function(position){ var pic = "http://wx.daigj.com/notification/statistics/p.gif"; var uid = util.readCookie("uid"); var imgLength = $("#statistics-img").length; if(uid){ if(imgLength == 0){ $('body').append('<img id="statistics-img" src="' + pic + '?uid='+ uid + '&position='+ position +'"/>'); }else{ $("#statistics-img").attr("src",pic+"?uid="+uid+"&position="+position); } }else{ uid = new Date().getTime(); var randomNumber = ''; for(var i = 0 ; i < 5 ; i ++){ randomNumber += new String (Math.floor(Math.random() * 10)); } uid = uid + randomNumber; util.createCookie("uid",uid); $('body').append('<img id="statistics-img" src="' + pic + '?uid='+ uid + '&position='+ position +'"/>'); }}
以上就是本文的全部內容,希望本文的內容對大家的學習或者工作能帶來一定的幫助,同時也希望多多支持武林網!
新聞熱點
疑難解答