# SDK de Node

### **Comenzar**

Para comenzar a rastrear usando el SDK de Node de Offer18, necesitarás integrar el SDK en tu aplicación web como un módulo de Node.

\
Descubre la versión estable más reciente del paquete de Node

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

***

### Instalación

Puedes instalar el paquete usando npm:

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

o

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

***

### Uso

#### Importar

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

#### Inicializar

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

#### Métodos disponibles

```javascript
// Inicializar conversión
Offer18WebSDK.initializeUrlParam('YOUR-CLICK-ID-PARAMETER');

// Registrar clic
Offer18WebSDK.trackClick(options);

// Registrar impresión
Offer18WebSDK.trackImpression(options);

// Registrar conversión
Offer18WebSDK.trackConversion(options);

// Restablecer cookies
Offer18WebSDK.clearCookies();

// Activar registrador
Offer18WebSDK.activateDebugMode();
```

***

### Flujo de conversión

El flujo de conversión es la secuencia en la que solo las conversiones serán rastreadas por el SDK de Node. Para implementar el flujo de conversión, después de inicializar el SDK, necesitas agregar métodos en el siguiente orden::

<mark style="color:morado;">Ubicación: Carga de página o después de que el componente se monte</mark>

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

entonces

<mark style="color:morado;">Ubicación: Página de agradecimiento/Página de éxito de pedido</mark>

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

