BTY Track - 埋点插桩智能提示工具

BTY Track 是一个专为BTY项目开发的VSCode扩展，提供智能的埋点插桩代码提示和自动补全功能。

🎯 功能特性

智能埋点属性补全

expose-id: 自动从数据文件中提取埋点ID，提供智能补全
expose-track-method: 埋点触发方式 (click | show | leave)
expose-track-params: 埋点参数配置 (JSON格式)
expose-track-once: 是否只触发一次 (true | false)

悬停提示

鼠标悬停在埋点属性值上时，显示详细的埋点信息
显示埋点ID对应的事件名称、标签、图标等详细信息
提供埋点参数的格式说明和示例

智能分析

自动分析项目中的埋点数据文件
支持 TypeScript/JavaScript 文件中的 export default 数组
实时更新埋点数据缓存

📦 安装

下载 bty-track-tool-1.0.0.vsix 文件
在VSCode中按 Ctrl+Shift+P (Windows/Linux) 或 Cmd+Shift+P (macOS)
输入 "Extensions: Install from VSIX..."
选择下载的 .vsix 文件
重启VSCode

🚀 使用方法

1. 配置埋点数据文件

首先需要创建包含埋点配置的数据文件，例如：

// track-config.ts
export default [
  {
    event: "homepage_banner_click",
    eventName: "首页Banner点击",
    label: "首页轮播图",
    icon: "banner.svg"
  },
  {
    event: "product_add_cart",
    eventName: "商品加购",
    label: "商品详情页",
    icon: "cart.svg"
  },
  {
    event: "user_login_success",
    eventName: "用户登录成功",
    label: "登录页面",
    icon: "login.svg"
  }
];

2. 分析埋点数据

使用命令面板 (Ctrl+Shift+P) 执行以下命令：

BTY Track: Select File to Analyze - 选择要分析的埋点数据文件
BTY Track: Analyze Current File Exports - 分析当前打开的文件
BTY Track: Say Hello - 测试扩展是否正常工作

3. 在代码中使用埋点属性

在HTML或JSX文件中输入埋点属性时，扩展会自动提供智能补全：

<!-- HTML示例 -->
<div expose-id="homepage_banner_click" 
     expose-track-method="click" 
     expose-track-once="false"
     expose-track-params='{"position": 1, "banner_id": "main"}'>
  <img src="https://github.com/martin-fine/bty-track/raw/HEAD/banner.jpg" alt="首页Banner">
</div>

// React/JSX示例
<button 
  expose-id="product_add_cart"
  expose-track-method="click"
  expose-track-params={JSON.stringify({productId: 123, category: 'electronics'})}
  onClick={handleAddToCart}
>
  加入购物车
</button>

4. 智能提示功能

属性名补全

输入 expose- 时自动提示可用的埋点属性
根据已有属性智能过滤，避免重复添加

属性值补全

expose-id: 从数据文件中提取的埋点ID列表
expose-track-method: 预定义的触发方式选项
expose-track-once: 布尔值选项
expose-track-params: JSON格式提示

悬停信息

鼠标悬停在属性值上显示详细信息
包含事件名称、标签、图标等元数据
提供参数格式说明和使用示例

🔧 支持的文件类型

TypeScript (.ts, .tsx)
JavaScript (.js, .jsx)
HTML (.html)
Vue (.vue)
其他支持HTML属性的文件格式

📋 埋点属性说明

expose-id

埋点事件的唯一标识符，用于标识具体的埋点事件。

示例值:

homepage_banner_click
product_add_cart
user_login_success

expose-track-method

埋点的触发方式，决定何时发送埋点数据。

可选值:

click: 点击时触发
show: 元素显示时触发
leave: 元素离开视口时触发

expose-track-params

埋点的附加参数，以JSON格式传递额外的上下文信息。

示例:

{
  "position": 1,
  "category": "electronics",
  "product_id": 123,
  "source": "recommendation"
}

expose-track-once

控制埋点是否只触发一次。

可选值:

true: 只触发一次
false: 每次满足条件都触发

🛠️ 开发相关

扩展命令

btytrack.selectFile: 选择要分析的埋点数据文件
btytrack.analyzeExports: 分析当前文件的导出
btytrack.hello: 测试扩展状态

配置要求

VSCode 版本: >= 1.75.0
支持的语言: TypeScript, JavaScript, HTML, JSX, TSX

🤝 贡献

欢迎提交Issue和Pull Request来改进这个工具。

📄 许可证

MIT License

📞 支持

如果遇到问题或有功能建议，请通过以下方式联系：

提交GitHub Issue
邮件联系项目维护者

BTY Track - 让埋点插桩更智能，让数据分析更精准 🎯