百度统计的相关知识和代码展示

ゝ一世哀愁。 2022-12-16 04:59 227阅读 0赞

" class="reference-link">watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d0bDE5OTI_size_16_color_FFFFFF_t_70

1、PV（page view）

即页面浏览量，通常是衡量一个网络新闻频道或网站甚至一条网络新闻的主要指标。户每一次对网站中的每个页面访问均被记录 1 次。用户对同一页面的多次刷新，访问量累计。

  1. window.addEventListener("beforeunload",function (){
  2.     let refreshCount = window.parseInt(window.localStorage.getItem("refreshCount"));
  3.     if (window.localStorage.getItem("refreshCount") == null) {
  4.         window.localStorage.setItem("refreshCount",0);
  5.     }
  6.     else{
  7.         window.localStorage.setItem("refreshCount",refreshCount + 1);
  8.     }
  9. },false);

2、打开时间和关闭时间（这样就能计算出停留时间）

  1. window.addEventListener("DOMContentLoaded",function (){
  2.     //服务器会给统计的html页面发送一个uuid（一个完整性的id）
  3.     let uuid;
  4.     //发送一个开始事件
  5.     $.ajax({
  7.     })
  8.     //服务器端会记录收到加载完的开始时间（用户在该页面的打开时间）
  9. },false);
  10. window.addEventListener("unload",function (){
  11.     //服务器会给统计的html页面发送的uuid（一个完整性的id，类似于session）
  12.     let uuid;
  13.     //发送一个结束事件
  14.     $.ajax(
  16.     )
  17.     //服务器端会记录收到加载完的时间（用户在该页面的关闭时间）
  18. },false);

3、ip地址、归属地和网络服务商

服务器会计算出js发送的请求的ip、归属地和网络服务商。

4、计算机操作系统

  1. let os = navigator.platform;
  2.     let userAgent = navigator.userAgent;
  3.     let info = "";
  4.     //判断操作系统  
  5.     if (os.indexOf("Win") > -1) {
  6.         if (userAgent.indexOf("Windows NT 5.0") > -1) {
  7.             info += "Win2000";
  8.         } else if (userAgent.indexOf("Windows NT 5.1") > -1) {
  9.             info += "WinXP";
  10.         } else if (userAgent.indexOf("Windows NT 5.2") > -1) {
  11.             info += "Win2003";
  12.         } else if (userAgent.indexOf("Windows NT 6.0") > -1) {
  13.             info += "WindowsVista";
  14.         } else if (userAgent.indexOf("Windows NT 6.1") > -1 || userAgent.indexOf("Windows 7") > -1) {
  15.             info += "Win7";
  16.         } else if (userAgent.indexOf("Windows NT 6.2") > -1 || userAgent.indexOf("Windows 8") > -1) {
  17.             info += "Win8";
  18.         } else if (userAgent.indexOf("Windows NT 6.3") > -1 || userAgent.indexOf("Windows 8.1") > -1) {
  19.             info += "Win8.1";
  20.         } else if (userAgent.indexOf("Windows NT 10.0") > -1 || userAgent.indexOf("Windows 10") > -1) {
  21.             info += "Win10";
  22.         }
  23.         else {
  24.             info += "Other";
  25.         }
  26.     } else if (os.indexOf("Mac") > -1) {
  27.         info += "Mac";
  28.     } else if (os.indexOf("X11") > -1) {
  29.         info += "Unix";
  30.     } else if (os.indexOf("Linux") > -1) {
  31.         info += "Linux";
  32.     } else {
  33.         info += "Other";
  34.     }

5、可见性

  1. document.addEventListener('visibilitychange',  function (event) {
  2.     console.log(document.hidden, document.visibilityState)
  3. })

