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

# Node SDK

### **Начать**

Чтобы начать отслеживание с использованием Node SDK от Offer18, вам нужно интегрировать SDK в ваше веб-приложение как node-модуль.

\
Узнайте последнюю стабильную версию 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
// Инициализировать конверсию
Offer18WebSDK.initializeUrlParam('YOUR-CLICK-ID-PARAMETER');

// Зарегистрировать клик
Offer18WebSDK.trackClick(options);

// Зарегистрировать показ
Offer18WebSDK.trackImpression(options);

// Зарегистрировать конверсию
Offer18WebSDK.trackConversion(options);

// Сбросить cookie
Offer18WebSDK.clearCookies();

// Включить логгер
Offer18WebSDK.activateDebugMode();
```

***

### Поток конверсии

Поток конверсии — это последовательность, в которой Node SDK будет отслеживать только конверсии. Чтобы реализовать поток конверсии, после инициализации SDK вам нужно добавить методы в следующем порядке::

<mark style="color:purple;">Размещение: при загрузке страницы или после монтирования компонента</mark>

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

then

<mark style="color:purple;">Размещение: страница благодарности / страница успешного заказа</mark>

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

{% hint style="info" %}
Узнайте больше о **YOUR-CLICK-ID-PARAMETER** **&** **options** in [**Обзор методов**](#method-overview)
{% endhint %}

***

### Поток SDK

Поток SDK — это последовательность, которая позволяет пользователям отслеживать весь процесс конверсии в Node SDK, включая отслеживание показов, кликов и конверсий. После инициализации SDK вам нужно добавить методы в следующем порядке:

<mark style="color:purple;">Размещение: при загрузке страницы или после монтирования компонента</mark>

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

then

<mark style="color:purple;">Размещение: можно размещать на всех страницах (при загрузке страницы или после монтирования компонента)</mark>

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

then

<mark style="color:purple;">Размещение: страница благодарности / страница успешного заказа</mark>

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

{% hint style="info" %}
Узнайте больше о **options** in [**Обзор методов**](#method-overview)
{% endhint %}

***

### Обзор методов

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

Этот метод используется для инициализации конверсии. Вам нужно добавить этот метод либо при загрузке страницы, либо после монтирования компонента.&#x20;

{% hint style="info" %}
Замените **YOUR-CLICK-ID-PARAMETER** на ключ параметра, который используется для принятия значения из **{tid}** токена в URL оффера.
{% endhint %}

#### trackClick(options)

Этот метод используется для отслеживания кликов.

* **Parameters**:
  * `options` (object): Configuration options.

<table><thead><tr><th width="166">Parameter</th><th width="92">Type</th><th>Description</th></tr></thead><tbody><tr><td><code>trackingURL</code></td><td>string</td><td><strong>Mandatory</strong>: Tracking URL which can be extracted from Offer18 dashboard</td></tr><tr><td><code>keymapping</code></td><td>array</td><td>An array of Offer18 parameters and Native parameters in the format <code>&#x3C;OFFER18-PARAMETER>:&#x3C;YOUR-PARAMETER></code>. User can replace <code>&#x3C;OFFER18-PARAMETER></code> with Offer18 Parameters like <code>aff_sub1</code>, <code>aff_sub2</code> and <code>&#x3C;YOUR-PARAMETER></code> with their parameters in which user is getting values from their network.</td></tr></tbody></table>

**Example code**&#x20;

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

#### trackImpression(options)

This method is utilized for tracking impressions.

* **Parameters**:
  * `options` (object): Configuration options.

<table><thead><tr><th width="184">Parameter</th><th width="97">Type</th><th>Description</th></tr></thead><tbody><tr><td><code>impressionURL</code></td><td>string</td><td><strong>Mandatory</strong>: Tracking URL which can be extracted from Offer18 dashboard</td></tr><tr><td><code>keymapping</code></td><td>array</td><td>An array of Offer18 parameters and Native parameters in the format <code>&#x3C;OFFER18-PARAMETER>:&#x3C;YOUR-PARAMETER></code>. User can replace <code>&#x3C;OFFER18-PARAMETER></code> with Offer18 Parameters like <code>aff_sub1</code>, <code>aff_sub2</code> and <code>&#x3C;YOUR-PARAMETER></code> with their parameters in which user is getting values from their network.</td></tr></tbody></table>

**Example code**&#x20;

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

#### trackConversion(options)

This method is utilized for tracking conversions.

* **Parameters**:
  * `options` (object): Configuration options.

<table><thead><tr><th width="257">Parameter</th><th width="149">Type</th><th>Description</th></tr></thead><tbody><tr><td><code>domain</code></td><td>string</td><td><strong>Mandatory</strong>: Postback domain of the user.</td></tr><tr><td><code>accountId</code></td><td>string</td><td><strong>Mandatory</strong>: Offer18 account id of the user.</td></tr><tr><td><code>offerId</code></td><td>string</td><td><strong>Mandatory</strong>: Id of the campaign.</td></tr><tr><td><code>coupon</code></td><td>string</td><td>Coupon code can be used here.</td></tr><tr><td><code>postbackType</code></td><td>string</td><td>It can be either 'iframe' or 'pixel', default value is 'iframe'.</td></tr><tr><td><code>isGlobalPixel</code></td><td>boolean</td><td>User can configure global pixel by setting this true, default value is false.</td></tr><tr><td><code>allowMultiConversion</code></td><td>boolean</td><td>User can allow MultiConversion by setting this true, default value is false.</td></tr><tr><td><code>conversionData</code></td><td>object</td><td>This object contains the parameters which can be used to get values from the network.</td></tr></tbody></table>

<mark style="color:purple;">conversionData</mark> **Object**

<table><thead><tr><th width="167">Parameter</th><th width="126">Type</th><th>Description</th></tr></thead><tbody><tr><td><code>event</code></td><td>string</td><td>Event Name (Please specify the event)</td></tr><tr><td><code>payout</code></td><td>string</td><td>Payout Amount (Please specify the payout amount)</td></tr><tr><td><code>sale</code></td><td>string</td><td>Sale Amount (Please specify the sale amount)</td></tr><tr><td><code>currency</code></td><td>string</td><td>Currency code</td></tr><tr><td><code>adv_sub1</code></td><td>string</td><td>Advertiser sub parameter 1</td></tr><tr><td><code>adv_sub2</code></td><td>string</td><td>Advertiser sub parameter 2</td></tr><tr><td><code>adv_sub3</code></td><td>string</td><td>Advertiser sub parameter 3</td></tr><tr><td><code>adv_sub4</code></td><td>string</td><td>Advertiser sub parameter 4</td></tr><tr><td><code>adv_sub5</code></td><td>string</td><td>Advertiser sub parameter 5</td></tr></tbody></table>

**Example code**

```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()

Этот метод используется для удаления всех first-party cookie, добавленных этим пакетом.

#### activateDebugMode()

Этот метод используется для включения логгера. Журналы каждого действия, выполненного этим пакетом, будут видны в консоли инструментов разработчика браузера. Вам нужно добавить этот метод сразу после инициализации SDK

### Совместимость Node SDK с frontend-фреймворками и библиотеками

Следующие frontend **фреймворки и библиотеки** совместимы с 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 %}