# BigCommerce

Siga os passos abaixo para integrar a loja BigCommerce com a Offer18 para rastrear conversões.

#### Passo 1 : Criar Oferta

Para rastreamento sem cookies, é obrigatório incluir o parâmetro click ID e o token na URL da Oferta e também em todas as páginas de destino ao criar uma oferta no painel da Offer18.

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

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

{% endcode %}

***

####

#### Passo 2 : Inserção de Código

Siga os passos para adicionar o trecho de código na conta BigCommerce para todas as páginas.

1. A partir da sua conta BigCommerce, vá para "**Storefront**"
2. Script manager **»** "**Create Script**" **»** adicionar nome do Script
3. Selecione "**Header**" em placement e "**All Pages**" em location
4. Selecione "**Essential**" em Script category e "**Script**" em script type
5. Agora, coloque o script fornecido abaixo em "**Script contents**" seção

{% 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" %}
Os usuários devem substituir '**\<YOUR-CLICK-ID-PARAMETER>**' pelo parâmetro clickid usado ao criar a oferta.
{% endhint %}

<figure><img src="https://4294454144-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>

Após adicionar o script para todas as páginas, siga os passos abaixo para adicionar o script para Confirmação de Pedido.

1. A partir de **Storefront »** Script manager **»** "**Create Script**" **»** adicionar nome do Script
2. Script manager **»** "**Create Script**" **»** adicionar nome do Script
3. Selecione "**Footer**" em placement e "**Order Confirmation**" em location
4. Selecione "**Essential**" em Script category e "**Script**" em script type
5. Agora, coloque o script fornecido abaixo em "**Script contents**" seção

```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://4294454144-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>

Certifique-se de que todos os espaços reservados no script sejam substituídos pelas informações corretas da campanha, conforme explicado na tabela abaixo.

|                             |                                                       |
| --------------------------- | ----------------------------------------------------- |
| **Espaço reservado**        | **Explicação**                                        |
| `<YOUR-CLICK-ID-PARAMETER>` | Isto é o `clickid` parâmetro usado ao criar a oferta. |
| `<YOUR-POSTBACK-DOMAIN>`    | Domínio de postback do usuário. (**domain**)          |
| `<YOUR-ACCOUNT-ID>`         | ID da conta Offer18 do usuário. (**accountId**)       |
| `<CAMPAIGN-ID>`             | Id da oferta. (**offerId**)                           |

***

####

#### Modo de Depuração

Para ativar o modo de depuração em um SDK, adicione o seguinte código dentro do seu script:

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