{% hint style="info" %}
Saber más sobre **YOUR-CLICK-ID-PARAMETER** **&** **opciones** en [**Resumen del método**](#method-overview)
{% endhint %}

***

### Flujo del SDK

El flujo del SDK es la secuencia que permite a los usuarios rastrear todo el proceso de conversión en el SDK de Node, incluyendo el rastreo de impresiones, clics y conversiones. Después de inicializar el SDK, necesitas agregar métodos en el siguiente orden:

<mark style="color:morado;">Ubicación: Carga de página o después de que el componente se monte</mark>

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

entonces

<mark style="color:morado;">Ubicación: Se puede colocar en todas las páginas (en la carga de la página o después de que el componente se monte)</mark>

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

entonces

<mark style="color:morado;">Ubicación: Página de agradecimiento/Página de éxito de pedido</mark>

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

{% hint style="info" %}
Saber más sobre **opciones** en [**Resumen del método**](#method-overview)
{% endhint %}

***

### Resumen del método

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

Este método se utiliza para inicializar la conversión. Debes agregar este método ya sea en la carga de la página o después de que el componente se monte.&#x20;

{% hint style="info" %}
Reemplaza **YOUR-CLICK-ID-PARAMETER** con la clave de parámetro que se usa para aceptar el valor del **{tid}** token en la URL de la oferta.
{% endhint %}

#### trackClick(options)

Este método se utiliza para rastrear clics.

* **Parámetros**:
  * `opciones` (object): Opciones de configuración.

<table><thead><tr><th width="166">Parámetro</th><th width="92">Tipo</th><th>Descripción</th></tr></thead><tbody><tr><td><code>trackingURL</code></td><td>string</td><td><strong>Obligatorio</strong>: URL de seguimiento que puede extraerse del panel de Offer18</td></tr><tr><td><code>keymapping</code></td><td>array</td><td>Un arreglo de parámetros de Offer18 y parámetros nativos en el formato <code>&#x3C;OFFER18-PARAMETER>:&#x3C;YOUR-PARAMETER></code>. El usuario puede reemplazar <code>&#x3C;OFFER18-PARAMETER></code> con parámetros de Offer18 como <code>aff_sub1</code>, <code>aff_sub2</code> y <code>&#x3C;YOUR-PARAMETER></code> con sus parámetros de los cuales el usuario obtiene valores de su red.</td></tr></tbody></table>

**Código de ejemplo**&#x20;

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

#### trackImpression(options)

Este método se utiliza para rastrear impresiones.

* **Parámetros**:
  * `opciones` (object): Opciones de configuración.

<table><thead><tr><th width="184">Parámetro</th><th width="97">Tipo</th><th>Descripción</th></tr></thead><tbody><tr><td><code>impressionURL</code></td><td>string</td><td><strong>Obligatorio</strong>: URL de seguimiento que puede extraerse del panel de Offer18</td></tr><tr><td><code>keymapping</code></td><td>array</td><td>Un arreglo de parámetros de Offer18 y parámetros nativos en el formato <code>&#x3C;OFFER18-PARAMETER>:&#x3C;YOUR-PARAMETER></code>. El usuario puede reemplazar <code>&#x3C;OFFER18-PARAMETER></code> con parámetros de Offer18 como <code>aff_sub1</code>, <code>aff_sub2</code> y <code>&#x3C;YOUR-PARAMETER></code> con sus parámetros de los cuales el usuario obtiene valores de su red.</td></tr></tbody></table>

**Código de ejemplo**&#x20;

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

#### trackConversion(options)

Este método se utiliza para rastrear conversiones.

* **Parámetros**:
  * `opciones` (object): Opciones de configuración.

<table><thead><tr><th width="257">Parámetro</th><th width="149">Tipo</th><th>Descripción</th></tr></thead><tbody><tr><td><code>dominio</code></td><td>string</td><td><strong>Obligatorio</strong>: Dominio de postback del usuario.</td></tr><tr><td><code>accountId</code></td><td>string</td><td><strong>Obligatorio</strong>: Id de cuenta de Offer18 del usuario.</td></tr><tr><td><code>offerId</code></td><td>string</td><td><strong>Obligatorio</strong>: Id de la campaña.</td></tr><tr><td><code>cupón</code></td><td>string</td><td>Aquí se puede usar el código de cupón.</td></tr><tr><td><code>postbackType</code></td><td>string</td><td>Puede ser 'iframe' o 'pixel', el valor predeterminado es 'iframe'.</td></tr><tr><td><code>isGlobalPixel</code></td><td>boolean</td><td>El usuario puede configurar un píxel global estableciendo esto en true, el valor predeterminado es false.</td></tr><tr><td><code>allowMultiConversion</code></td><td>boolean</td><td>El usuario puede permitir MultiConversion estableciendo esto en true, el valor predeterminado es false.</td></tr><tr><td><code>conversionData</code></td><td>object</td><td>Este objeto contiene los parámetros que pueden usarse para obtener valores de la red.</td></tr></tbody></table>

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

<table><thead><tr><th width="167">Parámetro</th><th width="126">Tipo</th><th>Descripción</th></tr></thead><tbody><tr><td><code>evento</code></td><td>string</td><td>Nombre del evento (Por favor especifica el evento)</td></tr><tr><td><code>payout</code></td><td>string</td><td>Monto del pago (Por favor especifica el monto del pago)</td></tr><tr><td><code>sale</code></td><td>string</td><td>Monto de la venta (Por favor especifica el monto de la venta)</td></tr><tr><td><code>moneda</code></td><td>string</td><td>Código de moneda</td></tr><tr><td><code>adv_sub1</code></td><td>string</td><td>Parámetro sub del anunciante 1</td></tr><tr><td><code>adv_sub2</code></td><td>string</td><td>Parámetro sub del anunciante 2</td></tr><tr><td><code>adv_sub3</code></td><td>string</td><td>Parámetro sub del anunciante 3</td></tr><tr><td><code>adv_sub4</code></td><td>string</td><td>Parámetro sub del anunciante 4</td></tr><tr><td><code>adv_sub5</code></td><td>string</td><td>Parámetro sub del anunciante 5</td></tr></tbody></table>

**Código de ejemplo**

```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 se utiliza para eliminar todas las cookies de primera parte agregadas por este paquete.

#### activateDebugMode()

Este método se utiliza para habilitar el registrador. Los registros de cada acción realizada por este paquete serán visibles en la consola de herramientas de desarrollo del navegador. Debes agregar este método inmediatamente después de inicializar el SDK

### Compatibilidad del SDK de Node con frameworks y bibliotecas frontend

Los siguientes **frameworks y bibliotecas** son compatibles con los SDKs de Node y pueden usarse sin problemas vía 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 %}