> For the complete documentation index, see [llms.txt](https://knowledgebase.offer18.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://knowledgebase.offer18.com/zh/wang-luo/dian-shang-ji-cheng/bigcommerce.md).

# BigCommerce

按照以下步骤将 BigCommerce 商店与 Offer18 集成以跟踪转化。

#### 步骤 1：创建 Offer

对于无 Cookie 跟踪，在 Offer18 仪表板中创建优惠时，必须在优惠 URL 中以及所有登录页面中包含 click ID 参数和令牌。

{% code title="示例" overflow="wrap" fullWidth="false" %}

```
https://shopurl.com/?<YOUR-CLICK-ID-PARAMETER>={tid}
```

{% endcode %}

***

####

#### 步骤 2：代码放置

按照以下步骤将代码片段添加到 BigCommerce 帐户的所有页面中。

1. 在您的 BigCommerce 帐户中，转到 "**店面**"
2. 脚本管理器 **»** "**创建脚本**" **»** 添加脚本名称
3. 选择 "**页眉**" 在 放置 以及 "**所有页面**" 在 位置
4. 选择 "**必要**" 在 脚本类别 以及 "**脚本**" 在 脚本 类型
5. 现在，将下面给出的脚本放入 "**脚本内容**" 部分

{% code fullWidth="false" %}

```html
<script src="https://web-resources.offer18.net/sdk/web/WebSDK.js"></script>
<script>
    window.Offer18WebSDK.initializeUrlParam('<YOUR-CLICK-ID-PARAMETER>');
</script>
```

{% endcode %}

{% hint style="info" %}
用户必须将 '**\<YOUR-CLICK-ID-PARAMETER>**' 替换为创建优惠时使用的 clickid 参数。
{% endhint %}

<figure><img src="/files/0a7efa69693ba097e5f1e74260cf378a1fdff6b9" alt=""><figcaption></figcaption></figure>

为所有页面添加脚本后，按照以下步骤为订单确认页面添加脚本。

1. 从 **店面 »** 脚本管理器 **»** "**创建脚本**" **»** 添加脚本名称
2. 脚本管理器 **»** "**创建脚本**" **»** 添加脚本名称
3. 选择 "**页脚**" 在 放置 以及 "**订单确认**" 在 位置
4. 选择 "**必要**" 在 脚本类别 以及 "**脚本**" 在 脚本 类型
5. 现在，将下面给出的脚本放入 "**脚本内容**" 部分

```html
<script src="https://web-resources.offer18.net/sdk/web/WebSDK.js"></script>
<script>
  var my_order_id = {{{ checkout.order.id }}};
  let my_store_api = '/api/storefront/orders/' + my_order_id;
  fetch(my_store_api)
    .then((res) => res.json())
    .then((order) => {
      var couponString = '';
      if (order.coupons) {
        couponString = order.coupons
          .map(c => c.code)
          .join(', ');
      }
      window.Offer18WebSDK.trackConversion({
        domain: '<YOUR-POSTBACK-DOMAIN>',
        accountId: '<YOUR-ACCOUNT-ID>',
        offerId: '<CAMPAIGN-ID>',
        coupon: `${couponString}`,
        postbackType: '', // 'iframe' or 'pixel'
        isGlobalPixel: false, // true or false
        allowMultiConversion: false, // true or false
        conversionData: {
          sale: `${order.orderAmount}`,        // Sale Amount
          currency: `${order.currency.code}`,
          adv_sub5: `${my_order_id}`,
        }
      });
    });
</script>
```

<figure><img src="/files/99b3cd122ef5197cbc52b663e10e1329fd13c13c" alt=""><figcaption></figcaption></figure>

确保脚本中的所有占位符都已替换为正确的活动信息，如下表所述。

|                             |                                  |
| --------------------------- | -------------------------------- |
| **占位符**                     | **说明**                           |
| `<YOUR-CLICK-ID-PARAMETER>` | 这是 `clickid` 创建优惠时使用的参数。         |
| `<YOUR-POSTBACK-DOMAIN>`    | 用户的回传域名（**域名**)                  |
| `<YOUR-ACCOUNT-ID>`         | 用户的 Offer18 帐户 ID（**accountId**) |
| `<CAMPAIGN-ID>`             | 优惠的 ID（**offerId**)              |

***

####

#### 调试模式

要在 SDK 中启用调试模式，请在脚本中添加以下代码：

```html
<script>
    window.Offer18WebSDK.activateDebugMode();
</script>
```