# SDK Node

### **Começar**

Para começar a rastrear usando o Node SDK da Offer18, você precisará integrar o SDK ao seu aplicativo web como um módulo Node.

\
Descubra a versão estável mais recente do pacote Node

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

***

### Instalação

Você pode instalar o pacote usando npm:

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

ou

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

***

### Uso

#### Importar

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

#### Inicializar

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

#### Métodos disponíveis

```javascript
// Inicializar Conversão
Offer18WebSDK.initializeUrlParam('YOUR-CLICK-ID-PARAMETER');

// Registrar Clique
Offer18WebSDK.trackClick(options);

// Registrar Impressão
Offer18WebSDK.trackImpression(options);

// Registrar Conversão
Offer18WebSDK.trackConversion(options);

// Redefinir Cookies
Offer18WebSDK.clearCookies();

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

***

### Fluxo de conversão

O fluxo de conversão é a sequência na qual apenas as conversões serão rastreadas pelo Node SDK. Para implementar o fluxo de conversão, após inicializar o SDK, você precisa adicionar os métodos na seguinte ordem::

<mark style="color:roxo;">Posicionamento : Carregamento da página ou após o componente montar</mark>

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

então

<mark style="color:roxo;">Posicionamento : Página de agradecimento/Página de sucesso do pedido</mark>

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

{% hint style="info" %}
Saiba mais sobre **YOUR-CLICK-ID-PARAMETER** **&** **opções** em [**Visão geral do método**](#method-overview)
{% endhint %}

***

### Fluxo do SDK

O fluxo do SDK é a sequência que permite aos usuários rastrear todo o processo de conversão no Node SDK, incluindo rastreamento de impressões, cliques e conversões. Após inicializar o SDK, você precisa adicionar os métodos na seguinte ordem:

<mark style="color:roxo;">Posicionamento : Carregamento da página ou após o componente montar</mark>

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

então

<mark style="color:roxo;">Posicionamento: Pode ser colocado em todas as páginas (no carregamento da página ou após o componente montar)</mark>

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

então

<mark style="color:roxo;">Posicionamento : Página de agradecimento/Página de sucesso do pedido</mark>

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

{% hint style="info" %}
Saiba mais sobre **opções** em [**Visão geral do método**](#method-overview)
{% endhint %}

***

### Visão geral do método

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

Este método é usado para inicializar a conversão. Você precisa adicionar este método no carregamento da página ou após o componente montar.&#x20;

{% hint style="info" %}
Substitua **YOUR-CLICK-ID-PARAMETER** pelo nome da chave de parâmetro que é usado para aceitar o valor do **{tid}** token na URL da oferta.
{% endhint %}

#### trackClick(options)

Este método é utilizado para rastrear cliques.

* **Parâmetros**:
  * `opções` (object): Opções de configuração.

<table><thead><tr><th width="166">Parâmetro</th><th width="92">Tipo</th><th>Descrição</th></tr></thead><tbody><tr><td><code>trackingURL</code></td><td>string</td><td><strong>Obrigatório</strong>: URL de rastreamento que pode ser extraída do painel da Offer18</td></tr><tr><td><code>keymapping</code></td><td>array</td><td>Um array de parâmetros da Offer18 e parâmetros nativos no formato <code>&#x3C;OFFER18-PARAMETER>:&#x3C;YOUR-PARAMETER></code>. O usuário pode substituir <code>&#x3C;OFFER18-PARAMETER></code> por parâmetros da Offer18 como <code>aff_sub1</code>, <code>aff_sub2</code> e <code>&#x3C;YOUR-PARAMETER></code> pelos parâmetros em que o usuário está obtendo valores de sua rede.</td></tr></tbody></table>

**Exemplo de código**&#x20;

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

#### trackImpression(options)

Este método é utilizado para rastrear impressões.

* **Parâmetros**:
  * `opções` (object): Opções de configuração.

<table><thead><tr><th width="184">Parâmetro</th><th width="97">Tipo</th><th>Descrição</th></tr></thead><tbody><tr><td><code>impressionURL</code></td><td>string</td><td><strong>Obrigatório</strong>: URL de rastreamento que pode ser extraída do painel da Offer18</td></tr><tr><td><code>keymapping</code></td><td>array</td><td>Um array de parâmetros da Offer18 e parâmetros nativos no formato <code>&#x3C;OFFER18-PARAMETER>:&#x3C;YOUR-PARAMETER></code>. O usuário pode substituir <code>&#x3C;OFFER18-PARAMETER></code> por parâmetros da Offer18 como <code>aff_sub1</code>, <code>aff_sub2</code> e <code>&#x3C;YOUR-PARAMETER></code> pelos parâmetros em que o usuário está obtendo valores de sua rede.</td></tr></tbody></table>

**Exemplo de código**&#x20;

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

#### trackConversion(options)

Este método é utilizado para rastrear conversões.

* **Parâmetros**:
  * `opções` (object): Opções de configuração.

<table><thead><tr><th width="257">Parâmetro</th><th width="149">Tipo</th><th>Descrição</th></tr></thead><tbody><tr><td><code>domain</code></td><td>string</td><td><strong>Obrigatório</strong>: Domínio de postback do usuário.</td></tr><tr><td><code>accountId</code></td><td>string</td><td><strong>Obrigatório</strong>: ID da conta Offer18 do usuário.</td></tr><tr><td><code>offerId</code></td><td>string</td><td><strong>Obrigatório</strong>: ID da campanha.</td></tr><tr><td><code>coupon</code></td><td>string</td><td>Código de cupom pode ser usado aqui.</td></tr><tr><td><code>postbackType</code></td><td>string</td><td>Pode ser 'iframe' ou 'pixel', o valor padrão é 'iframe'.</td></tr><tr><td><code>isGlobalPixel</code></td><td>boolean</td><td>O usuário pode configurar pixel global definindo isto como true, o valor padrão é false.</td></tr><tr><td><code>allowMultiConversion</code></td><td>boolean</td><td>O usuário pode permitir MultiConversion definindo isto como true, o valor padrão é false.</td></tr><tr><td><code>conversionData</code></td><td>object</td><td>Este objeto contém os parâmetros que podem ser usados para obter valores da rede.</td></tr></tbody></table>

<mark style="color:roxo;">conversionData</mark> **Objeto**

<table><thead><tr><th width="167">Parâmetro</th><th width="126">Tipo</th><th>Descrição</th></tr></thead><tbody><tr><td><code>evento</code></td><td>string</td><td>Nome do evento (Por favor, especifique o evento)</td></tr><tr><td><code>payout</code></td><td>string</td><td>Valor do pagamento (Por favor, especifique o valor do pagamento)</td></tr><tr><td><code>sale</code></td><td>string</td><td>Valor da venda (Por favor, especifique o valor da venda)</td></tr><tr><td><code>currency</code></td><td>string</td><td>Código da moeda</td></tr><tr><td><code>adv_sub1</code></td><td>string</td><td>Parâmetro sub do anunciante 1</td></tr><tr><td><code>adv_sub2</code></td><td>string</td><td>Parâmetro sub do anunciante 2</td></tr><tr><td><code>adv_sub3</code></td><td>string</td><td>Parâmetro sub do anunciante 3</td></tr><tr><td><code>adv_sub4</code></td><td>string</td><td>Parâmetro sub do anunciante 4</td></tr><tr><td><code>adv_sub5</code></td><td>string</td><td>Parâmetro sub do anunciante 5</td></tr></tbody></table>

**Exemplo de código**

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

Este método é utilizado para remover todos os cookies de primeira parte adicionados por este pacote.

#### activateDebugMode()

Este método é utilizado para habilitar o logger. Os logs de toda ação executada por este pacote ficarão visíveis no console das ferramentas de desenvolvedor do navegador. Você precisa adicionar este método imediatamente após inicializar o SDK

### Compatibilidade do Node SDK com Frameworks e Bibliotecas Frontend

As seguintes **frameworks e bibliotecas** são compatíveis com os Node SDKs e podem usá-los perfeitamente 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 %}