2018-06-09  597 views 评论

ASP.NET MVC 使用Javascript记录网站的访客记录详细信息

实际应用过程中,站长希望知道网站的一些访客信息,如最简单的PV、UV、IP等,同时还希望能够获得网站的用户访问页面的来源页面,访问时长,用户访问的IP等等信息,用于判断用户在页面的停留时长,入口页面等等,从而判断用户来源和用户黏度。

1、PV 每次访问或刷新记录+1即可,服务端和前端都能做到

2、UV和IP就要根据客户端的情况做判断了,比如IP和终端设备的判断等等

3、页面来源,后端很难判断上一个页面是什么,因此可以借助JS去获取来源页面

4、访问时长,我们很难直接获得用户访问某个页面的时长,但是我们可以获得用户访问页面的开始时间和结束时间,开始时间 前后端都比较容易获取,结束时间的话有两种方式:

1)前端通过调用JS onbeforeunload 方法,进行对后端的请求,这次请求的时间即跳出时间

2)后端通过Session去记录,如果这样做的话一旦用户多 服务器压力会比较大

本文主要难点其实就在访问市场的获取计算上

针对以上分析,我们决定设计了以下的业务逻辑:

Step1:用户访问页面的时候记录用户的IP、访问页面的时间(即用户请求加载完成页面的时间)

Step2:当用户刷新或跳出页面的时候,请求后端方法,进行日志记录,传递的信息包括  用户的IP、用户的ID、进入之间、跳出时间、来源Url等

因此我们设计了如下的数据结构:

结构中的StoreCode是记录店铺ID的(我项目中实际需求的而定的)

前端JS (获取IP可以使用新浪或百度的 JS API 这里使用的是百度的):

var VisitTime = getNowFormatDate();
var useinfo = document.cookie.split("userInfo=")[1];
var VisitUID;
if (typeof useinfo === "undefined") {
    VisitUID = 0;
} else {
    VisitUID = useinfo.split("=")[1];
}
window.onbeforeunload = function () {
    writeLog();
}
function writeLog()
{
    var JumpTime = getNowFormatDate();
    var StoreCode = $("#storeCode").val();
    var ClientIP = returnCitySN.cip;
    var VisitUri = window.location.href;
    var ReferrerUri = "";
    if (document.referrer.length > 0) {
        ReferrerUri = document.referrer;
    }
    var userAgent = navigator.userAgent.toLowerCase();
    if (userAgent.indexOf("msie") > -1) {
        $.ajax({
            url: "@Url.StaticFile("/StoreLog/Insert")",
            type: "Post",
            crossDomain:true,
            async: false,
            data: { StoreCode: StoreCode, VisitTime: VisitTime, JumpTime: JumpTime, ClientIP: ClientIP, VisitUri: VisitUri, ReferrerUri: ReferrerUri, VisitUID: VisitUID },
            dataType: "jsonp",
            beforeSend: function () {
            },
            success: function (data) {
            }
        });
    }
    else {
        $.ajax({
            url: "后端地址",
            type: "Post",
            async: false,
            data: { StoreCode: StoreCode, VisitTime: VisitTime, JumpTime: JumpTime, ClientIP: ClientIP, VisitUri: VisitUri, ReferrerUri: ReferrerUri, VisitUID: VisitUID },
            beforeSend: function () {
            },
            success: function (data) {
            }
        });
    }
}
//获取当前时间
function getNowFormatDate() {
    var date = new Date();
    var seperator1 = "-";
    var seperator2 = ":";
    var month = date.getMonth() + 1;
    var strDate = date.getDate();
    if (month >= 1 && month <= 9) {
        month = "0" + month;
    }
    if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
    }
    var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
            + " " + date.getHours() + seperator2 + date.getMinutes()
            + seperator2 + date.getSeconds();
    return currentdate;
}

后端代码:

/// <summary>
/// 新增日志
/// </summary>
/// <param name="entity"></param>
/// <returns></returns>
[HttpPost]
public ActionResult Insert(StoreLogs entity)
{
    TimeSpan ti =entity.JumpTime-entity.VisitTime;
    entity.ContinuedTime = ti.Seconds;
    return Json(_storeLogService.Insert(entity));
}

StoreLogs是接收前端数据的一个数据格式类:

    /// <summary>
    /// 主键ID
    /// </summary>
    public long LogId { get; set; }
    /// <summary>
    /// 店家ID
    /// </summary>
    public long StoreCode { get; set; }
    /// <summary>
    /// 访问IP
    /// </summary>
    public string ClientIP { get; set; }
    /// <summary>
    /// 用户ID 未登录则为0
    /// </summary>
    public long VisitUID     { get; set; }
    /// <summary>
    /// 访问时间
    /// </summary>
    public DateTime VisitTime { get; set; }
    /// <summary>
    /// 跳出时间
    /// </summary>
    public DateTime JumpTime { get; set; }
    /// <summary>
    /// 地址
    /// </summary>
    public string VisitUri { get; set; }
    /// <summary>
    /// 访问间隔秒
    /// </summary>
    public long ContinuedTime { get; set; }
    /// <summary>
    /// 来源Url
    /// </summary>
    public string ReferrerUri { get; set; }
    /// <summary>
    /// 创建时间
    /// </summary>
    public TimeSpan CreateTime { get; set; }

}

结果:

技术无边界,这里是落雨小编,每天分享ASP.NET小知识,希望大家能够喜欢!

 

给我留言

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: