热门推荐
vue结合百度统计实现事件埋点
2024-11-10 04:12

vue结合百度统计实现事件埋点

最近在和产品经理反复拉扯一个历史遗留问题是否还需要保留的过程中,突然发现一个不可思议的事情。一套使用多年的平台竟然还没有做埋点处理。导致所有的功能实施上线之后,对于用户的事件分析、PV、UV等一些数据基本都是无源的状态,更别说以后还要分析用户画像了。基于目前状态battle已经没用了,赶紧做一套埋点统计的功能是重中之重了,起码以后让产品经理别再埋头苦干(xjbg)了。由于出一套埋点不仅需要后端出接口,还需要出一套页面方便以后查询,感觉这样工期会拉长,故综合考虑利用百度统计进行埋点统计。

本段是在预研过程中了解到的目前市面上的几种埋点方式还有埋点的意义。不敢兴趣可直接跳过此段 此处快进⏩

埋点意义

  1. 了解用户行为,有助于完善用户体验
  2. 有利于产品对新功能有整体预期,方便作出决策
  3. 对已发布产品有容错能力,便于之后修改完善

埋点类型

代码埋点可视化埋点全站埋点描述通过前端记录用户行为上报给服务端进行采集产品运营人员可通过页面可视化圈选,无需开发人员介入也称“全埋点”、“自动埋点”。无需手动设置,自动采集上报场景需要细颗粒度的采集用户行为产品初期页面简单,用户页面交互较少,想要快速配置的场景用于业务多变、经常调整、且分析述求比较轻量的场景优势数据采集更精确相对数据收集更全面开发量较少运营人员可自行配置简单快捷,开发人员相对参与较少 实现周期较短劣势实现周期较长开发人员会有一定工作量只能采集有交互相关数据对业务层面数据相对缺乏了解数据准确对不高采集量过多是可能会影响用户使用体验

以下开始正式介绍网站如何接入百度统计进行事件埋点

一、申请账号

本步骤较为简单可以自行进行注册 🔗链接直达🔗image.png

二、添加站点

  1. 点击使用设置->网站列表->新增网站

image.png

  1. 填写相应的网站信息

image.png

三、安装代码

  1. 代码管理->代码获取

image.png

  1. 以vue项目为例,找到项目目录下的index.html文件,添加复制好的代码
 

四、代码安装检查

代码检查有多种方式,每种方式检查结果会差异。最终只要有一种方式成功即可

  1. 代码管理->代码安装检查
    1. 网站首页image.png
    2. 其他网页:输入网站其他地址进行检测image.png
    3. 手动检测:在浏览器中按F12打开调试模式,选择Network选项,如果找到hm.js?XXXXXX即可image.png

正常情况下会在window下挂载_hmt对象 image.png需要添加埋点的地方(可以是按钮、标签、链接、下载等,调用事件跟踪代码即可

 

参数说明

名称必选/可选类型功能category必选String要监控的目标的类型名称action必选String用户跟网页进行交互的动作名称opt_label可选String事件的一些额外信息opt_value可选Number跟事件相关的数值

举例

 

效果

概括-> 事件分析中就可以查看事件数据。注意:显示数据不会立刻显示需要等待20-30分钟左右

image.png

下面是我简单做了一个自定义指令可以直接用到元素上,旨在想要做的把埋点逻辑和业务代码隔离。可以在指令中直接调取上报接口等操作。指令只做了简单封装能有而已,如遇到bug还请见谅(大家自己看着改吧

注意:前提是百度统计已经安装成功前提下

  1. 在项目下创建directives目录存放trackEvent.js文件
 
  1. 在main.js中注册全局指令
 
  1. 在目标元素上使用
 

重点来了,我突然发现一个很方便的类库,基于友盟统计埋点改造的百度埋点,封装好了官方的api和指令。真的是很方便。推荐使用

具体使用点这里

1. 下载

 

2. 引用

 

3. 安装

 

4. 使用

track-event
 

track-pageview
 

整体下来个人感觉接入百度统计不是很复杂,对于不打算做一套埋点系统的应用使用它还是非常快捷方便的。而且利用百度统计也能展示非常全面的统计数据。不知道大家怎么认为呢

    以上就是本篇文章【vue结合百度统计实现事件埋点】的全部内容了,欢迎阅览 ! 文章地址:http://houdi.cs-ej.cn/quote/607.html 
     行业      资讯      企业新闻      行情      企业黄页      同类资讯      网站地图      返回首页 成事e家移动站 http://houdi.cs-ej.cn/mobile/ , 查看更多