综述
在网站上部署 Bothub Remarketing SDK 后(以下简称SDK),就可以轻松的在Messenger上进行订单回执发送、购物车提醒、优惠信息提示等再营销。SDK可集成在用户自行部署的各种主流电商网站上。
SDK提供了聊天插件、事件跟踪等功能,并能够根据相关事件推送消息。事件和Facebook Analytics的相应事件保持了最大程度的一致以便于开发以及在Facebook Analytics中查看事件统计。
浏览器最低兼容版本 IE 9,Firefox 15,Chrome 15
配置
在 <body>
标签内最底部添加如下代码,用于配置及加载sdk
<script>
window.BOTHUB = {
facebook_page_id: 'value', // 必选 Facebook 页面id
custom_user_id: 'value', // 可选 网站用户id
language: 'zh_CN' // 可选 显示语言,默认中文,可选 ['zh_CN', 'zh_TW', 'en_US']
debug: true, // 可选 调试模式 开启后可在控制台查看日志
callback: function(self) {} // 可选 后续动作
};
(function(s,id,l){s.id=id;s.src=l;window[id]||document.body.appendChild(s)})
(document.createElement('script'),'bothub-sdk','//sdk.bothub.ai/bothub.js');
</script>
根据需要在 <body>
标签里合适位置添加如下代码:
<!-- 如果需要发送Messenger消息给用户 添加这段代码 -->
<div id="bothub-messenger-checkbox" prechecked="true" size="small"></div>
<!-- 如果需要在网页中集成聊天插件 添加这段代码 -->
<div id="bothub-customerchat"></div>
<!-- 如果需要将指定消息发送给Messenger 添加这段代码 -->
<div id="bothub-send-to-messenger" color="blue" size="standard"></div>
基本使用
使用方法
在 html 标签中添加 onclick="事件代码" 即可:
<button onclick="BOTHUB.Marketing.logEvent('login', null, {})">加入购物车</button>
注意:以下章节将只显示事件代码
商品添加购物车
参数说明:产品编号, 物品类型, 币种, 金额(number)
注意:货币类型请参看附录中使用声明
BOTHUB.Marketing.logAddedToCartEvent('1', 'T-shirt', 'USD', 26.99);
商品添加愿望单
参数说明:产品编号, 物品类型, 币种, 金额(number)
BOTHUB.Marketing.logAddedToWishlistEvent('1', '背包', 'CNY', 599);
商品发起付款
参数说明:订单号, 物品类型, 数量, 支付成功(bool), 币种, 总金额(number)
BOTHUB.Marketing.logInitiatedCheckoutEvent('1', 'music', 5, true, 'USD', 6);
商品付款成功
参数说明:订单号, 币种, 总金额(number)
BOTHUB.Marketing.logPurchaseEvent('1', 'USD', 100);
自定义事件
有些时候我们希望能够记录一些其他事件,可以使用以下方式,只需要传递事件名及相关数据即可。
参数说明:事件名, null, 用户自定义对象(object)
注意:自定义事件名称的最大长度为40个字符,它只能使用字母、数字、下划线或破折号的字符。
BOTHUB.Marketing.logEvent('logined', null, { sex: 'male', age: 18 });
电商
配置商品信息后可通过 messenger_checkbox 或 send_to_messenger 插件将订单信息发送到用户Messenger
配置方式
方式一:在sdk配置中配置要发送的消息数据
数据示例请参考:数据示例
window.BOTHUB = {
// ...
ecommerce: {
messenger_checkbox: {
receipt: 订单回执数据,
},
send_to_messenger: {
receipt: 订单回执数据,
feed: 商品列表数据,
}
}
};
方式二:通过接口来设置要发送的消息数据(参考附录异步调用方式)
BOTHUB.ECommerce.resetMessengerCheckboxReceipt(data)
BOTHUB.ECommerce.resetSendToMessengerReceipt(data)
BOTHUB.ECommerce.resetSendToMessengerFeed(data)
使用步骤:
messenger_checkbox 插件
勾选 "send to messsenger" 并触发自定义事件后,用户将受到订单回执信息
send_to_messenger 插件
用户点击”send to messenger“后,将会收到订单回执信息
附录
示例代码
完整示例请参考源码:
https://demo.bothub.ai/sdk/
使用声明
SDK中所有函数参数若无特别声明均为 string
类型,使用单引号引入
异步调用方式
有些时候当sdk尚未加载完成时需要调用sdk接口,可通过异步方式来调用:
window.bhAsyncInit = function() {
// 下面的代码sdk加载完成后会立即被调用
BOTHUB.ECommerce.resetMessengerCheckboxReceipt(data)
}
API 参考文档
商品添加到购物车
logAddedToCartEvent: function(
contentId, /* required {string} contentId */
contentType, /* required {string} contentType */
currency, /* required {string} currency */
price /* required {number} price */
)
商品添加到愿望单
logAddedToWishlistEvent: function(
contentId, /* required {string} contentId */
contentType, /* required {string} contentType */
currency, /* required {string} currency */
price /* required {number} price */
)
商品发起付款
logInitiatedCheckoutEvent: function(
contentId, /* required {string} contentId */
contentType, /* required {string} contentType */
numItems, /* required {number} numItems */
paymentInfoAvailable, /* required {boolean} paymentInfoAvailable */
currency, /* required {string} currency */
totalPrice /* required {number} totalPrice */
)
商品支付成功
logPurchaseEvent: function(
orderId, /* required {string} orderId */
currency, /* required {string} currency */
totalPrice /* required {number} totalPrice */
}
自定义事件
logEvent: function(
eventName, /* {string} eventName */
valueToSum, /* {null} NULL */
params /* {object} params */
)
插件样式设置参考这里