web前端如何统计真人流量（忽略搜索引擎和爬虫）

如何精确统计真人流量，忽略搜索引擎、忽略爬虫？

一般来说，现在的搜索引擎和爬虫都会执行javascript，可以抓取执行js之后的结果，但是搜索引擎和爬虫只是快速抓取网页内容，抓完后立即关掉了网页。而真人流量有一定的浏览时长，不会一秒之内就看完，看的过程中还会滚动鼠标（或者滑动手机浏览器屏幕）。

所以，基于上面的规律，我们制定了以下两条策略，同时满足才向后台发送统计信息。

1、打开网页先等1.5秒
2、检测鼠标滚动或者触摸屏触摸

下面是一个示例javascript程序：

//设置全局标志，刚加载网页是为false
var visit_flag = false;

//定义一个只执行一次的计数函数，修改全局标志，移除鼠标和触摸屏检测，向服务端发送用户当前浏览的信息
function visit_cnt(){
    if(visit_flag == false){
        //修改全局标志，只统计一次
        visit_flag = true;

        //移除鼠标和触摸检测功能，保证只触发一次
        window.removeEventListener("scroll", visit_cnt);
        window.removeEventListener("touchstart", visit_cnt);
        
        //获取用户浏览页面的信息
        var cur_url = window.location.href; //当前网址
        var cur_title = document.title; //当前网页标题
        var cur_agent = navigator.userAgent; //浏览器信息
        var cur_ref = document.referrer; //跳转来源

        //通过XMLHttpRequest把收集的信息发送至服务器后台
        let myxhr = new XMLHttpRequest();
        myxhr.open('POST', '/url_inc_handle', true);
        myxhr.setRequestHeader(
            'Content-Type',
            'application/x-www-form-urlencoded'
        );
        myxhr.responseType = 'json';
        myxhr.onreadystatechange = function() {
            if(myxhr.readyState === 4 && myxhr.status === 200){
                //console.log(myxhr.response);
            }
        }
        var post_string = 'url=' + cur_url + '&title=' + cur_title + '&agent=' + cur_agent + '&ref=' + cur_ref;
        myxhr.send(post_string);
    }
}

//定义一个函数，开启检测鼠标和触摸屏，如果鼠标或者触摸屏有动作就执行上面的计数函数
function add_scroll_touch_listener(){
    window.addEventListener("scroll", visit_cnt);
    window.addEventListener("touchstart", visit_cnt);
}

//网页加载后1.5秒再开启鼠标和触摸屏检测
setTimeout(add_scroll_touch_listener, 1500);

经过实测，本示例程序有不错的过滤效果。