# 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 %}


---

# 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://knowledgebase.offer18.com/zh/wang-luo/sdk/node-sdk.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.