网站推荐小组件
小组件是网站上现成的商品区块：首页的“您可能还喜欢”、商品详情页的“一起购买”、购物车中的“最近浏览”。您在 OneTrace.pro 中配置小组件，只需在网站上插入一次简短代码。之后，类型、外观和开关都可以在不修改网站的情况下调整。
使用小组件需要已安装追踪器（接入网站）、商品目录，以及浏览、加购和购买事件（推荐与商品目录）。“所有者”“管理员”和“经理”可以创建和修改小组件。
如何创建小组件
- 打开用户互动 → 网站中的小组件选项卡。
- 点击创建小组件。
- 在左侧填写设置，右侧会立即显示预览。
- 点击保存。
设置
| 字段 | 作用 |
|---|---|
| 名称 | 小组件名称；仅在管理后台中可见 |
| 显示内容 | 推荐类型：个性化、热门、趋势、一起浏览、一起购买、相似、最近浏览 |
| 类目 | 用于热门和趋势：目录中的类目 id；留空表示整个目录 |
| 标题 | 商品上方的文字，例如“您可能还喜欢” |
| 布局 | 网格或可滚动的轮播 |
| 每行卡片数 | 1 到 8 |
| 商品总数 | 1 到 24 |
| 强调色 | 价格和按钮的颜色；不设置时使用网站文字颜色 |
| 圆角 | 图片和按钮的圆角，0 到 32 px |
| 按钮 | 按钮文字，例如“详情”；留空表示无按钮 |
| 显示价格 | 在卡片中显示价格和原价 |
预览
预览会使用您目录中的真实商品，以与网站上相同的方式渲染小组件。对于“一起浏览”和相似商品，会以第一个有货的商品作为示例，其 id 显示在预览上方。如果没有匹配的商品，会显示灰色占位卡片，以便评估外观。桌面端 / 手机切换器可以将显示区域缩小到手机宽度。
在网站上，布局会根据所在区域的宽度而不是屏幕宽度进行调整：在较窄的栏中和手机上，卡片每行显示两个。小组件沿用网站的字体和文字颜色。
网站代码
列表中的每个小组件都有网站代码模块。请将代码插入页面模板中需要显示区块的位置：
<div data-cdp-widget="a1b2c3d4e5f6" data-item="SKU-1"></div>
属性：
data-item：当前页面的商品 id，或以逗号分隔的购物车商品 id：data-item="SKU-1,SKU-7"。对于“一起浏览”“一起购买”和“相似”类型为必填项，请从页面模板中填入。data-category：热门商品的类目 id，适用于不同页面需要不同类目的情况。data-exclude：以逗号分隔的不需要显示的商品 id，例如已在购物车中的商品。
个性化和最近浏览的商品根据访客挑选，不需要 data-item。
如果没有匹配的商品，页面上的该位置会保持空白，不会破坏页面布局。
开启和关闭
小组件卡片中的在网站上显示开关可以在不修改网站的情况下关闭小组件：状态变为“已暂停”，页面上的区块会被清空。重新开启后，商品会再次显示。垃圾桶按钮会彻底删除小组件：它将不再在网站上显示。
铅笔按钮会打开编辑小组件。更改会在下次加载页面时显示在网站上，无需修改代码。
统计
小组件名称下方显示 30 天内的统计数据：
| 指标 | 计算方式 |
|---|---|
| 展示 | 小组件至少有一半进入访客视野。加载页面但未滚动到区块时不计入，因此页面底部小组件的 CTR 是真实的 |
| 点击 | 点击商品卡片的次数 |
| CTR | 点击数除以展示数 |
| 购买 | 同一客户在点击商品后 7 天内购买该商品的次数 |
| 收入 | 这些购买的总金额 |
网站上各类型推荐的总体效果请参阅推荐板块。
单页应用网站
追踪器会在页面加载后、出现新元素时以及 data-item 变化时自动查找小组件。因此，在基于 React、Vue 等框架的网站上，只需修改属性，区块就会重新渲染。
如果需要在不修改属性的情况下刷新商品，例如在购物车变化后，请调用：
cdp.widgets({ force: true });
用自定义代码代替小组件
开发人员可以直接通过代码输出推荐区块，无需在管理后台中配置：
window.addEventListener('load', () => {
cdp.renderRecommendations('#recs', {
type: 'viewed_with', item: 'SKU-1', title: '一起浏览', layout: 'carousel', columns: 4,
});
});
该区块的外观与小组件相同，展示和点击会自动统计。也可以在追踪器加载前调用：调用会在队列中等待。元素必须已在页面上，因此示例会等待 load 事件。结果为空时会清空该元素。颜色、圆角和按钮更适合在管理后台的小组件中配置。