# 再营销SDK的集成

## 综述

在网站上部署 Bothub Remarketing SDK 后（以下简称SDK)，就可以轻松的在Messenger上进行订单回执发送、购物车提醒、优惠信息提示等再营销。SDK可集成在用户自行部署的各种主流电商网站上。

SDK提供了聊天插件、事件跟踪等功能，并能够根据相关事件推送消息。事件和Facebook Analytics的相应事件保持了最大程度的一致以便于开发以及在Facebook Analytics中查看事件统计。

**浏览器最低兼容版本 IE 9，Firefox 15，Chrome 15**

## 配置 <a href="#pei-zhi" id="pei-zhi"></a>

1. 在 `<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>
```

## 基本使用 <a href="#ji-ben-shi-yong" id="ji-ben-shi-yong"></a>

### 使用方法

在 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 });
```

## 电商 <a href="#dian-shang" id="dian-shang"></a>

配置商品信息后可通过 messenger\_checkbox 或 send\_to\_messenger 插件将订单信息发送到用户Messenger

### 配置方式

方式一：在sdk配置中配置要发送的消息数据

数据示例请参考：[数据示例](https://sdk.bothub.ai/data/ecommerce.js)

```
window.BOTHUB = {
  // ...
  ecommerce: {
    messenger_checkbox: {
      receipt: 订单回执数据,
    },
    send_to_messenger: {
      receipt: 订单回执数据,
      feed: 商品列表数据,
    }
  }
};
```

方式二：通过接口来设置要发送的消息数据（参考附录异步调用方式）

```
BOTHUB.ECommerce.resetMessengerCheckboxReceipt(data)
BOTHUB.ECommerce.resetSendToMessengerReceipt(data)
BOTHUB.ECommerce.resetSendToMessengerFeed(data)
```

#### 使用步骤： <a href="#shi-yong-bu-zhou" id="shi-yong-bu-zhou"></a>

messenger\_checkbox 插件

1. 设置要发送的数据
2. 勾选 "send to messsenger" 并触发自定义事件后，用户将受到订单回执信息

send\_to\_messenger 插件

1. 设置要发送的数据
2. 用户点击”send to messenger“后，将会收到订单回执信息

## 附录 <a href="#fu-lu" id="fu-lu"></a>

#### 示例代码 <a href="#shi-li-dai-ma" id="shi-li-dai-ma"></a>

完整示例请参考源码：

<https://demo.bothub.ai/sdk/>

#### 使用声明 <a href="#shi-yong-sheng-ming" id="shi-yong-sheng-ming"></a>

1. SDK中所有函数参数若无特别声明均为 `string` 类型，使用单引号引入
2. 货币符号请参考文档 [ISO 4217](https://en.wikipedia.org/wiki/ISO_4217)
3. API详情文档请参看附录

#### 异步调用方式 <a href="#yi-bu-tiao-yong-fang-shi" id="yi-bu-tiao-yong-fang-shi"></a>

有些时候当sdk尚未加载完成时需要调用sdk接口，可通过异步方式来调用：

```
window.bhAsyncInit = function() {
  // 下面的代码sdk加载完成后会立即被调用
  BOTHUB.ECommerce.resetMessengerCheckboxReceipt(data)
}
```

#### API 参考文档 <a href="#api-can-kao-wen-dang" id="api-can-kao-wen-dang"></a>

商品添加到购物车

```
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 */
)
```

插件样式设置[参考这里](https://developers.facebook.com/docs/messenger-platform/discovery)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://bothub.gitbook.io/project/bothub.ai-2.0/untitled-2/untitled-1/zai-ying-xiao-sdk-de-ji-cheng.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
