> 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/sdk/web-sdk.md).

# Web SDK

## **开始使用**

要开始使用 Offer18 的 Web SDK 进行跟踪，请按照以下说明操作。

## 跟踪点击

要使用 SDK 跟踪点击，请将以下代码添加到您的脚本中。

<mark style="color:紫色;">投放位置：页眉（所有页面）</mark>

{% code fullWidth="false" %}

```html
<script src="https://web-resources.offer18.net/sdk/web/WebSDK.js"></script>
<script>
    window.Offer18WebSDK.trackClick({
        trackingURL: '<YOUR-TRACKING-LINK>',
        keymapping: ['<OFFER18-PARAMETER>:<YOUR-PARAMETER>', '<OFFER18-PARAMETER>:<YOUR-PARAMETER>',...]
    });
</script>
```

{% endcode %}

{% tabs %}
{% tab title="对象配置 - window\.Offer18WebSDK.trackclick()" %}

1. **trackingURL** (必填)：可从 Offer18 仪表板提取的跟踪 URL。
2. **keymapping** ：是一个以以下格式表示的 Offer18 参数和本地参数的数组 `<OFFER18-PARAMETER>:<YOUR-PARAMETER>`。用户可以替换 `<OFFER18-PARAMETER>`  为 Offer18 参数，例如 aff\_sub1、aff\_sub2 以及 `<YOUR-PARAMETER>` 为用户从其网络中获取值的参数。
   {% endtab %}
   {% endtabs %}

#### **示例代码**

```html
<script src="https://web-resources.offer18.net/sdk/web/WebSDK.js"></script>
<script>
    window.Offer18WebSDK.trackClick({
        trackingURL: 'https://example.o18.click/c?o=0000000&m=0000',
        keymapping: ['a:<YOUR-PARAMETER>']
    });
</script>
```

`在上述示例中`` `**`a`**` ``是`` `**`联盟 ID`**` ``在键映射中`

***

## 跟踪展示

要使用 SDK 跟踪展示，请将以下代码添加到您的脚本中

<mark style="color:紫色;">投放位置：页眉（所有页面）</mark>

{% code fullWidth="false" %}

```html
<script src="https://web-resources.offer18.net/sdk/web/WebSDK.js"></script>
<script>
    window.Offer18WebSDK.trackImpression({
        impressionURL: '<YOUR-IMPRESSION-URL>',
        keymapping: ['<OFFER18-PARAMETER>:<YOUR-PARAMETER>', '<OFFER18-PARAMETER>:<YOUR-PARAMETER>',...]
    });
</script>
```

{% endcode %}

{% tabs %}
{% tab title="对象配置 - window\.Offer18WebSDK.trackImpression()" %}

1. **impressionURL** (必填)：可从 Offer18 仪表板提取的展示 URL。
2. **keymapping** ：是一个以以下格式表示的 Offer18 参数和本地参数的数组 `<OFFER18-PARAMETER>:<YOUR-PARAMETER>`。用户可以替换 `<OFFER18-PARAMETER>`  为 Offer18 参数，例如 aff\_sub1、aff\_sub2 以及 `<YOUR-PARAMETER>` 为用户从其网络中获取值的参数。
   {% endtab %}
   {% endtabs %}

#### **示例代码**

```html
<script src="https://web-resources.offer18.net/sdk/web/WebSDK.js"></script>
<script>
    window.Offer18WebSDK.trackImpression({
        impressionURL: 'https://example.o18.click/i?o=0000000&m=0000',
        keymapping: ['a:<YOUR-PARAMETER>']
    });
</script>
```

`在上述示例中`` `**`a`**` ``是`` `**`联盟 ID`**` ``在键映射中`

***

## 跟踪转化

用户必须将以下代码片段添加到除订单确认/订单成功（感谢页面）之外的所有着陆页中。

<mark style="color:紫色;">投放位置：页眉（所有页面）</mark>

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

添加脚本后，需要在感谢/订单确认页面中添加以下脚本

<mark style="color:紫色;">投放位置：感谢页面/订单成功页面（单页）</mark>

```html
<script src="https://web-resources.offer18.net/sdk/web/WebSDK.js"></script>
<script>
    window.Offer18WebSDK.trackConversion({
        domain: '',
        accountId: '',
        offerId: '',
        coupon:'',
        postbackType: '', // 'iframe' 或 'pixel'
        isGlobalPixel: false, // true 或 false
        allowMultiConversion: false, // true 或 false
        conversionData: {
            event: '', // 事件名称（请注明事件）
            payout: '', // 支付金额（请注明支付金额）
            sale: '', // 销售金额（请注明销售金额）
            currency: '',
            adv_sub1: '',
            adv_sub2: '',
            adv_sub3: '',
            adv_sub4: '',
            adv_sub5: '',
        }
    })
</script>
```

{% tabs %}
{% tab title="对象配置 - window\.Offer18WebSDK.trackConversion()" %}

1. **domain** (必填)：用户的回传域名。
2. **accountId** (必填)：用户的 Offer18 帐号 ID。
3. **offerId** (必填)：活动的 ID。
4. **coupon：** 此处可使用优惠券代码
5. **postbackType** : 它可以是 `'iframe'` 或 `'pixel'`，默认值为 `'iframe'`.&#x20;
6. **isGlobalPixel** ：用户可以通过设置此项来配置全局像素 `true` ，默认值为 `false`.
7. **allowMultiConversion** ：用户可以通过设置此项来允许多次转化 `true` ，默认值为 `false`.&#x20;
8. **conversionData** ：此对象包含可用于从网络获取值的参数。
   {% endtab %}
   {% endtabs %}

#### **示例代码**

<pre class="language-html"><code class="lang-html">&#x3C;script src="https://web-resources.offer18.net/sdk/web/WebSDK.js">&#x3C;/script>
<strong>&#x3C;script>
</strong>    window.Offer18WebSDK.trackConversion({
        domain: 'example.o18.link',
        accountId: '0000',
        offerId: '00000000',
    });
&#x3C;/script>
</code></pre>

***

## 调试模式

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

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

启用调试模式可让用户获取有关 SDK 工作的更详细信息，包括任何错误或调试消息。