从零到一教你学会前端埋点

站长

2024年08月01日 16:31 · 阅读数 34

什么是埋点

既然提到埋点，首先我们需要知道什么是埋点，有什么作用，这里就简单介绍一下。前端数据埋点是指在前端页面中通过代码的方式收集用户行为数据和页面性能数据的过程。通过在页面中插入特定的代码，可以实时监控用户在页面上的操作行为，例如点击、滚动、输入等，以及页面加载速度、性能指标等数据。这些数据可以帮助开发人员了解用户行为和页面性能，从而优化用户体验和页面性能。常见的前端数据埋点工具包括Google Analytics、百度统计、友盟统计等。

埋点数据如何收集

既然是要收集数据，那么首先需要思考的事情肯定是如何收集。收集数据的方式有很多，下面我就简单为大家介绍两种较为常见的方式。例子均以点击事件为例，实际项目可按需求进行数据收集。

1、手动上报数据

这是最简单的一种数据上报方式了，直接在点击事件的回调函数中收集我们需要上报的数据即可。

function clickHandler() {
  let params = {
     event: 'click',
     value: ''
  }
}
// 收集需要上报的数据，再通过某种方式进行上报，如发送请求等方式

当然实际项目中不会让你每个埋点上报都去重复写一次逻辑代码，通常情况下是封装好的工具方法，只需要调用方法并传递需要上报的数据参数即可

/**
 * 手动上报
 * @param {*} params
 */
export function record(params) {
  // 此处只做事例，具体上报方式需要按照不同平台编写代码
  axios.post(url, params)
}

这种方法的优势在于比较简单，只需要在对应的回调函数中添加上报的代码即可；当然也存在一定的缺点，那就是埋点上报代码与常规的业务代码过度耦合，不利于维护。

2、通过给元素添加属性上报

这种方式是通过给元素添加特定的属性，并在全局添加点击事件，利用点击事件的传透，遍历找到触发该事件的元素，判断元素上是否有绑定相关的属性，有则取相关的值进行上报，没有则不进行上报操作。

首先需要为全局添加点击事件，并且事件触发时需要找到对应触发事件的元素，判断是否拥有需要上报的属性

// 获取点击追踪的元素
function getClickTraceElement(target) {
  let ele = target
  let clickTraceAction = ele.getAttribute('click-trace-action')
  while (ele.tagName !== 'BODY' && !clickTraceAction) {
    ele = ele.parentNode
    clickTraceAction = ele.getAttribute('click-trace-action')
  }
  return ele.tagName !== 'BODY' ? ele : null
}

// 全局添加点击事件
document.body.addEventListener(
    'click',
    (event) => {
      // 此方法用于找到触发事件的元素
      let ele = getClickTraceElement(event.target)
      // 如果点击的元素有绑定该属性，则返回元素，否则返回null
      if (ele) {
        // 自定义事件名称，可以自行修改判断
        let traceAction = ele.getAttribute('click-trace-action')
        let traceParams = ele.getAttribute('click-trace-params') || {}

        // 由于绑定的数据通过 JSON.stringfy() 处理成字符串，这里需要转化一下，具体看传递的参数值
        if (typeof traceParams === 'string') {
          traceParams = JSON.parse(traceParams)
        }

        let params = {
          event: traceAction,
          ecommerce: traceParams
        }
        axios.post(url, params)
      }
    },
    false
  )

使用方式

<div
  onClick={handleFullScreen}
  className={classnames(styles['header-icon'], styles['header-unfold'])}
  data-click-trace-action={'click_fullscreen'}
  data-click-trace-params={JSON.stringify({ value: 'fullscreen' })}
 >
 </div>

这种方式相比于第一种方法，会相对复杂一丢丢，但是也不会很复杂，而且不需要在业务代码中再编写埋点相关的代码，与业务代码进行隔离。

当然，实际项目开发中建议两种都预留，可能存在使用组件库无法区分点击内容的情况，这个时候可以使用手动上报的方式进行上报。

上报平台

现在数据收集的方式有了，就需要考虑数据上报的平台，常见的前端数据埋点工具包括Google Analytics、百度统计、友盟统计等，当然也可以使用公司内部的接口或者平台进行上报，这里使用Google Analytics的方式为大家进行介绍。

什么是Google Analytics