6、浏览器类型

  1. let document = window.document,
  2.     navigator = window.navigator,
  3.     agent = navigator.userAgent.toLowerCase(),
  4.     //IE8+支持.返回浏览器渲染当前文档所用的模式
  5.     //IE6,IE7:undefined.IE8:8(兼容模式返回7).IE9:9(兼容模式返回7||8)
  6.     //IE10:10(兼容模式7||8||9)
  7.     IEMode = document.documentMode,
  8.     //chorme
  9.     chrome = window.chrome || false,
  10.     System = {
  11.         //user-agent
  12.         agent : agent,
  13.         //是否为IE
  14.         isIE : /msie/.test(agent),
  15.         //Gecko内核
  16.         isGecko: agent.indexOf("gecko")>0 && agent.indexOf("like gecko")<0,
  17.         //webkit内核
  18.         isWebkit: agent.indexOf("webkit")>0,
  19.         //是否为标准模式
  20.         isStrict: document.compatMode === "CSS1Compat",
  21.         //是否支持subtitle
  22.         supportSubTitle:function(){
  23.             return "track" in document.createElement("track");
  24.         },
  25.         //是否支持scoped
  26.         supportScope:function(){
  27.             return "scoped" in document.createElement("style");
  28.         },
  29.         //获取IE的版本号
  30.         ieVersion:function(){
  31.             try {
  32.                 return agent.match(/msie ([\d.]+)/)[1] || 0;
  33.             } catch(e) {
  34.                 console.log("error");
  35.                 return IEMode;
  36.             }
  37.         },
  38.         //Opera版本号
  39.         operaVersion:function(){
  40.             try {
  41.                 if(window.opera) {
  42.                     return agent.match(/opera.([\d.]+)/)[1];
  43.                 } else if(agent.indexOf("opr") > 0) {
  44.                     return agent.match(/opr\/([\d.]+)/)[1];
  45.                 }
  46.             } catch(e) {
  47.                 console.log("error");
  48.                 return 0;
  49.             }
  50.         },
  51.         //描述:version过滤.如31.0.252.152 只保留31.0
  52.         versionFilter:function(){
  53.             if(arguments.length === 1 && typeof arguments[0] === "string") {
  54.                 let version = arguments[0];
  55.                 start = version.indexOf(".");
  56.                 if(start>0){
  57.                     end = version.indexOf(".",start+1);
  58.                     if(end !== -1) {
  59.                         return version.substr(0,end);
  60.                     }
  61.                 }
  62.                 return version;
  63.             } else if(arguments.length === 1) {
  64.                 return arguments[0];
  65.             }
  66.             return 0;
  67.         }
  68.     };
  70. try {
  71.     //浏览器类型(IE、Opera、Chrome、Safari、Firefox)
  72.     System.type = System.isIE?"IE":
  73.         window.opera || (agent.indexOf("opr") > 0)?"Opera":
  74.             (agent.indexOf("chrome")>0)?"Chrome":
  75.                 //safari也提供了专门的判定方式
  76.                 window.openDatabase?"Safari":
  77.                     (agent.indexOf("firefox")>0)?"Firefox":
  78.                         'unknow';
  80.     //版本号
  81.     System.version = (System.type === "IE")?System.ieVersion():
  82.         (System.type === "Firefox")?agent.match(/firefox\/([\d.]+)/)[1]:
  83.             (System.type === "Chrome")?agent.match(/chrome\/([\d.]+)/)[1]:
  84.                 (System.type === "Opera")?System.operaVersion():
  85.                     (System.type === "Safari")?agent.match(/version\/([\d.]+)/)[1]:
  86.                         "0";
  88.     //浏览器外壳
  89.     System.shell=function(){
  90.         //遨游浏览器
  91.         if(agent.indexOf("maxthon") > 0) {
  92.             System.version = agent.match(/maxthon\/([\d.]+)/)[1] || System.version ;
  93.             return "傲游浏览器";
  94.         }
  95.         //QQ浏览器
  96.         if(agent.indexOf("qqbrowser") > 0) {
  97.             System.version = agent.match(/qqbrowser\/([\d.]+)/)[1] || System.version ;
  98.             return "QQ浏览器";
  99.         }
  101.         //搜狗浏览器
  102.         if( agent.indexOf("se 2.x")>0) {
  103.             return '搜狗浏览器';
  104.         }
  106.         //Chrome:也可以使用window.chrome && window.chrome.webstore判断
  107.         if(chrome && System.type !== "Opera") {
  108.             let external = window.external,
  109.                 clientInfo = window.clientInformation,
  110.                 //客户端语言:zh-cn,zh.360下面会返回undefined
  111.                 clientLanguage = clientInfo.languages;
  113.             //猎豹浏览器:或者agent.indexOf("lbbrowser")>0
  114.             if( external && 'LiebaoGetVersion' in external) {
  115.                 return '猎豹浏览器';
  116.             }
  117.             //百度浏览器
  118.             if (agent.indexOf("bidubrowser")>0) {
  119.                 System.version = agent.match(/bidubrowser\/([\d.]+)/)[1] ||
  120.                     agent.match(/chrome\/([\d.]+)/)[1];
  121.                 return "百度浏览器";
  122.             }
  123.             //360极速浏览器和360安全浏览器
  124.             if( System.supportSubTitle() && typeof clientLanguage === "undefined") {
  125.                 //object.key()返回一个数组.包含可枚举属性和方法名称
  126.                 let storeKeyLen = Object.keys(chrome.webstore).length,
  127.                     v8Locale = "v8Locale" in window;
  128.                 return storeKeyLen > 1? '360极速浏览器':'360安全浏览器';
  129.             }
  130.             return "Chrome";
  131.         }
  132.         return System.type;
  133.     };
  135.     //浏览器名称(如果是壳浏览器,则返回壳名称)
  136.     System.name = System.shell();
  137.     //对版本号进行过滤过处理
  138.     System.version = System.versionFilter(System.version);
  141.     console.dir(System.name);
  142. } catch(e) {
  143.     console.log("error");
  144. }

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d0bDE5OTI_size_16_color_FFFFFF_t_70 1

