5个步骤 ，学懂PC站和H5站数据埋点

这篇文章抛开数据增长方法和埋点技术原理的大道理，手把手带着大家做一遍从0-1的数据埋点，花10分钟时间，学会如何走出第一步。

一年前，我写了一篇 《7个步骤，学会APP客户端数据埋点》的文章在网络上获得了10w+的阅读量，帮助了很多新人快速完成埋点需求。后来一直有同学反馈和咨询，大家在工作中除了接触和负责APP客户端的产品外，还有大量同学在负责PC网站和H5站的产品。

那么PC网站和H5站的产品埋点又怎么能快速搞定呢？

如果你遇到了下面这些问题的话，我们继续往下看，跟我做。

领导说，咱们的pc和H5网站需要加一下统计，你负责搞定；

研发说，咱们的pc网站的数据统计系统用哪家的？你选好了注册一下；

研发说，咱们的H5网站的统计代码你发我一下，发一个统计需求的邮件给我；

运营说，咱们的pc网站都能看哪些数据？平台在哪？怎么查首页的UV PV？

运营说，咱们网站想做SEO搜索引擎优化，想看看每天的来源和关键词，发我一下。

这篇文章抛开数据增长方法和埋点技术原理，手把手带着大家做一遍从0-1的数据埋点，我们花10分钟时间，学会如何走出第一步。

我们分五个部分来谈：

一、什么是数据埋点

二、网页埋点和APP埋点的区别

三、IP PV UV Cookie是什么

四、PC站和H5站从0-1完成埋点

五、埋点后在哪看数，能看到什么数据

一、什么是数据埋点？

埋点是网站和APP等产品进行日常改进及数据分析的数据采集基础，我们主要用来采集用户行为数据（例如：页面访问路径，点击了哪一个按钮）进行数据分析，从而让运营同学更加合理的安排运营计划让产品经理更好的优化产品路径。现在市面上有很多第三方埋点服务商，百度统计、友盟、growingIO 等。

一个网站上线,开发者除了保证网站功能正常，体验优好之外，还有一项重要的工作是数据收集——通过收集用户的行为数据可以帮助了解网站的功能是否满足用户的需求，导流方式是否有效，新功能上线后是否效果是否达到设计初衷。根据数据指引有效优化产品体验，以及发现新的产品方向是产品经理的必备技能，而如何采集准确并且足够的网站数据则应该是开发者的责任。

目前常见的数据埋点手段：

（1）手动埋点

手动代码埋点比较常见，需要调用埋点的业务方在需要采集数据的地方调用埋点的方法。

优点是流量可控，业务方可以根据需要在任意地点任意场景进行数据采集，采集信息也完全由业务方来控制。

这样的有点也带来了一些弊端，需要业务方来写死方法，如果采集方案变了，业务方也需要重新修改代码，重新发布。

（2）可视化埋点

可是化埋点是近今年的埋点趋势，很多大厂自己的数据埋点部门也都开始做这块。优点是业务方工作量少，缺点则是技术上推广和实现起来有点难（业务方前端代码规范是个大前提）。

阿里的活动页很多都是运营通过可视化的界面拖拽配置实现，这些活动控件元素都带有唯一标识。通过埋点配置后台，将元素与要采集事件关联起来，可以自动生成埋点代码嵌入到页面中。

（3）无埋点

无埋点则是前端自动采集全部事件，上报埋点数据，由后端来过滤和计算出有用的数据。优点是前端只要加载埋点脚本，缺点是流量和采集的数据过于庞大，服务器性能压力山大，主流的 GrowingIO 就是这种实现方案。

我们目前自己的网站用的还是第一种。后面两种是近年出现的，数据准确性和普及型还需要验证，所以我们今天就聊最通用的埋点形式。

二、网页埋点和APP埋点的区别

如今大家都更多的关注APP的产品设计，所以对APP的数据分析也提的比较多，但是网站也是需要进行数据分析和埋点的。而且目前H5大行其道，很多公司都是采取H5网页的形式进行产品承载，H5网站从技术原理来看，他还是HTML代码形式编写的，所以埋点的话也和APP的实现方式是不一样。

简单说，想看数，先埋点。先通过数据统计系统把统计代码或代码包拿到，然后加在你的页面代码或者集成到APP代码包里，然后就可以看到相应的用户行为数据。

从埋点这件事来看，简单理解，最大的的区别就是统计的平台不一样。

目前第三方的数据采集和分析产品有很多，如：google Analytics、百度统计、友盟+、GrowingIO、百度移动统计等。