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

# Node SDK

### **快速开始**

要开始使用 Offer18 的 Node SDK 进行追踪，您需要将该 SDK 作为 node 模块集成到您的 Web 应用中。

\
查找最新稳定版的 Node Package

{% embed url="<https://www.npmjs.com/package/offer18-sdk>" %}

***

### 安装

您可以使用 npm 安装该包：

```bash
npm install offer18-sdk
```

或

```bash
npm i offer18-sdk
```

***

### 使用方法

#### 导入

```javascript
import Offer18SDK from 'offer18-sdk';
```

#### 初始化

```javascript
const Offer18WebSDK = new Offer18SDK();
```

#### 可用方法

```javascript
// Initialize Conversion
Offer18WebSDK.initializeUrlParam('YOUR-CLICK-ID-PARAMETER');

// Register Click
Offer18WebSDK.trackClick(options);

// Register Impression
Offer18WebSDK.trackImpression(options);

// Register Conversion
Offer18WebSDK.trackConversion(options);

// Reset Cookies
Offer18WebSDK.clearCookies();

// Enable Logger
Offer18WebSDK.activateDebugMode();
```

***

### 转化流程

转化流程是指仅通过 Node SDK 跟踪转化的顺序。要实现转化流程，在初始化 SDK 后，您需要按以下顺序添加方法：

<mark style="color:紫色;">位置：页面加载时或组件挂载后</mark>

```javascript
Offer18WebSDK.initializeUrlParam('YOUR-CLICK-ID-PARAMETER');
```

然后

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

```javascript
Offer18WebSDK.trackConversion(options);
```

