# Node SDK

### **Get started**

To start tracking using Offer18's Node SDK, you'll need to integrate the SDK into your web application as a node module.

\
Find out latest stable version of Node Package

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

***

### Installation

You can install the package using npm:

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

or

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

***

### Usage

#### Import

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

#### Initialize

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

#### Available Methods

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

***

### Conversion flow

The conversion flow is the sequence in which only conversions will be tracked by the Node SDK. To implement the conversion flow, After initializing the SDK, you need to add methods in the following order::

<mark style="color:purple;">Placement : Page load or after the component mounts</mark>

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

then

<mark style="color:purple;">Placement : Thank you Page/Order Success Page</mark>

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

{% hint style="info" %}
Know more about **YOUR-CLICK-ID-PARAMETER** **&** **options** in [**Method Overview**](#method-overview)
{% endhint %}

***

### SDK flow

The SDK flow is the sequence that allows users to track the entire conversion process in the Node SDK, including tracking impressions, clicks, and conversions. After initializing the SDK, you need to add methods in the following order:

<mark style="color:purple;">Placement : Page load or after the component mounts</mark>

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

then

<mark style="color:purple;">Placement: Can be placed on all pages (on page load or after the component mounts)</mark>

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

then

<mark style="color:purple;">Placement : Thank you Page/Order Success Page</mark>

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

{% hint style="info" %}
Know more about **options** in [**Method Overview**](#method-overview)
{% endhint %}

***

### Method Overview

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

This method is used to initialize the conversion. You need to add this method either on page load or after the component mounts.&#x20;

{% hint style="info" %}
Replace **YOUR-CLICK-ID-PARAMETER** with the parameter key that is used to accept the value from the **{tid}** token in the offer URL.
{% endhint %}

#### trackClick(options)

This method is utilized for tracking clicks.

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

This method is utilized for removing all first-party cookies added by this package.

#### activateDebugMode()

This method is utilized for enabling the logger. Logs of every action performed by this package will be visible in the browser's developer tools console. You need to add this method immediately after initializing the SDK

### Node SDK Compatibility with Frontend Frameworks and Libraries

The following frontend **frameworks and libraries** are compatible with Node SDKs and can use them seamlessly via 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/network/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.