介绍
为了跟踪事件,需要将HTML片段添加到你的所有页面中。
我们有预定义的事件和它们的属性--请按要求使用它们。
要跟踪页面浏览,请在每个页面head里面添加以下HTML片段行:
<meta name="mambasms:page" content="product" />
mambasms:page 枚举类型:
mambasms:page对应的content值 | 页面描述 |
---|---|
homepage | 首页 |
product | 商品详情页 |
cart | 购物车页 |
checkout | 商品结算页 |
注意1:该代码行被添加到默认的片段代码中,所以不要重复。
注意2:要使用此功能,请使用最新的HTML代码段。
当用户查看产品时,触发追踪事件。此事件用于:
实时查看网站追踪 - 追踪产品页面浏览量
仅用于产品页面
枚举类型:
mambasms:对应值 | content值 |
---|---|
price | 产品价格 |
id | 当前产品id |
title | 产品标题 |
事件代码的示例:
<meta name="mambasms:price" content="9999.99" />
当用户查看产品并添加购物车,触发追踪事件。此事件用于:
实时追踪用户添加购物车
枚举类型:
属性 | 描述 | 指定字段(必须一致) |
---|---|---|
totalPrice | 产品价格 | price |
id | 当前产品id | productId |
title | 产品标题 | title |
variantId | 变体id | variantId |
sku | 产品sku | sku |
quantity | 产品数量 | quantity |
url | 产品地址 | url |
添加购物车事件代码的例子:
window._mamasms.event.emit('mambasms-addToCart', {
productId: productId,
variantId: variantId,
sku: sku,
quantity: quantity,
title: title,
totalPrice: price,
url: url
})
注意:要使用这个功能,需要在点击添加购物车时调用上面JavaScript代码,指定字段必须一致。
安装 Back in Stock
关于 Mambasm 的“返回库存”功能
Mambasm的退货功能有两个关键组成部分:
- 缺货流程
当某人订阅缺货警报时,将在其 Mambasm个人资料中跟踪订阅缺货事件。您将使用此事件来触发库存流量恢复。购物者在订阅产品时将进入流程,并在其感兴趣的商品补货时收到联系。
网站按钮 - 您需要在主题中添加一个代码片段,以便在商品缺货时自动显示“有货时通知我”按钮。一旦安装了该代码片段,就会发生以下情况:
a. 当购物者浏览产品并且该产品缺货时,“有货时通知我”按钮将直接出现在“售完”按钮旁边或下方。
b. 当有人点击“通知我”按钮时,会弹出一个表单,允许购物者输入电子邮件,以便在商品补货时收到通知。
c. 提交表格后,将在 Mambasms内该购物者的个人资料中跟踪“订阅补货”事件。
Mambasm 在变体级别监控您的库存,这意味着购物者可以订阅接收有关特定产品变体的提醒。例如,如果顾客发现他们最喜欢的中号粉色 T 恤缺货,他们可以订阅此特定款式,Mambasm 将确保只有在您补货此尺寸和颜色后才会通知他们。
复制下面的 JavaScript 代码段并将其粘贴到产品页面文件中
<script type="text/javascript">
window.mambasmsSettings = {
stock_alternate_anchor: null,
stock_replace_anchor: true,
stock_replace_sold_out: null,
stock_product_page_text: "Notify Me When Available11",
stock_product_page_class: "btn",
stock_product_page_text_align: "center",
stock_product_page_margin: "0px",
stock_product_page_width: "auto",
stock_button_text_color: "#fff",
stock_button_background_color: "#439fdb",
ADD_TO_CART_FORM_ID: "#form",
ADD_TO_CART_BUTTON_ID: "#btn",
}
</script>
枚举类型:
参数值 | 参数描述 |
---|---|
stock_alternate_anchor | 替换锚点 |
stock_replace_anchor | 当此项设置为false时,您将看到“售完”和“通知我”按钮。当此项设置为true时,“通知我”按钮将取代“售完”按钮。 |
stock_product_page_class | 这个类将决定按钮的外观;默认值“btn”将确保此按钮与主题中的其他基本按钮匹配。 |
stock_product_page_text_align | 返回库存按钮内的文本对齐方式(即center、right或left)。 |
stock_product_page_margin | 在按钮周围、文本和按钮之间添加的边距。 |
stock_product_page_width | 按钮宽度 默认auto |
stock_product_page_text | 商品缺货时填充的按钮内显示的文本 |
stock_button_text_color | 按钮文字颜色 |
stock_button_background_color | 按钮背景颜色 |
ADD_TO_CART_FORM_ID | 详情页添加购物车父级类名(.class)或者id(#id),也可用属性名[data-***] |
ADD_TO_CART_BUTTON_ID | 详情页添加购物车按钮类名(.class)或者id(#id),也可用属性名[data-***] |
初始货库存按钮
进入商品页面时需要先判断商品是否有库存,无库存时再调用以下代码
window._mamasms.event.emit('mambasms-back-in-stock-init', {
productId: productId,
variantId: variantId,
title: title,
variantName: variantName
})
注意:变体id及变体标题为空时,默认给产品id及产品标题
切换变体时调用
枚举类型:
参数值 | 参数描述 |
---|---|
productId | 当前产品Id |
variantId | 变体Id |
title | 产品标题 |
variantName | 变体产品标题 |
切换变体时调用例子:
需要先判断商品是否有库存,无库存时再调用以下代码
window._mamasms.event.emit('mambasms-back-in-stock', {
productId: productId,
variantId: variantId,
title: title,
variantName: variantName
})
注意:要使用这个功能,需要在切换变体时调用上面JavaScript代码,指定字段必须一致。