最前端｜Plausible 帮你实现页面埋点，轻松追踪用户行为

本期摘要

随着公司自研产品的不断发展，对前端页面的监控和分析变得越发重要。准确了解用户在产品上的行为和操作，以及发现潜在的性能问题或用户体验瓶颈，对于产品的持续优化和用户满意度的提升至关重要。

然而，要实现全面的前端监控并分析这些数据是一项复杂的任务，我们需要采用专业的工具和方法。本篇文章为大家带来：使用 Plausible 实现页面埋点

 作者 

匿名 |高级前端开发工程师

//监控指标

在前端页面埋点中，常见的监控指标有：

• 页面浏览量：PV（Page View）

  
  

• 用户活跃度：UV（Unique Visitor）

  
  

• 用户停留时长

  
  

• 页面跳转和流量来源

  
  

• 特定功能使用情况

  
  

• 地理位置

  
  

• 访问设备和浏览器信息

以上只是前端埋点中的一些常见监控指标，实际上我们还可以根据业务需求和目标对指标进行定制。

我们可以使用 Plausible 作为技术解决方案，Plausible Analytics 是一个简单、开源、轻量级（< 1 KB）且注重隐私的 Google Analytics 替代方案。Plausible 被超过 10,000 名付费订阅用户信任，用于提供网站和业务洞察。

//如何集成 Plausible ？

为了保证用户在使用公司产品过程中产生的行为数据的安全性，我们使用了私有化部署 Plausible 的方式作为页面埋点和数据分析的解决方案，集成步骤大致有：

1. 在服务器上安装和配置 Plausible 服务器（后端完成）

   
   

2. 注册账号并配置要监控的网站域名

   
   

3. 在前端页面中集成 Plausible 的前端脚本，用于自动向服务器发送事件，并为手动发送事件提供支持，了解更多请查看 Add the script to your website在新窗口打开

   
   

4. 配置前端脚本，指定 Plausible 服务器地址以及当前网站的站点 ID（通常为网站域名）

完成以上步骤后，发布前端应用，并查看 Plausible Dashboard，此时 Plausible 会自动发送页面访问事件并分析数据：

//如何监控特定功能使用情况？

如果需要监控特定功能使用情况，可以参考 Custom event goals（https://plausible.io/docs/custom-event-goals）发送自定义事件：

<button className={`plausible-event-name={MyEventName}`}></button>
// 或者
<button className={`plausible-event-name--{MyEventName}`}></button>

什么是 MyEventName?

以上代码中的 {MyEventName} 是在 Plausible Dashboard 上配置的 Custom Event Goal，以下图为例，{MyEventName} 为 Signup：

再次发布前端应用，并查看 Plausible Dashboard，下方会多出一个 Goal Conversions 面板：

//如何向自定义事件传递参数？

Plausible 还支持在触发自定义事件时传入自定义的参数，从而进一步对 Custom Event Goal 进行拆解，你可以使用自定义参数来创建自定义指标，以收集和分析 Plausible 不会自动跟踪的数据，更多请查看 Attach custom properties to custom events (https://plausible.io/docs/custom-props/for-custom-events）

大致步骤为：

1. 移除上一步为按钮元素添加的 CSS Class，不再自动发送自定义事件

   
   

2. 使用 plausible API 手动发送事件，第一个参数为事件名，第二个参数中的 props 属性为自定义参数：

plausible('Download', { props: { method: 'HTTP', position: 'footer' } })

完成后，再次查看 Plausible Dashboard，点击 Goal Conversions 中的一个 Goal，可以看到进一步拆解的统计数据：

- END -

往期精选