目录


背景

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

知识科普

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

埋点意义

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

埋点类型

代码埋点可视化埋点全站埋点
描述通过前端记录用户行为上报给服务端进行采集产品运营人员可通过页面可视化圈选，无需开发人员介入也称“全埋点”、“自动埋点”。无需手动设置，自动采集上报
场景需要细颗粒度的采集用户行为产品初期页面简单，用户页面交互较少，想要快速配置的场景用于业务多变、经常调整、且分析述求比较轻量的场景
优势
数据采集更精确
相对数据收集更全面

开发量较少
运营人员可自行配置

简单快捷，开发人员相对参与较少
实现周期较短
劣势
实现周期较长
开发人员会有一定工作量

只能采集有交互相关数据
对业务层面数据相对缺乏了解

数据准确对不高
采集量过多是可能会影响用户使用体验

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

接入流程

一、申请账号

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

二、添加站点

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

image.png

  1. 填写相应的网站信息

image.png

三、安装代码

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

image.png

  1. 以vue项目为例，找到项目目录下的index.html文件，添加复制好的代码
<body>
  <div id="app"></div>
  <!-- built files will be auto injected -->
  <script>
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?XXXXXXXXXXXXXXXXXx"; // 替换成自己的
      var s = document.getElementsByTagName("script")[0]; 
      s.parentNode.insertBefore(hm, s);
    })();
  </script>
</body>

四、代码安装检查

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

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

添加事件监控

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

_hmt.push(['_trackEvent', category, action, opt_label, opt_value]);

参数说明：

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

举例：

<button onclick="_hmt.push(['_trackEvent', 'button','click', '续期']);" type="button">Click Me!</button>

效果：

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

image.png

封装vue的自定义指令

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

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

  1. 在项目下创建directives目录存放trackEvent.js文件
export default function(el, binding, vnode) {
  if (uniqueness(binding)) {
    return
  }

  // 过滤一下可用参数
  let args
  const field = ['category', 'action', 'opt_label', 'opt_value']
  if (typeof binding.value === 'object') {
    const obj = binding.value
    args = field.map(key => {
      return obj[key]
    })
    args = args.filter(item => item !== undefined)
  }

  el.addEventListener(
    'click',
    () => {
      console.log(args)
      if (process.env.NODE_ENV == 'production') {
        window._hmt.push(['_trackEvent', ...args])
      }
    },
    false
  )
}

function uniqueness(binding) {
  if (binding.oldValue !== undefined) {
    return true
  } else {
    return false
  }
}
  1. 在main.js中注册全局指令
import trackEvent from '@/directives/trackEvent'
Vue.directive('trackEvent', trackEvent)
  1. 在目标元素上使用
<el-button
  v-trackk-event="{
  category: 'button',
  action: 'click',
  opt_label: '续期'
  }"
  type="primary"
  size="medium"
  >
     统计
</el-button>

第三方插件

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

具体使用点这里

1. 下载

npm install vue-ba --save

2. 引用

import ba from 'vue-ba'

3. 安装

Vue.use(ba, 'YOUR_SITEID_HERE')

4. 使用

track-event
<button v-track-event.click="'category, action''"></button> // 统计click事件

<button v-track-event="'category, action'"></button> // 统计click事件简写

<input v-track-event.keypress="'category, action'"> // 统计keypress事件

<input v-track-event.someEvent:custom="'category, action'"> // 统计someEvent事件,someEvent是自定义事件

<button v-track-event="'category, action, opt_label, opt_value'"><button> // 以字符串传递参数

<button v-track-event="{category:'event', action:'click'}"></button> // 以对象字面量传递参数

track-pageview
<div v-show="show" v-track-pageview="'/bar'">bar</div> //  跟踪 v-show 绑定元素的虚拟pv

<div v-if="show" v-track-pageview="'/foo'">foo</div> // 跟踪 v-if 绑定元素的虚拟pv

<div v-track-pageview="'/tar'"></div> // 以字符串指定受访页面和来源

<div v-track-pageview="{pageURL:'/zoo''}"></div> // 以对象字面量指定受访页面和来源

总结

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

❤️好了，最好还是感谢铁汁们的耐心阅读，如果本篇文章能对大家有所帮助，还请多多点赞收藏关注，支持一下❤️

# vue.js # 前端 # javascript
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue