# BigCommerce

Follow the below steps to integrate BigCommerce store with Offer18 to track conversions.

#### Step 1 : Create Offer

For Cookie less tracking, it is mandatory to include click ID parameter and token in the Offer URL and also for all the landing pages while creating an offer in Offer18 dashboard.

{% code title="Example" overflow="wrap" fullWidth="false" %}

```
https://shopurl.com/?<YOUR-CLICK-ID-PARAMETER>={tid}
```

{% endcode %}

***

####

#### Step 2 : Code Placement

Follow the steps to add the code snippet into BigCommerce account for all pages.

1. From your BigCommerce account, go to "**Storefront**"
2. Script manager **»** "**Create Script**" **»** add Script name
3. Select "**Header**" in placement and "**All Pages**" in location
4. Select "**Essential**" in Script category and "**Script**" in script type
5. Now, place the script given below in the "**Script contents**" section

{% code fullWidth="false" %}

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

{% endcode %}

{% hint style="info" %}
Users must replace '**\<YOUR-CLICK-ID-PARAMETER>**' with the clickid parameter used when creating the offer.
{% endhint %}

<figure><img src="https://295230641-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F41f2EboJipeUA6flsLGK%2Fuploads%2FPkZONuu8DqpEjFzlzIm7%2FBig1.png?alt=media&#x26;token=749e1c79-40d1-4627-940c-67421491757e" alt=""><figcaption></figcaption></figure>

After adding the script for all pages, follow the below steps to add the script for Order Confirmation.

1. From **Storefront »** Script manager **»** "**Create Script**" **»** add Script name
2. Script manager **»** "**Create Script**" **»** add Script name
3. Select "**Footer**" in placement and "**Order Confirmation**" in location
4. Select "**Essential**" in Script category and "**Script**" in script type
5. Now, place the script given below in the "**Script contents**" section

```html
<script src="https://web-resources.offer18.net/sdk/web/WebSDK.js"></script>
<script>
  var my_order_id = {{{ checkout.order.id }}};
  let my_store_api = '/api/storefront/orders/' + my_order_id;
  fetch(my_store_api)
    .then((res) => res.json())
    .then((order) => {
      var couponString = '';
      if (order.coupons) {
        couponString = order.coupons
          .map(c => c.code)
          .join(', ');
      }
      window.Offer18WebSDK.trackConversion({
        domain: '<YOUR-POSTBACK-DOMAIN>',
        accountId: '<YOUR-ACCOUNT-ID>',
        offerId: '<CAMPAIGN-ID>',
        coupon: `${couponString}`,
        postbackType: '', // 'iframe' or 'pixel'
        isGlobalPixel: false, // true or false
        allowMultiConversion: false, // true or false
        conversionData: {
          sale: `${order.orderAmount}`,        // Sale Amount
          currency: `${order.currency.code}`,
          adv_sub5: `${my_order_id}`,
        }
      });
    });
</script>
```

<figure><img src="https://295230641-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F41f2EboJipeUA6flsLGK%2Fuploads%2Fqjwz8ij9Cl43O8Bod3bi%2Fbig23.png?alt=media&#x26;token=da865047-e8ff-4260-83b7-120ccc260350" alt=""><figcaption></figcaption></figure>

Ensure that all placeholders in the script are replaced with the correct campaign information, as explained in the table below.

|                             |                                                                |
| --------------------------- | -------------------------------------------------------------- |
| **Placeholder**             | **Explanation**                                                |
| `<YOUR-CLICK-ID-PARAMETER>` | This is the `clickid` parameter used while creating the offer. |
| `<YOUR-POSTBACK-DOMAIN>`    | Postback domain of the user. (**domain**)                      |
| `<YOUR-ACCOUNT-ID>`         | Offer18 account id of the user. (**accountId**)                |
| `<CAMPAIGN-ID>`             | Id of the offer. (**offerId**)                                 |

***

####

#### Debug Mode

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

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