# BigCommerce

Sigue los pasos a continuación para integrar la tienda BigCommerce con Offer18 y rastrear conversiones.

#### Paso 1 : Crear Oferta

Para el seguimiento sin cookies, es obligatorio incluir el parámetro click ID y el token en la URL de la Oferta y también en todas las páginas de destino al crear una oferta en el panel de Offer18.

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

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

{% endcode %}

***

####

#### Paso 2 : Colocación de Código

Sigue los pasos para añadir el fragmento de código en la cuenta de BigCommerce para todas las páginas.

1. Desde tu cuenta de BigCommerce, ve a "**Storefront**"
2. Script manager **»** "**Crear Script**" **»** añadir nombre del Script
3. Selecciona "**Header**" en placement y "**All Pages**" en location
4. Selecciona "**Essential**" en la categoría del Script y "**Script**" en el tipo de script
5. Ahora, coloca el script que se muestra a continuación en la sección "**Script contents**"

{% 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" %}
Los usuarios deben reemplazar '**\<YOUR-CLICK-ID-PARAMETER>**' por el parámetro clickid usado al crear la oferta.
{% endhint %}

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

Después de añadir el script para todas las páginas, sigue los pasos a continuación para añadir el script para la Confirmación de Pedido.

1. Desde **Storefront »** Script manager **»** "**Crear Script**" **»** añadir nombre del Script
2. Script manager **»** "**Crear Script**" **»** añadir nombre del Script
3. Selecciona "**Footer**" en placement y "**Order Confirmation**" en location
4. Selecciona "**Essential**" en la categoría del Script y "**Script**" en el tipo de script
5. Ahora, coloca el script que se muestra a continuación en la sección "**Script contents**"

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

Asegúrate de que todos los marcadores de posición en el script sean reemplazados con la información correcta de la campaña, como se explica en la tabla a continuación.

|                             |                                                          |
| --------------------------- | -------------------------------------------------------- |
| **Marcador de posición**    | **Explicación**                                          |
| `<YOUR-CLICK-ID-PARAMETER>` | Esto es el `clickid` parámetro usado al crear la oferta. |
| `<YOUR-POSTBACK-DOMAIN>`    | Dominio de postback del usuario. (**domain**)            |
| `<YOUR-ACCOUNT-ID>`         | ID de cuenta de Offer18 del usuario. (**accountId**)     |
| `<CAMPAIGN-ID>`             | Id de la oferta. (**offerId**)                           |

***

####

#### Modo Debug

Para habilitar el modo debug en un SDK, agrega el siguiente código dentro de tu script:

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