> 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/es/red/sdk/sdk-web.md).

# SDK web

## **Comenzar**

Para empezar a rastrear con el SDK web de Offer18, siga las instrucciones que se indican a continuación.

## Rastrear clics

Para rastrear clics usando el SDK, agregue el siguiente código a su script.

<mark style="color:morado;">Ubicación: Encabezado (Todas las páginas)</mark>

{% code fullWidth="false" %}

```html
<script src="https://web-resources.offer18.net/sdk/web/WebSDK.js"></script>
<script>
    window.Offer18WebSDK.trackClick({
        trackingURL: '<TU-ENLACE-DE-RASTREO>',
        keymapping: ['<PARÁMETRO-OFFER18>:<TU-PARÁMETRO>', '<PARÁMETRO-OFFER18>:<TU-PARÁMETRO>',... ]
    });
</script>
```

{% endcode %}

{% tabs %}
{% tab title="Configuración del objeto - window\.Offer18WebSDK.trackclick()" %}

1. **trackingURL** (Obligatorio): URL de rastreo que se puede extraer del panel de Offer18.
2. **keymapping** : es una matriz de parámetros de Offer18 y parámetros nativos en un formato de `<PARÁMETRO-OFFER18>:<TU-PARÁMETRO>`. El usuario puede reemplazar `<PARÁMETRO-OFFER18>`  con parámetros de Offer18 como aff\_sub1, aff\_sub2 y `<TU-PARÁMETRO>` con sus parámetros en los cuales el usuario está obteniendo valores de su red.
   {% endtab %}
   {% endtabs %}

#### **Código de ejemplo**

```html
<script src="https://web-resources.offer18.net/sdk/web/WebSDK.js"></script>
<script>
    window.Offer18WebSDK.trackClick({
        trackingURL: 'https://example.o18.click/c?o=0000000&m=0000',
        keymapping: ['a:<TU-PARÁMETRO>']
    });
</script>
```

`En el ejemplo anterior`` `**`a`**` ``es`` `**`ID de afiliado`**` ``en el mapeo de claves`

***

## Rastrear impresiones

Para rastrear impresiones usando el SDK, agregue el siguiente código a su script

<mark style="color:morado;">Ubicación: Encabezado (Todas las páginas)</mark>

{% code fullWidth="false" %}

```html
<script src="https://web-resources.offer18.net/sdk/web/WebSDK.js"></script>
<script>
    window.Offer18WebSDK.trackImpression({
        impressionURL: '<TU-URL-DE-IMPRESIÓN>',
        keymapping: ['<PARÁMETRO-OFFER18>:<TU-PARÁMETRO>', '<PARÁMETRO-OFFER18>:<TU-PARÁMETRO>',... ]
    });
</script>
```

{% endcode %}

{% tabs %}
{% tab title="Configuración del objeto - window\.Offer18WebSDK.trackImpression()" %}

1. **impressionURL** (Obligatorio): URL de impresión que se puede extraer del panel de Offer18.
2. **keymapping** : es una matriz de parámetros de Offer18 y parámetros nativos en un formato de `<PARÁMETRO-OFFER18>:<TU-PARÁMETRO>`. El usuario puede reemplazar `<PARÁMETRO-OFFER18>`  con parámetros de Offer18 como aff\_sub1, aff\_sub2 y `<TU-PARÁMETRO>` con sus parámetros en los cuales el usuario está obteniendo valores de su red.
   {% endtab %}
   {% endtabs %}

#### **Código de ejemplo**

```html
<script src="https://web-resources.offer18.net/sdk/web/WebSDK.js"></script>
<script>
    window.Offer18WebSDK.trackImpression({
        impressionURL: 'https://example.o18.click/i?o=0000000&m=0000',
        keymapping: ['a:<TU-PARÁMETRO>']
    });
</script>
```

`En el ejemplo anterior`` `**`a`**` ``es`` `**`ID de afiliado`**` ``en el mapeo de claves`

***

## Rastrear conversiones

Los usuarios deben agregar el siguiente fragmento de código en todas las páginas de destino excepto la página de confirmación de pedido / página de éxito del pedido (Gracias).

<mark style="color:morado;">Ubicación: Encabezado (Todas las páginas)</mark>

```html
<script src="https://web-resources.offer18.net/sdk/web/WebSDK.js"></script>
<script>
    window.Offer18WebSDK.initializeUrlParam('<TU-PARÁMETRO-ID-DE-CLICK>');
</script>
```

Después de agregar el script, se debe agregar el siguiente script en la página de agradecimiento/confirmación de pedido

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

```html
<script src="https://web-resources.offer18.net/sdk/web/WebSDK.js"></script>
<script>
    window.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 (Por favor especifique el evento)
            payout: '', // Monto del pago (Por favor especifique el monto del pago)
            sale: '', // Monto de la venta (Por favor especifique el monto de la venta)
            currency: '',
            adv_sub1: '',
            adv_sub2: '',
            adv_sub3: '',
            adv_sub4: '',
            adv_sub5: '',
        }
    })
</script>
```

{% tabs %}
{% tab title="Configuración del objeto - window\.Offer18WebSDK.trackConversion()" %}

1. **domain** (Obligatorio): Dominio de postback del usuario.
2. **accountId** (Obligatorio): ID de cuenta de Offer18 del usuario.
3. **offerId** (Obligatorio): ID de la campaña.
4. **coupon :** Aquí se puede usar el código de cupón
5. **postbackType** : Puede ser `'iframe'` o `'pixel'`, el valor predeterminado es `'iframe'`.&#x20;
6. **isGlobalPixel** : El usuario puede configurar el pixel global ajustando esto `true` , el valor predeterminado es `false`.
7. **allowMultiConversion** : El usuario puede permitir MultiConversion ajustando esto `true` , el valor predeterminado es `false`.&#x20;
8. **conversionData** : Este objeto contiene los parámetros que se pueden usar para obtener valores de la red.
   {% endtab %}
   {% endtabs %}

#### **Código de ejemplo**

<pre class="language-html"><code class="lang-html">&#x3C;script src="https://web-resources.offer18.net/sdk/web/WebSDK.js">&#x3C;/script>
<strong>&#x3C;script>
</strong>    window.Offer18WebSDK.trackConversion({
        domain: 'example.o18.link',
        accountId: '0000',
        offerId: '00000000',
    });
&#x3C;/script>
</code></pre>

***

## Modo de depuración

Para habilitar el modo de depuración en el SDK, se puede agregar el siguiente código dentro de su script:

```html
<script>
    window.Offer18WebSDK.activateDebugMode();
</script>
```

Habilitar el modo de depuración permite al usuario obtener información más detallada sobre el funcionamiento del SDK, incluidos errores o mensajes de depuración.