前端埋点pv,uv以及实现思路

   埋点就是在应用或系统中通过特定的流程收集一些信息，用来跟踪项目或系统使用的状况，后续用来进一步优化产品或是提供运营的数据支撑；

目前埋点实现方法可以分为三种类型：

1. 手动埋点
   在需要统计数据的地方插入代码，需要入侵业务代码，优点是数据统计比较精准有效，缺点是不能与业务代码分离，后期需求更新需要同步更新；

2. 无埋点
   无埋点并不是说不需要埋点，而是全部埋点，通过js脚本，收集想要收集的数据。通过定期上传记录文件，配合文件解析，解析出来我们想要的数据，并生成可视化报告供专业人员分析因此实现“无埋点”统计，无需在项目代码中插入，复用性高，无需跟随项目的改动而改动，但是传输数据多，无法定制，可能会增大服务器压力；

3. 可视化埋点
   通常是指用户通过可视化工具快速配置采集节点（圈点），在前端自动解析配置，并根据配置上传埋点数据，能够支持产品运营随时调整埋点，无需再走发版流程，直接把配置结果推入到前端，数据采集流程更简化，也更方便产品的迭代。

本次通过编写埋点sdk的形式来实现数据的收集，类比于百度统计的实现方式，记录一下过程中遇到的问题；首先插入一段代码引入js：

   (function () {
        var ma = document.createElement('script');
        ma.type = 'text/javascript';
        ma.async = true;
        ma.src = "/js/ma1.js";
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(ma, s);
    })();

此处js文件是存在static目录下的。

整体分为三个阶段：
（一）埋点阶段
（二）数据收集阶段
（三）后端处理阶段

可以参考这篇文章的原理分析https://blog.csdn.net/lucky541788/article/details/103795942。

前两个阶段是由前端实现，下面是开发过程中前端遇到的问题及解决办法：

1. 相对于比较特殊的路由页面跳转如nuxt-link，route-link，router.push等，跳转页面js脚本不会重新加载，所以需要在项目的守卫路由中添加一句代码用来执行sdk中的方法，一次来实现页面跳转并收集数据；

2. 页面数据的传递时机，由于需要统计访问时间，所以在beforeunload方法中传到后台，该方法是在页面关闭或跳转之前执行的；

3. 对于唯一设备id可以在sdk引入的时候设置一个cookie值，过期时间设置10年或更久，用来区分用户；

4. 页面如果打开了但是没有访问，在浏览器里访问的是其他的页面，可以使用window的onblur和onfocus方法，页面离开执行onblur，将数据传回后台，进入页面再执行onfocus方法；

5. 对于不同项目的跨域问题，可以通过生成Img标签来进行传参，如
   var img = new Image(1, 1)；
   var src = ‘http://xxxxxx?userName=’ + params;
   img.src = src;

通过上面的问题分析，将数据的传输时间以及如何传输问题基本解决，接下来需要策划传输的每一个数据应该如何使用和应该统计到哪些指标：

1. pv
   即用户浏览量，用户每次打开或者刷新页面该页面pv值就加1，通过后台接收到的数据统计访问该页面的次数；
2. uv
   即独立访客数，一个电脑设备为一个访客，通过设置永久cookie来标识不同的设备，同一访客访问不同页面uv加一，一天内同一设备多次访问同一页面uv只加一；
3. 跳出率
   跳出率=访问一个页面的uv数 / uv总数；
4. 页面平均访问时长
   从页面进入的时候开始计时，到页面刷新或者关闭的时候停止计时，将时间传到后台，再统计页面访问了多少次，把所有时间相加除以次数，即可得到平均访问时间；
5. 访问ip数
   访问页面的局域网ip数，通过document.domain获取，不同的ip访问就加一，一天内同一ip访问多次只加一；
6. 用户访问地址
   通过搜狐的插件获取用户当前所在地及设备ip；
7. 访问来源类型
   来源类型可以分为三类：搜索引擎，外部链接、直接访问；通过document.referrer参数，若为空则是直接访问，再将常见的搜索引擎标识放入一个数组，当document.referrer有值时检索该值中有没有对应的搜索引擎，有来源就是搜索引擎，没有即为外部链接；
8. 页面加载时长
   window.performance.timing对象中的各个时间节点，通过loadEventEnd - fetchStart可以计算出页面加载时长；
9. 浏览器类型
   通过navigator.userAgent参数将访问的浏览器内核进行处理，得到访问的浏览器的名称；
10. 浏览器和系统版本
    navigator.appVersion包含浏览器和系统的版本；
11. 电脑屏幕信息
    window.screen对象中包含设备屏幕宽高，色深，分辨率。
12. 地图热力图
    通过用户地址统计各地区使用人数，在地图上用不同颜色渲染出来。

pv与uv与ip的区别：

    pv统计的是浏览量，即访问了就会加一，uv统计的是不同的访客数，若统一访客多次访问同一页面，则只算一次，而ip数统计的是访问网站的ip数，同一个ip一个网站只记一次；

对于统计页面中的点击事件形成热力图的想法，由于某些页面的响应式开发，布局在不同尺寸下会发生变化，通过埋点sdk统计准确性不高；

结论：通过将js脚本插入到项目中，从中获取用户信息，设备信息，操作信息，浏览器信息等数据，传入后台进行处理，其他业务数据需要在具体的项目中进行代码埋点，多种埋点方式结合起来才能对产品进行更加全面的分析与了解。