Google Analytics是一款由谷歌公司开发的网站分析工具，用于跟踪和报告网站流量。它可以帮助网站所有者了解访问者的行为，包括他们是谁、他们从哪里来、他们在网站上做了什么等等。通过Google Analytics，网站所有者可以更好地了解他们的受众群体，优化网站内容和营销策略，从而提升网站的效果和用户体验。Google Analytics提供了丰富的数据分析功能，包括实时数据、用户行为分析、转化跟踪、流量来源分析等等。它是一款强大的工具，被广泛应用于各种网站和在线营销活动中。

如何使用Google Analytics

既然使用Google Analytics，首先我们肯定需要拥有一个谷歌账号，这里大家需要自行创建。其次，需要知道Google Analytics的入口，这里是使用的两个地址：

Google Tag Manager：tagmanager.google.com/

Analytics：analytics.google.com/

这路简单介绍一下这两个网站的作用：

Google Tag Manager

Google Tag Manager（GTM）是一种标签管理系统，由Google开发和提供。它允许网站管理员在不需要修改网站代码的情况下管理和部署各种跟踪代码、分析代码和营销标签。通过GTM，用户可以轻松地添加、更新和删除标签，而无需依赖开发人员。

GTM的主要功能包括：

标签管理：用户可以在GTM中添加各种标签，如Google Analytics、Facebook像素、AdWords转化跟踪等，以便跟踪网站访问者的行为和转化。
触发器管理：用户可以设置触发器，以确定何时应该触发特定的标签。例如，可以设置一个触发器，当用户点击“购买”按钮时触发Google Analytics的电子商务跟踪代码。
变量管理：用户可以创建变量，以便在标签和触发器中使用。变量可以是静态值，也可以是动态值，如页面URL、点击元素的文本等。
版本控制：GTM提供版本控制功能，用户可以查看和比较不同版本的容器（包含标签、触发器和变量的集合），并回滚到以前的版本。

总的来说，Google Tag Manager可以帮助网站管理员更有效地管理和部署各种跟踪代码，提高网站的数据收集和分析效率。

大白话来说就是：该平台用来收集前端触发的埋点事件，并且可以通过自定义配置触发条件、触发事件回调来实现数据上报，这里使用它来收集数据并上报至Google Analytics

Google Analytics

顾名思义，它就是用来收集、查看、显示数据的一个网站

如何配置Google Tag Manager

从零到一教你学会前端埋点首页如上图，没有创建Accounts之前下面的列表是空的

1、创建一个分类，类似于创建一个文件夹，可以将相同业务的项目分在同一个Account中，点击会进行创建的页面

2、点击可以查看自己拥有的所有Accounts

第一步

我们需要创建一个Account容器

从零到一教你学会前端埋点此处可以自定义名称、国家以及容器所服务的类型，按要求输入内容即可创建

第二步

创建完Account，会出现一个弹窗，将弹窗的内容按要求插入到项目的代码中，第三点可以输入埋点的网址进行测试是否通过

从零到一教你学会前端埋点

将弹窗中的代码插入项目如图所示：

从零到一教你学会前端埋点

此时全局的window上就存在了一个属性dataLayer，而我们需要做的就是将埋点需要的数据push进这个dataLayer数组，他就会找时间帮我们发送请求。

注：该方法并不是每次只发送一个埋点请求，如果同时触发多个埋点，会收集完一起发送，此时只有一个请求但是上报了多个数据

这里我们埋点上报数据只需要将上面讲的两种方式的上报代码进行替换

// 1、手动上报
export function record(params) {
  window.dataLayer.push(params)
}
// 2、DOM节点添加属性上报
document.body.addEventListener(
    'click',
    (event) => {
      // 此方法用于找到触发事件的元素
      let ele = getClickTraceElement(event.target)
      // 如果点击的元素有绑定该属性，则返回元素，否则返回null
      if (ele) {
        // 自定义事件名称，可以自行修改判断
        let traceAction = ele.getAttribute('click-trace-action')
        let traceParams = ele.getAttribute('click-trace-params') || {}

        // 由于绑定的数据通过 JSON.stringfy() 处理成字符串，这里需要转化一下，具体看传递的参数值
        if (typeof traceParams === 'string') {
          traceParams = JSON.parse(traceParams)
        }

        let params = {
          event: traceAction,
          ecommerce: traceParams
        }
        window.dataLayer.push(params)
      }
    },
    false
  )