7、屏幕分辨率和屏幕颜色

  1. window.addEventListener("load",function (){
  2.     let s = "";
  3.     s += " 网页可见区域宽："+ document.body.clientWidth+"\n";
  4.     s += " 网页可见区域高："+ document.body.clientHeight+"\n";
  5.     s += " 网页可见区域宽："+ document.body.offsetWidth + " (包括边线和滚动条的宽)"+"\n";
  6.     s += " 网页可见区域高："+ document.body.offsetHeight + " (包括边线的宽)"+"\n";
  7.     s += " 网页正文全文宽："+ document.body.scrollWidth+"\n";
  8.     s += " 网页正文全文高："+ document.body.scrollHeight+"\n";
  9.     s += " 网页被卷去的高(ff)："+ document.body.scrollTop+"\n";
  10.     s += " 网页被卷去的高(ie)："+ document.documentElement.scrollTop+"\n";
  11.     s += " 网页被卷去的左："+ document.body.scrollLeft+"\n";
  12.     s += " 网页正文部分上："+ window.screenTop+"\n";
  13.     s += " 网页正文部分左："+ window.screenLeft+"\n";
  14.     s += " 屏幕分辨率的高："+ window.screen.height+"\n";
  15.     s += " 屏幕分辨率的宽："+ window.screen.width+"\n";
  16.     s += " 屏幕可用工作区高度："+ window.screen.availHeight+"\n";
  17.     s += " 屏幕可用工作区宽度："+ window.screen.availWidth+"\n";
  18.     s += " 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色"+"\n";
  19.     console.dir(s);
  20. },false);

8、是否支持Cookie，是否支持JAVA

  1. let G = {};
  2. G.cookieEnabled = navigator.cookieEnabled;
  3. G.javaEnabled = navigator.javaEnabled();
  4. G.language = navigator.language || navigator.browserLanguage || navigator.systemLanguage || navigator.userLanguage || "";
  5. G.kc = (window.screen.width || 0) + "x" + (window.screen.height || 0);
  6. G.colorDepth = window.screen.colorDepth || 0;
  7. console.dir(G)

20201018184505531.png

9、网站用的百度统计是怎么统计到访问者年龄的？

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d0bDE5OTI_size_16_color_FFFFFF_t_70 2

首页是有注册用户登录的，这些可以直接获取到。没有登录的，百度可以分析他的搜索习惯来判断的

10、判断新老客户

目前，百度统计、cnzz、Google Analytics 以及其他主流网站监测(分析)系统判断新老访客都是基于 cookie。

1、如果不清理 cookie, 第二天再次访问网站会被记为老访客。

2、关于识别 visitor 的 cookie 生存周期，Google Analytics 是两年 ，也可以根据自己的实际情况进行调整。所以，第 11 天再次访问会被记为老访客。

11、js监听所有的ajax请求

  1. <script type="text/javascript" src="/jss/jquery-3.3.1.min.js"></script>
  2. <script type="text/javascript">
  3.     if ( typeof window.CustomEvent === "function" ) {
  4.         function CustomEvent(event, params) {
  5.             params = params || {bubbles: false, cancelable: false, detail: undefined};
  6.             let evt = document.createEvent('CustomEvent');
  7.             evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
  8.             return evt;
  9.         }
  11.         CustomEvent.prototype = window.Event.prototype;
  12.         window.CustomEvent = CustomEvent;
  13.     }
  14.     function ajaxEventTrigger(event) {
  15.         let ajaxEvent = new CustomEvent(event, { detail: this });
  16.         window.dispatchEvent(ajaxEvent);
  17.     }
  18.     let oldXHR = window.XMLHttpRequest;
  19.     function newXHR() {
  20.         let realXHR = new oldXHR();
  21.         realXHR.addEventListener('abort', function () { ajaxEventTrigger.call(this, 'ajaxAbort'); }, false);
  22.         realXHR.addEventListener('error', function () { ajaxEventTrigger.call(this, 'ajaxError'); }, false);
  23.         realXHR.addEventListener('load', function () { ajaxEventTrigger.call(this, 'ajaxLoad'); }, false);
  24.         realXHR.addEventListener('loadstart', function () { ajaxEventTrigger.call(this, 'ajaxLoadStart'); }, false);
  25.         realXHR.addEventListener('progress', function () { ajaxEventTrigger.call(this, 'ajaxProgress'); }, false);
  26.         realXHR.addEventListener('timeout', function () { ajaxEventTrigger.call(this, 'ajaxTimeout'); }, false);
  27.         realXHR.addEventListener('loadend', function () { ajaxEventTrigger.call(this, 'ajaxLoadEnd'); }, false);
  28.         realXHR.addEventListener('readystatechange', function() { ajaxEventTrigger.call(this, 'ajaxReadyStateChange'); }, false);
  29.         return realXHR;
  30.     }
  31.     window.XMLHttpRequest = newXHR;
  33.     window.addEventListener("ajaxReadyStateChange",function (){
  34.         window.addEventListener('ajaxReadyStateChange', function (e) {
  35.             console.log(e.detail); // XMLHttpRequest Object
  36.         });
  37.     });
  39.     $.ajax({
  40.         type: "GET",
  41.         url: "/test",
  42.         success: function (data) {
  43.             console.dir(data)
  44.         }
  45.     });
  47. </script>

20201024071205748.png

发表评论

表情：
评论列表 （有 0 条评论，227人围观）

还没有评论，来说两句吧...

相关阅读