# Web SDK

## **Get started**

To start tracking with Offer18's web SDK, follow the instructions given below.

## Track Clicks

To track clicks using the SDK, add the following code to your script.

<mark style="color:purple;">Placement : Header (All Pages)</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="Object Configuration - window\.Offer18WebSDK.trackclick()" %}

1. **trackingURL** (Mandatory) : Tracking URL which can be extracted from Offer18 dashboard.
2. **keymapping** : is an array of Offer18 parameters and Native parameters in a format of `<OFFER18-PARAMETER>:<YOUR-PARAMETER>`. User can replace `<OFFER18-PARAMETER>`  with Offer18 Parameters like aff\_sub1, aff\_sub2 and `<YOUR-PARAMETER>` with their parameters in which user is getting values from their network.
   {% endtab %}
   {% endtabs %}

#### **Example code**

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

`In above example`` `**`a`**` ``is`` `**`Affiliate ID`**` ``in Key Mapping`

***

## Track Impressions

To track impressions using the SDK, add the following code to your script

<mark style="color:purple;">Placement : Header (All Pages)</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="Object Configuration - window\.Offer18WebSDK.trackImpression()" %}

1. **impressionURL** (Mandatory) : Impression URL which can be extracted from Offer18 dashboard.
2. **keymapping** : is an array of Offer18 parameters and Native parameters in a format of `<OFFER18-PARAMETER>:<YOUR-PARAMETER>`. User can replace `<OFFER18-PARAMETER>`  with Offer18 Parameters like aff\_sub1, aff\_sub2 and `<YOUR-PARAMETER>` with their parameters in which user is getting values from their network.
   {% endtab %}
   {% endtabs %}

#### **Example code**

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

`In above example`` `**`a`**` ``is`` `**`Affiliate ID`**` ``in Key Mapping`

***

## Track Conversions

Users must add the following code snippet into all landing pages except Order confirmation / Order Success (Thank you) page.

<mark style="color:purple;">Placement : Header (All Pages)</mark>

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

After adding the script one needs to add the following script in thankyou/order-confirmation page

<mark style="color:purple;">Placement : Thank you Page/Order Success Page (One Page)</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="Object Configuration - window\.Offer18WebSDK.trackConversion()" %}

1. **domain** (Mandatory) : Postback domain of the user.
2. **accountId** (Mandatory) : Offer18 account id of the user.
3. **offerId** (Mandatory) : Id of the campaign.
4. **coupon :** Coupon code can be used here
5. **postbackType** : It can be either `'iframe'` or `'pixel'`, default value is `'iframe'`.&#x20;
6. **isGlobalPixel** : User can configure global pixel by setting this `true` , default value is `false`.
7. **allowMultiConversion** : User can allow MultiConversion by setting this `true` , default value is `false`.&#x20;
8. **conversionData** : This object contains the parameters which can be used to get values from network.
   {% endtab %}
   {% endtabs %}

#### **Example code**

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

***

## Debug Mode

To enable debug mode in an SDK, one can add the following code inside your script:

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

Enabling debug mode allows user to get more detailed information about the working of the SDK, including any errors or debugging messages.