# SDK de Node

### **Comenzar**

Para empezar a realizar el seguimiento usando el SDK de Node de Offer18, deberás integrar el SDK en tu aplicación web como un módulo de Node.

\
Encuentra la última versión estable 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 registro
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 añadir métodos en el siguiente orden::

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

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

luego

<mark style="color:morado;">Ubicación: página de agradecimiento/página de éxito del 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 seguimiento de impresiones, clics y conversiones. Después de inicializar el SDK, necesitas añadir métodos en el siguiente orden:

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

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

luego

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

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

luego

<mark style="color:morado;">Ubicación: página de agradecimiento/página de éxito del 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 añadir este método ya sea al cargar la página o después de que el componente se monte.&#x20;

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

#### trackClick(options)

Este método se utiliza para rastrear clics.

* **Parámetros**:
  * `opciones` (objeto): 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>cadena</td><td><strong>Obligatorio</strong>: URL de seguimiento que se puede extraer 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;PARÁMETRO-OFFER18>:&#x3C;TU-PARÁMETRO></code>. El usuario puede reemplazar <code>&#x3C;PARÁMETRO-OFFER18></code> con parámetros de Offer18 como <code>aff_sub1</code>, <code>aff_sub2</code> y <code>&#x3C;TU-PARÁMETRO></code> con sus parámetros en los que el usuario está obteniendo 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:<TU-PARÁMETRO>']
});
```

#### trackImpression(options)

Este método se utiliza para rastrear impresiones.

* **Parámetros**:
  * `opciones` (objeto): 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>cadena</td><td><strong>Obligatorio</strong>: URL de seguimiento que se puede extraer 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;PARÁMETRO-OFFER18>:&#x3C;TU-PARÁMETRO></code>. El usuario puede reemplazar <code>&#x3C;PARÁMETRO-OFFER18></code> con parámetros de Offer18 como <code>aff_sub1</code>, <code>aff_sub2</code> y <code>&#x3C;TU-PARÁMETRO></code> con sus parámetros en los que el usuario está obteniendo 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:<TU-PARÁMETRO>']
});
```

#### trackConversion(options)

Este método se utiliza para rastrear conversiones.

* **Parámetros**:
  * `opciones` (objeto): 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>cadena</td><td><strong>Obligatorio</strong>: dominio de postback del usuario.</td></tr><tr><td><code>accountId</code></td><td>cadena</td><td><strong>Obligatorio</strong>: ID de la cuenta Offer18 del usuario.</td></tr><tr><td><code>offerId</code></td><td>cadena</td><td><strong>Obligatorio</strong>: ID de la campaña.</td></tr><tr><td><code>cupón</code></td><td>cadena</td><td>El código de cupón se puede usar aquí.</td></tr><tr><td><code>postbackType</code></td><td>cadena</td><td>Puede ser 'iframe' o 'pixel'; el valor predeterminado es 'iframe'.</td></tr><tr><td><code>isGlobalPixel</code></td><td>booleano</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>booleano</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>objeto</td><td>Este objeto contiene los parámetros que se pueden usar 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>cadena</td><td>Nombre del evento (especifica el evento)</td></tr><tr><td><code>payout</code></td><td>cadena</td><td>Monto del pago (especifica el monto del pago)</td></tr><tr><td><code>sale</code></td><td>cadena</td><td>Monto de la venta (especifica el monto de la venta)</td></tr><tr><td><code>currency</code></td><td>cadena</td><td>Código de moneda</td></tr><tr><td><code>adv_sub1</code></td><td>cadena</td><td>Subparámetro 1 del anunciante</td></tr><tr><td><code>adv_sub2</code></td><td>cadena</td><td>Subparámetro 2 del anunciante</td></tr><tr><td><code>adv_sub3</code></td><td>cadena</td><td>Subparámetro 3 del anunciante</td></tr><tr><td><code>adv_sub4</code></td><td>cadena</td><td>Subparámetro 4 del anunciante</td></tr><tr><td><code>adv_sub5</code></td><td>cadena</td><td>Subparámetro 5 del anunciante</td></tr></tbody></table>

**Código de ejemplo**

```javascript
Offer18WebSDK.trackConversion({
        domain: '',
        accountId: '',
        offerId: '',
        coupon:'',
        postbackType: '', // 'iframe' o 'pixel'
        isGlobalPixel: false, // true o false
        allowMultiConversion: false, // true o false
        conversionData: {
            event: '', // Nombre del evento (especifica el evento)
            payout: '', // Monto del pago (especifica el monto del pago)
            sale: '', // Monto de la venta (especifica el monto de la venta)
            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 añadidas 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 desarrollador del navegador. Debes añadir este método inmediatamente después de inicializar el SDK

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

Los siguientes frameworks **y bibliotecas de frontend** son compatibles con los SDK de Node y pueden usarlos sin problemas a través de 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/es/red/sdk/sdk-de-node.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.