# Node SDK

### **开始使用**

要使用 Offer18 的 Node SDK 开始跟踪，您需要将该 SDK 作为节点模块集成到您的 Web 应用中。

\
查找最新稳定版本的 Node 包

{% 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
// 初始化转化
Offer18WebSDK.initializeUrlParam('YOUR-CLICK-ID-PARAMETER');

// 注册点击
Offer18WebSDK.trackClick(options);

// 注册展示
Offer18WebSDK.trackImpression(options);

// 注册转化
Offer18WebSDK.trackConversion(options);

// 重置 Cookies
Offer18WebSDK.clearCookies();

// 启用日志器
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}** 要在广告 URL 中的令牌。
{% 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>字符串</td><td><strong>必填</strong>：可从 Offer18 仪表板提取的跟踪 URL</td></tr><tr><td><code>keymapping</code></td><td>数组</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>字符串</td><td><strong>必填</strong>：可从 Offer18 仪表板提取的跟踪 URL</td></tr><tr><td><code>keymapping</code></td><td>数组</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>字符串</td><td><strong>必填</strong>：用户的回传域名。</td></tr><tr><td><code>accountId</code></td><td>字符串</td><td><strong>必填</strong>：用户的 Offer18 帐户 ID。</td></tr><tr><td><code>offerId</code></td><td>字符串</td><td><strong>必填</strong>：活动的 ID。</td></tr><tr><td><code>coupon</code></td><td>字符串</td><td>此处可使用优惠券代码。</td></tr><tr><td><code>postbackType</code></td><td>字符串</td><td>它可以是 'iframe' 或 'pixel'，默认值为 'iframe'。</td></tr><tr><td><code>isGlobalPixel</code></td><td>布尔值</td><td>用户可以通过将此项设置为 true 来配置全局像素，默认值为 false。</td></tr><tr><td><code>allowMultiConversion</code></td><td>布尔值</td><td>用户可以通过将此项设置为 true 来允许多次转化，默认值为 false。</td></tr><tr><td><code>conversionData</code></td><td>对象</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>事件</code></td><td>字符串</td><td>事件名称（请指定事件）</td></tr><tr><td><code>payout</code></td><td>字符串</td><td>付费金额（请指定付费金额）</td></tr><tr><td><code>sale</code></td><td>字符串</td><td>销售金额（请指定销售金额）</td></tr><tr><td><code>currency</code></td><td>字符串</td><td>货币代码</td></tr><tr><td><code>adv_sub1</code></td><td>字符串</td><td>广告商子参数 1</td></tr><tr><td><code>adv_sub2</code></td><td>字符串</td><td>广告商子参数 2</td></tr><tr><td><code>adv_sub3</code></td><td>字符串</td><td>广告商子参数 3</td></tr><tr><td><code>adv_sub4</code></td><td>字符串</td><td>广告商子参数 4</td></tr><tr><td><code>adv_sub5</code></td><td>字符串</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.