{% hint style="info" %}
了解更多关于 **YOUR-CLICK-ID-PARAMETER** **&** **选项** 中的 [**方法概览**](#method-overview)
{% endhint %}

***

### SDK 流程

SDK 流程是允许用户在 Node SDK 中跟踪整个转化过程的顺序，包括跟踪展示、点击和转化。在初始化 SDK 后，您需要按以下顺序添加方法：

<mark style="color:紫色;">位置：页面加载时或组件挂载后</mark>

```javascript
Offer18WebSDK.trackImpression(options)
```

然后

<mark style="color:紫色;">位置：可放置在所有页面上（页面加载时或组件挂载后）</mark>

```javascript
Offer18WebSDK.trackClick(options);
```

然后

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

```javascript
Offer18WebSDK.trackConversion(options);
```

{% hint style="info" %}
了解更多关于 **选项** 中的 [**方法概览**](#method-overview)
{% endhint %}

***

### 方法概览

#### initializeConversion('**YOUR-CLICK-ID-PARAMETER**')

此方法用于初始化转化。您需要在页面加载时或组件挂载后添加此方法。&#x20;

{% hint style="info" %}
将 **YOUR-CLICK-ID-PARAMETER** 替换为用于接收来自 **{tid}** offer URL 中 token 的参数键。
{% endhint %}

#### trackClick(options)

此方法用于跟踪点击。

* **参数**:
  * `选项` （对象）：配置选项。

<table><thead><tr><th width="166">参数</th><th width="92">类型</th><th>描述</th></tr></thead><tbody><tr><td><code>trackingURL</code></td><td>string</td><td><strong>必填</strong>：可从 Offer18 仪表盘提取的跟踪 URL</td></tr><tr><td><code>keymapping</code></td><td>array</td><td>一个包含 Offer18 参数和原生参数的数组，格式为 <code>&#x3C;OFFER18-PARAMETER>:&#x3C;YOUR-PARAMETER></code>。用户可以将 <code>&#x3C;OFFER18-PARAMETER></code> 替换为 Offer18 参数，例如 <code>aff_sub1</code>, <code>aff_sub2</code> 以及 <code>&#x3C;YOUR-PARAMETER></code> 替换为其参数，即用户从其网络获取值的参数。</td></tr></tbody></table>

**示例代码**&#x20;

```javascript
Offer18WebSDK.trackClick({
    trackingURL: 'https://example.o18.click/c?o=0000000&m=0000',
    keymapping: ['a:<YOUR-PARAMETER>']
});
```

#### trackImpression(options)

此方法用于跟踪展示。

* **参数**:
  * `选项` （对象）：配置选项。

<table><thead><tr><th width="184">参数</th><th width="97">类型</th><th>描述</th></tr></thead><tbody><tr><td><code>impressionURL</code></td><td>string</td><td><strong>必填</strong>：可从 Offer18 仪表盘提取的跟踪 URL</td></tr><tr><td><code>keymapping</code></td><td>array</td><td>一个包含 Offer18 参数和原生参数的数组，格式为 <code>&#x3C;OFFER18-PARAMETER>:&#x3C;YOUR-PARAMETER></code>。用户可以将 <code>&#x3C;OFFER18-PARAMETER></code> 替换为 Offer18 参数，例如 <code>aff_sub1</code>, <code>aff_sub2</code> 以及 <code>&#x3C;YOUR-PARAMETER></code> 替换为其参数，即用户从其网络获取值的参数。</td></tr></tbody></table>

**示例代码**&#x20;

```javascript
Offer18WebSDK.trackImpression({
    impressionURL: 'https://example.o18.click/i?o=0000000&m=0000',
    keymapping: ['a:<YOUR-PARAMETER>']
});
```

#### trackConversion(options)

此方法用于跟踪转化。

* **参数**:
  * `选项` （对象）：配置选项。

<table><thead><tr><th width="257">参数</th><th width="149">类型</th><th>描述</th></tr></thead><tbody><tr><td><code>domain</code></td><td>string</td><td><strong>必填</strong>：用户的 postback 域名。</td></tr><tr><td><code>accountId</code></td><td>string</td><td><strong>必填</strong>：用户的 Offer18 账户 ID。</td></tr><tr><td><code>offerId</code></td><td>string</td><td><strong>必填</strong>：活动 ID。</td></tr><tr><td><code>coupon</code></td><td>string</td><td>这里可以使用优惠券代码。</td></tr><tr><td><code>postbackType</code></td><td>string</td><td>可以是 'iframe' 或 'pixel'，默认值为 'iframe'。</td></tr><tr><td><code>isGlobalPixel</code></td><td>boolean</td><td>用户可以通过将其设为 true 来配置全局像素，默认值为 false。</td></tr><tr><td><code>allowMultiConversion</code></td><td>boolean</td><td>用户可以通过将其设为 true 来允许多重转化，默认值为 false。</td></tr><tr><td><code>conversionData</code></td><td>object</td><td>此对象包含可用于从网络获取值的参数。</td></tr></tbody></table>

<mark style="color:紫色;">conversionData</mark> **对象**

<table><thead><tr><th width="167">参数</th><th width="126">类型</th><th>描述</th></tr></thead><tbody><tr><td><code>event</code></td><td>string</td><td>事件名称（请指定事件）</td></tr><tr><td><code>payout</code></td><td>string</td><td>支付金额（请指定支付金额）</td></tr><tr><td><code>sale</code></td><td>string</td><td>销售金额（请指定销售金额）</td></tr><tr><td><code>currency</code></td><td>string</td><td>货币代码</td></tr><tr><td><code>adv_sub1</code></td><td>string</td><td>广告主子参数 1</td></tr><tr><td><code>adv_sub2</code></td><td>string</td><td>广告主子参数 2</td></tr><tr><td><code>adv_sub3</code></td><td>string</td><td>广告主子参数 3</td></tr><tr><td><code>adv_sub4</code></td><td>string</td><td>广告主子参数 4</td></tr><tr><td><code>adv_sub5</code></td><td>string</td><td>广告主子参数 5</td></tr></tbody></table>

**示例代码**

```javascript
Offer18WebSDK.trackConversion({
        domain: '',
        accountId: '',
        offerId: '',
        coupon:'',
        postbackType: '', // 'iframe' or 'pixel'
        isGlobalPixel: false, // true or false
        allowMultiConversion: false, // true or false
        conversionData: {
            event: '', // Event Name (Please specify the event)
            payout: '', // Payout Amount (Please specify the payout amount)
            sale: '', // Sale Amount (Please specify the sale amount)
            currency: '',
            adv_sub1: '',
            adv_sub2: '',
            adv_sub3: '',
            adv_sub4: '',
            adv_sub5: '',
        }
    });
```

#### clearCookies()

此方法用于移除该包添加的所有第一方 cookie。

#### activateDebugMode()

此方法用于启用日志记录器。该包执行的每个操作的日志都将显示在浏览器开发者工具控制台中。您需要在初始化 SDK 后立即添加此方法

### Node SDK 与前端框架和库的兼容性

以下前端 **框架和库** 与 Node SDK 兼容，并且可以通过 npm 无缝使用：

{% code overflow="wrap" %}

```
Next.js, Nuxt.js, SvelteKit, Gatsby, Remix, RedwoodJS, Blitz.js, Astro, Eleventy (11ty), React Static, Gridsome, VuePress, Quasar Framework, Razzle, Preact CLI, NestLand, Hydrogen, Marko, Inferno, Vite, React, Vue.js, Svelte, Preact, SolidJS, Alpine.js, Lit, Stencil.js, Hyperapp, Riot.js, Mithril.js
```

{% endcode %}