# Web SDK

## **Começar**

Para começar a rastrear com o SDK web da Offer18, siga as instruções abaixo.

## Rastrear Cliques

Para rastrear cliques usando o SDK, adicione o código a seguir ao seu script.

<mark style="color:roxo;">Posicionamento : Cabeçalho (Todas as Páginas)</mark>

{% code fullWidth="false" %}

```html
<script src="https://web-resources.offer18.net/sdk/web/WebSDK.js"></script>
<script>
    window.Offer18WebSDK.trackClick({
        trackingURL: '<YOUR-TRACKING-LINK>',
        keymapping: ['<OFFER18-PARAMETER>:<YOUR-PARAMETER>', '<OFFER18-PARAMETER>:<YOUR-PARAMETER>',...]
    });
</script>
```

{% endcode %}

{% tabs %}
{% tab title="Configuração do Objeto - window\.Offer18WebSDK.trackclick()" %}

1. **trackingURL** (Obrigatório) : URL de rastreamento que pode ser extraída do painel da Offer18.
2. **keymapping** : é um array de parâmetros da Offer18 e parâmetros nativos no formato `<OFFER18-PARAMETER>:<YOUR-PARAMETER>`. O usuário pode substituir `<OFFER18-PARAMETER>`  por parâmetros da Offer18 como aff\_sub1, aff\_sub2 e `<YOUR-PARAMETER>` pelos seus parâmetros nos quais o usuário está obtendo valores da sua rede.
   {% endtab %}
   {% endtabs %}

#### **Código de exemplo**

```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:<YOUR-PARAMETER>']
    });
</script>
```

`No exemplo acima`` `**`a`**` ``é`` `**`ID do Afiliado`**` ``no Mapeamento de Chave`

***

## Rastrear Impressões

Para rastrear impressões usando o SDK, adicione o código a seguir ao seu script

<mark style="color:roxo;">Posicionamento : Cabeçalho (Todas as Páginas)</mark>

{% code fullWidth="false" %}

```html
<script src="https://web-resources.offer18.net/sdk/web/WebSDK.js"></script>
<script>
    window.Offer18WebSDK.trackImpression({
        impressionURL: '<YOUR-IMPRESSION-URL>',
        keymapping: ['<OFFER18-PARAMETER>:<YOUR-PARAMETER>', '<OFFER18-PARAMETER>:<YOUR-PARAMETER>',...]
    });
</script>
```

{% endcode %}

{% tabs %}
{% tab title="Configuração do Objeto - window\.Offer18WebSDK.trackImpression()" %}

1. **impressionURL** (Obrigatório) : URL de impressão que pode ser extraída do painel da Offer18.
2. **keymapping** : é um array de parâmetros da Offer18 e parâmetros nativos no formato `<OFFER18-PARAMETER>:<YOUR-PARAMETER>`. O usuário pode substituir `<OFFER18-PARAMETER>`  por parâmetros da Offer18 como aff\_sub1, aff\_sub2 e `<YOUR-PARAMETER>` pelos seus parâmetros nos quais o usuário está obtendo valores da sua rede.
   {% endtab %}
   {% endtabs %}

#### **Código de exemplo**

```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:<YOUR-PARAMETER>']
    });
</script>
```

`No exemplo acima`` `**`a`**` ``é`` `**`ID do Afiliado`**` ``no Mapeamento de Chave`

***

## Rastrear Conversões

Os usuários devem adicionar o trecho de código a seguir em todas as páginas de destino, exceto na página de confirmação de pedido / página de sucesso do pedido (Obrigado).

<mark style="color:roxo;">Posicionamento : Cabeçalho (Todas as Páginas)</mark>

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

Após adicionar o script, é necessário adicionar o script a seguir na página de obrigado/confirmacao-de-pedido

<mark style="color:roxo;">Posicionamento : Página de Obrigado/Página de Sucesso do Pedido (Uma 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' 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: '',
        }
    })
</script>
```

{% tabs %}
{% tab title="Configuração do Objeto - window\.Offer18WebSDK.trackConversion()" %}

1. **domain** (Obrigatório) : Domínio de postback do usuário.
2. **accountId** (Obrigatório) : ID de conta Offer18 do usuário.
3. **offerId** (Obrigatório) : ID da campanha.
4. **coupon :** Código de cupom pode ser usado aqui
5. **postbackType** : Pode ser ou `'iframe'` ou `'pixel'`, o valor padrão é `'iframe'`.&#x20;
6. **isGlobalPixel** : O usuário pode configurar pixel global definindo isto `true` , o valor padrão é `false`.
7. **allowMultiConversion** : O usuário pode permitir MultiConversion definindo isto `true` , o valor padrão é `false`.&#x20;
8. **conversionData** : Este objeto contém os parâmetros que podem ser usados para obter valores da rede.
   {% endtab %}
   {% endtabs %}

#### **Código de exemplo**

<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 Depuração

Para ativar o modo de depuração no SDK, pode-se adicionar o código a seguir dentro do seu script:

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

Ativar o modo de depuração permite ao usuário obter informações mais detalhadas sobre o funcionamento do SDK, incluindo quaisquer erros ou mensagens de depuração.