前端埋点实践-CSDN博客

本文链接：https://blog.csdn.net/yxlyttyxlytt/article/details/127225627

埋点步骤

引入埋点js文件

在index.html文件中引入

<script>
    (function(win, export_obj) {
      win['TeaAnalyticsObject'] = export_obj;
      if (!win[export_obj]) {
        function _collect() {
          _collect.q.push(arguments);
        }
        _collect.q = _collect.q || [];
        win[export_obj] = _collect;
      }
      win[export_obj].l = +new Date();
    })(window, 'collectEvent');
</script>
  
<script
    async
    src="https://sf1-scmcdn-tos.pstatp.com/goofy/log-sdk/collect/collect-autotrack- 
    rangers.js">
</script>

初始化埋点

在main文件中

window.collectEvent('init', {
  // 该id为悠米的 需要跟产品沟通换成自己项目中的app_id
    app_id: 358550,//  必须替换成申请的 app_id  
    channel: 'cn', //数据发送地址，默认国内
    log: true, // 开启调试日志
    enable_ab_test: true, // boolean类型，是否开启A/B实验功能
    autotrack: false // 开启全埋点采集，默认关闭，需要热力图及圈选功能可开启
});
 
// 此处可添加设置uuid、设置公共属性等代码
window.collectEvent('start'); // 通知SDK设置完毕，可以真正开始发送事件了

开始埋点

在活动主页中 homepage.vue

公有事件,默认公有事件名称为config

// config 对应的是 公有事件名称  user_id和user_code 为公有属性名称
//data.ownData.user_id 和 data.ownData.user_code 为公有属性值
window.collectEvent('config', {
  user_id: data.ownData.user_id,
  user_code: data.ownData.user_code,
});

一般事件

// click_activity 对应的是 事件名称
// from_all 对应的 私有属性名称
// hooks.userId 该为私有属性传值 根据产品需求更改
window.collectEvent('click_activity', {
  from_all: hooks.userId,
});

拓展

前端埋点的作用？

前端埋点的作用主要包括以下几个方面：

用户行为分析：通过收集用户在网站或应用上的行为数据，如页面访问、点击、停留时间等，可以了解用户的使用习惯和偏好，从而优化产品设计和用户体验。

性能监控：通过埋点收集页面加载时间、资源加载时间、错误日志等信息，可以实时监控前端性能，及时发现并解决问题，提高应用的稳定性和响应速度。

异常监控：通过收集错误日志和异常信息，可以及时发现并解决代码中的bug，避免影响用户体验。

营销效果评估：通过分析用户在营销活动中的行为数据，可以评估营销活动的效果，优化营销策略。

用户留存分析：通过分析用户的使用频率和时长，可以了解用户对产品的满意度，提高用户留存率。

竞品分析：通过对比竞品的数据，可以了解自身产品的优势和不足，为产品优化提供参考。

数据驱动决策：通过收集和分析数据，可以为产品迭代、功能优化、市场推广等提供数据支持，实现数据驱动决策。

用户画像：通过收集用户的行为数据，可以构建用户画像，为个性化推荐、精准营销等提供数据支持。

安全监控：通过收集用户行为数据，可以及时发现并处理潜在的安全风险，如恶意点击、刷单等。

合规性监测：通过收集用户行为数据，可以监测产品是否符合相关法律法规的要求，如数据保护法规等。

总之，前端埋点的作用是全方位地了解用户行为和产品性能，为产品优化、营销策略制定、用户留存等提供数据支持，从而提高产品的用户体验和竞争力。

监控前端报错日志的手段有哪些?

监控前端报错日志是确保 Web 应用程序稳定性和用户体验的重要步骤。以下是一些常用的手段和工具，可以帮助你有效地监控和处理前端报错日志：

1. 浏览器内置的错误报告

Console API：使用 console.error、console.warn 等方法在控制台中记录错误信息。
window.onerror：全局错误处理函数，可以捕获未处理的 JavaScript 错误。
window.addEventListener('error')：监听资源加载失败事件（如图片、脚本等）。
// 全局错误处理
window.onerror = function (message, source, lineno, colno, error) {
    // 处理错误并上报
    console.error(`Error: ${message} at ${source}:${lineno}:${colno}`);
    // 可以将错误信息发送到服务器
    sendErrorToServer({ message, source, lineno, colno, error });
    return true; // 阻止默认行为
};

