再营销SDK的集成

综述

在网站上部署 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 类型，使用单引号引入
货币符号请参考文档 ISO 4217
API详情文档请参看附录

异步调用方式

有些时候当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 */
)

插件样式设置参考这里

Previous广告管理 Next评论回复功能

Last updated 7 years ago