Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>BTY TrackNew to Visual Studio Code? Get it now.
BTY Track

BTY Track

martin-fine

|
2 installs
| (0) | Free
BTY项目专用的埋点插桩智能提示工具,提供expose-属性的自动补全和悬停信息,让数据埋点更智能、更准确。
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

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 数组
  • 实时更新埋点数据缓存

📦 安装

  1. 下载 bty-track-tool-1.0.0.vsix 文件
  2. 在VSCode中按 Ctrl+Shift+P (Windows/Linux) 或 Cmd+Shift+P (macOS)
  3. 输入 "Extensions: Install from VSIX..."
  4. 选择下载的 .vsix 文件
  5. 重启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 - 让埋点插桩更智能,让数据分析更精准 🎯

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft