# 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.


---

# 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-web.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.