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
📞 支持
如果遇到问题或有功能建议,请通过以下方式联系:
BTY Track - 让埋点插桩更智能,让数据分析更精准 🎯