// 资源加载错误处理
window.addEventListener('error', function (event) {
    if (event.target && event.target.tagName.toLowerCase() === 'img') {
        // 图片加载失败
        console.error(`Image load failed: ${event.target.src}`);
    }
});
2. 第三方错误监控服务

Sentry：一个非常流行的错误监控平台，支持多种语言和框架，包括前端应用。
Bugsnag：提供实时错误监控和报告，支持自动错误分类和通知。
Rollbar：帮助开发者快速发现和修复错误，支持详细的错误堆栈跟踪。
LogRocket：不仅监控错误，还可以记录用户操作和网络请求，帮助复现问题。
New Relic：除了错误监控，还提供性能监控和分析功能。

3. 自定义错误上报系统

自建后端服务：开发一个简单的后端服务来接收前端发送的错误日志，并进行存储和分析。
使用现有日志系统：如 ELK Stack（Elasticsearch, Logstash, Kibana）、Loki 等，可以将前端错误日志发送到这些系统中进行集中管理和分析。

4. 前端框架/库的错误处理

React：
使用 Error Boundaries 捕获并处理组件树中的错误。
使用 react-error-boundary 库简化 Error Boundary 的实现。
Vue.js：
使用 Vue.config.errorHandler 全局处理未捕获的异常。
Angular：
使用 ErrorHandler 类来处理全局错误。

5. 性能监控和用户体验监控

Google Analytics：虽然主要用于网站分析，但也可以配置为收集前端错误信息。
Web Vitals：通过测量核心 Web 指标（如 LCP、FID、CLS）来评估用户体验，并结合错误监控来识别性能瓶颈。

6. 自动化测试和持续集成

单元测试：使用 Jest、Mocha 等测试框架编写单元测试，确保代码质量。
端到端测试：使用 Cypress、Puppeteer 等工具进行端到端测试，模拟用户行为，检测潜在的错误。
CI/CD 集成：将错误监控集成到 CI/CD 流程中，确保每次部署前都能检测到潜在的问题。

7. 用户反馈机制

反馈表单：在应用中提供一个简单的反馈表单，允许用户报告他们遇到的问题。
用户行为录制：使用 FullStory、Hotjar 等工具录制用户会话，帮助复现和定位问题。

选择合适的错误监控手段取决于你的具体需求和项目规模。对于小型项目，使用浏览器内置的错误报告和一些开源工具可能就足够了。对于大型项目或需要更高级功能的情况，第三方错误监控服务如 Sentry 或 Bugsnag 会更加合适。无论选择哪种方式，关键是要确保能够及时发现和处理错误，从而提高应用的稳定性和用户体验。

火山引擎前端埋点的优势？

火山引擎前端埋点的优势主要包括以下几个方面：

数据准确性高：火山引擎前端埋点采用无侵入式埋点技术，确保数据采集的准确性和完整性，避免因代码错误导致的漏报、误报等问题。

实时性高：火山引擎前端埋点支持实时数据采集和上报，可以快速响应产品问题和用户需求，提高问题解决的效率。

灵活性高：火山引擎前端埋点支持自定义埋点、自动埋点等多种埋点方式，可以根据业务需求灵活配置埋点方案。

易用性强：火山引擎前端埋点提供简单易用的SDK和可视化界面，用户可以快速上手，无需深入了解技术细节。

稳定性强：火山引擎前端埋点采用分布式架构，支持大规模并发访问，确保数据采集和上报的稳定性。

安全性高：火山引擎前端埋点采用加密传输和存储技术，确保用户数据的安全性和隐私性。

功能丰富：火山引擎前端埋点支持多种数据分析和可视化功能，如漏斗分析、留存分析、用户分群等，可以帮助用户全面了解用户行为和产品性能。

技术支持强：火山引擎前端埋点提供专业的技术支持和售后服务，用户在使用过程中遇到问题可以及时得到解决。

集成度高：火山引擎前端埋点可以与火山引擎的其他产品和服务无缝集成，如A/B测试、推荐系统等，实现数据驱动的产品优化和运营决策。

成本效益高：火山引擎前端埋点采用按需付费的模式，用户可以根据实际需求购买服务，避免资源浪费。