> 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/ru/set/sdk/web-sdk.md).

# Web SDK

## **Начать**

Чтобы начать отслеживание с помощью веб-SDK Offer18, выполните приведённые ниже инструкции.

## Отслеживать клики

Чтобы отслеживать клики с помощью SDK, добавьте следующий код в ваш скрипт.

<mark style="color:фиолетовый;">Расположение : Заголовок (все страницы)</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="Конфигурация объекта - window\.Offer18WebSDK.trackclick()" %}

1. **trackingURL** (Обязательно) : URL отслеживания, который можно получить в панели Offer18.
2. **keymapping** : это массив параметров Offer18 и нативных параметров в формате `<OFFER18-PARAMETER>:<YOUR-PARAMETER>`. Пользователь может заменить `<OFFER18-PARAMETER>`  на параметры Offer18, такие как aff\_sub1, aff\_sub2 и `<YOUR-PARAMETER>` на их параметры, из которых пользователь получает значения из своей сети.
   {% endtab %}
   {% endtabs %}

#### **Пример кода**

```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>
```

`В приведённом выше примере`` `**`a`**` ``является`` `**`ID партнёра`**` ``в сопоставлении ключей`

***

## Отслеживать показы

Чтобы отслеживать показы с помощью SDK, добавьте следующий код в ваш скрипт

<mark style="color:фиолетовый;">Расположение : Заголовок (все страницы)</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="Конфигурация объекта - window\.Offer18WebSDK.trackImpression()" %}

1. **impressionURL** (Обязательно) : URL показа, который можно получить в панели Offer18.
2. **keymapping** : это массив параметров Offer18 и нативных параметров в формате `<OFFER18-PARAMETER>:<YOUR-PARAMETER>`. Пользователь может заменить `<OFFER18-PARAMETER>`  на параметры Offer18, такие как aff\_sub1, aff\_sub2 и `<YOUR-PARAMETER>` на их параметры, из которых пользователь получает значения из своей сети.
   {% endtab %}
   {% endtabs %}

#### **Пример кода**

```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>
```

`В приведённом выше примере`` `**`a`**` ``является`` `**`ID партнёра`**` ``в сопоставлении ключей`

***

## Отслеживать конверсии

Пользователям необходимо добавить следующий фрагмент кода на все посадочные страницы, кроме страницы подтверждения заказа / страницы успеха заказа (страница благодарности).

<mark style="color:фиолетовый;">Расположение : Заголовок (все страницы)</mark>

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

После добавления скрипта необходимо добавить следующий скрипт на страницу благодарности/подтверждения заказа

<mark style="color:фиолетовый;">Расположение : Страница благодарности/Страница успеха заказа (одна страница)</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="Конфигурация объекта - window\.Offer18WebSDK.trackConversion()" %}

1. **domain** (Обязательно) : Домен постбэка пользователя.
2. **accountId** (Обязательно) : ID аккаунта Offer18 пользователя.
3. **offerId** (Обязательно) : ID кампании.
4. **coupon :** Здесь можно использовать код купона
5. **postbackType** : Это может быть либо `'iframe'` или `'pixel'`, значение по умолчанию `'iframe'`.&#x20;
6. **isGlobalPixel** : Пользователь может настроить глобальный пиксель, установив это значение `true` , значение по умолчанию `false`.
7. **allowMultiConversion** : Пользователь может разрешить множественные конверсии, установив это значение `true` , значение по умолчанию `false`.&#x20;
8. **conversionData** : Этот объект содержит параметры, которые можно использовать для получения значений из сети.
   {% endtab %}
   {% endtabs %}

#### **Пример кода**

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

***

## Режим отладки

Чтобы включить режим отладки в SDK, можно добавить следующий код в ваш скрипт:

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

Включение режима отладки позволяет пользователю получать более подробную информацию о работе SDK, включая любые ошибки или отладочные сообщения.