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

最新推荐文章于 2025-04-04 16:55:42 发布

杨有财~

最新推荐文章于 2025-04-04 16:55:42 发布

阅读量3.6k

点赞数 5

分类专栏： VUE 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/m0_37572422/article/details/129415463

版权

VUE 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了网站接入百度统计进行事件埋点的全过程，包括申请账号、添加站点、安装代码以及事件监控。文章还讨论了埋点的意义和类型，并提供了封装vue自定义指令的方法，以及推荐了一个基于友盟统计改造的百度埋点第三方插件，简化埋点操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景

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

知识科普

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

埋点意义

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

埋点类型

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

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

接入流程

一、申请账号

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

二、添加站点

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

填写相应的网站信息

三、安装代码

代码管理->代码获取

以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. 网站首页
2. 其他网页：输入网站其他地址进行检测
3. 手动检测：在浏览器中按F12打开调试模式，选择Network选项，如果找到hm.js?XXXXXX即可

添加事件监控

正常情况下会在window下挂载_hmt对象

需要添加埋点的地方（可以是按钮、标签、链接、下载等），调用事件跟踪代码即可

_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分钟左右

封装vue的自定义指令

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

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

在项目下创建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
  }
}

在main.js中注册全局指令

import trackEvent from '@/directives/trackEvent'
Vue.directive('trackEvent', trackEvent)

在目标元素上使用

<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> // 以对象字面量指定受访页面和来源