> 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/es/red/integracion-de-comercio-electronico/shopify-1.md).

# Shopify

## 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" %}

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

{% endcode %}

***

## Paso 2: Ubicación del código

1. Desde tu panel de administración de Shopify, ve a "**Configuración**"

2. Navega a "**Eventos de clientes**" **»** "**Agregar píxel personalizado**"

3. Introduce el "**Nombre del píxel**" y luego haz clic en "**Agregar píxel**"<br>

   <figure><img src="/files/99e2de9b22182abc869d07add12a56ed5c8ff191" alt=""><figcaption></figcaption></figure>

4. Elimina el contenido existente de la "**Código**" sección

5. Ahora, coloca el script que se indica a continuación en la "**editor de píxeles**" sección

```javascript
analytics.subscribe("page_viewed", (event) => {
  const sdkScript = document.createElement('script');
  sdkScript.setAttribute('src', 'https://web-resources.offer18.net/sdk/web/WebSDK.js');
  sdkScript.setAttribute('async', '');
  document.head.appendChild(sdkScript);
  sdkScript.onload = function () {
    // window.Offer18WebSDK.activateDebugMode(); 
    window.Offer18WebSDK.initializeConversion('<YOUR-CLICK-ID-PARAMETER>');
  };
  sdkScript.onerror = function () {
    console.error('No se pudo cargar el SDK web de Offer18.');
  };
});

analytics.subscribe('checkout_completed', (event) => {
  var discountString;
  var totalAmount = event.data.checkout.totalPrice.amount;
  var orderID = event.data.checkout.order.id;
  var currency = event.data.checkout.currencyCode;
  var allDiscountCodes = event.data.checkout.discountApplications.map((discount) => { if (discount.type === 'DISCOUNT_CODE') { return discount; } });
  if (allDiscountCodes.length > 10) { discountString = ''; } else { discountString = allDiscountCodes.map((item) => item.title).join(','); }
  const sdkScript = document.createElement('script');
  sdkScript.setAttribute('src', 'https://web-resources.offer18.net/sdk/web/WebSDK.js');
  sdkScript.setAttribute('async', '');
  document.head.appendChild(sdkScript);
  sdkScript.onload = function () {
    // window.Offer18WebSDK.activateDebugMode();
    window.Offer18WebSDK.trackConversion({
      domain: '<YOUR-POSTBACK-DOMAIN>',
      accountId: '<YOUR-ACCOUNT-ID>',
      offerId: '<CAMPAIGN-ID>',
      postbackType: 'ajax',
      coupon: `${discountString}`,
      conversionData: {
        sale: `${totalAmount}`,
        currency: `${currency}`,
        adv_sub5: `${orderID}`,
      }
    });
  };
  sdkScript.onerror = function () {
    console.error('No se pudo cargar el SDK web de Offer18.');
  };
});
```

**Asegúrate de que los marcadores de posición del script se reemplacen con la información real de la campaña. Los marcadores de posición se explican en la tabla que se muestra a continuación.**

<table data-header-hidden><thead><tr><th width="362"></th><th></th></tr></thead><tbody><tr><td><strong>Marcador de posición</strong></td><td><strong>Explicación</strong></td></tr><tr><td><code>&#x3C;YOUR-CLICK-ID-PARAMETER></code></td><td>Este es el <code>clickid</code> parámetro utilizado al crear la oferta.</td></tr><tr><td><code>&#x3C;YOUR-POSTBACK-DOMAIN></code></td><td>Dominio de postback del usuario. (<strong>domain</strong>)</td></tr><tr><td><code>&#x3C;YOUR-ACCOUNT-ID></code></td><td>ID de cuenta de Offer18 del usuario. (<strong>accountId</strong>)</td></tr><tr><td><code>&#x3C;CAMPAIGN-ID></code></td><td>ID de la oferta. (<strong>offerId</strong>)</td></tr></tbody></table>

{% hint style="warning" %}
En el caso de Shopify '**postbackType'** debe ser **'ajax'**
{% endhint %}

6. Ve a Guardar

<figure><img src="/files/3086fef7e261cf007c33e2cd222aff4da576150e" alt=""><figcaption></figcaption></figure>

***

## Opciones de pago personalizado

Si estás usando alguno de los pagos personalizados que se enumeran a continuación, debes usar el script de conversión correspondiente específico para ese pago de terceros.

### Shiprocket

```javascript
analytics.subscribe("page_viewed", (event) => {
  const sdkScript = document.createElement('script');
  sdkScript.setAttribute('src', 'https://web-resources.offer18.net/sdk/web/WebSDK.js');
  sdkScript.setAttribute('async', '');
  document.head.appendChild(sdkScript);
  sdkScript.onload = function () {
    // window.Offer18WebSDK.activateDebugMode(); 
    window.Offer18WebSDK.initializeConversion('<YOUR-CLICK-ID-PARAMETER>');
  };
  sdkScript.onerror = function () {
    console.error('No se pudo cargar el SDK web de Offer18.');
  };
});

analytics.subscribe('PurchaseSR', (event) => {
  var totalAmount = event.customData.value;
  var orderID = event.customData.transaction_id;
  const sdkScript = document.createElement('script');
  sdkScript.setAttribute('src', 'https://web-resources.offer18.net/sdk/web/WebSDK.js');
  sdkScript.setAttribute('async', '');
  document.head.appendChild(sdkScript);
  sdkScript.onload = function () {
    // window.Offer18WebSDK.activateDebugMode();
    window.Offer18WebSDK.trackConversion({
      domain: '<YOUR-POSTBACK-DOMAIN>',
      accountId: '<YOUR-ACCOUNT-ID>',
      offerId: '<CAMPAIGN-ID>',
      postbackType: 'ajax',
      conversionData: {
        sale: `${totalAmount}`,
        adv_sub5: `${orderID}`,
      }
    });
  };
  sdkScript.onerror = function () {
    console.error('No se pudo cargar el SDK web de Offer18.');
  };
});
```

### GoKwik

```javascript
analytics.subscribe("page_viewed", (event) => {
  const sdkScript = document.createElement('script');
  sdkScript.setAttribute('src', 'https://web-resources.offer18.net/sdk/web/WebSDK.js');
  sdkScript.setAttribute('async', '');
  document.head.appendChild(sdkScript);
  sdkScript.onload = function () {
    // window.Offer18WebSDK.activateDebugMode(); 
    window.Offer18WebSDK.initializeConversion('<YOUR-CLICK-ID-PARAMETER>');
  };
  sdkScript.onerror = function () {
    console.error('No se pudo cargar el SDK web de Offer18.');
  };
});

analytics.subscribe('gokwik_purchase_event', (eventData) => {
  var totalAmount = eventData.customData.total_price;
  var orderID = eventData.customData.order_name;
  const sdkScript = document.createElement('script');
  sdkScript.setAttribute('src', 'https://web-resources.offer18.net/sdk/web/WebSDK.js');
  sdkScript.setAttribute('async', '');
  document.head.appendChild(sdkScript);
  sdkScript.onload = function () {
    // window.Offer18WebSDK.activateDebugMode();
    window.Offer18WebSDK.trackConversion({
      domain: '<YOUR-POSTBACK-DOMAIN>',
      accountId: '<YOUR-ACCOUNT-ID>',
      offerId: '<CAMPAIGN-ID>',
      postbackType: 'ajax',
      conversionData: {
        sale: `${totalAmount}`,
        adv_sub5: `${orderID}`,
      }
    });
  };
  sdkScript.onerror = function () {
    console.error('No se pudo cargar el SDK web de Offer18.');
  };
});
```

### Razorpay Magic Checkout

Implementa el siguiente script en "theme.liquid" en tu cuenta de Shopify.

1. En tu panel de administración de Shopify, ve a **Tienda online » Temas**.
2. Haz clic en “…” (tres puntos) **»** Edita el código de tu tema activo.
3. Abre el archivo: **Diseño » `theme.liquid`**
4. Ahora, coloca el script que se indica a continuación justo antes del cierre `</body>` etiqueta **»** Guardar

```javascript
<script src="https://web-resources.offer18.net/sdk/web/WebSDK.js"></script>
<script>
    window.Offer18WebSDK.shopifyRazorpayMagicListenEvents({});
    window.Offer18WebSDK.initializeConversion("<YOUR-CLICK-ID-PARAMETER>");
</script>
```

Coloca el siguiente código en [**Eventos de clientes**](#step-2-code-placement) en tu cuenta de Shopify.

```javascript
const sdkScript = document.createElement("script");
sdkScript.src = "https://web-resources.offer18.net/sdk/web/WebSDK.js";
sdkScript.async = true;
document.head.appendChild(sdkScript);
sdkScript.onload = function () {
  //console.log("SDK cargado.");
  //window.Offer18WebSDK.activateDebugMode();
  var order_id = "";
  var coupon_code = "";
  var coupon_discount = "";
  var currency = "";
  var total_amount = "";
  
  analytics.subscribe("razorpay_magic_event", (event) => {
    const eventName = event.customData?.topic;
    const data = event.customData?.data;
    if (data.order_id) {
      order_id = data.order_id;
    }
    if (data.appliedCouponCode) {
      coupon_code = data.appliedCouponCode;
    }
    if (data.couponDiscountValue) {
      coupon_discount = data.couponDiscountValue / 100;
    }
    if (data.currency) {
      currency = data.currency;
    }
    if (data.totalAmount) {
      total_amount = data.totalAmount / 100;
    }
    if (data.appliedCouponCode && data.couponDiscountValue == 0) {
      coupon_code = "";
      coupon_discount = "";
    }

    //console.log("Magic Pixel -> evento:", eventName, data);
    if (eventName === "payment.success") {
      //console.log("Inicio de la página del SDK");
      window.Offer18WebSDK.trackConversion({
        domain: "<YOUR-POSTBACK-DOMAIN>",
        accountId: "<YOUR-ACCOUNT-ID>",
        offerId: "<CAMPAIGN-ID>",
        postbackType: "ajax",
        clickIdData: data?.offer18_click_ids || null,
        conversionData: {
          sale: `${total_amount}`,
          adv_sub1: `${order_id}`,
          adv_sub2: `${coupon_code}`,
          adv_sub3: `${coupon_discount}`,
          currency: `${currency}`,
        },
      });
    }
  });
};
sdkScript.onerror = function () {
  console.error("No se pudo cargar el SDK web de Offer18.");
};
```

### Flexype

{% code overflow="wrap" %}

```javascript
analytics.subscribe("page_viewed", (event) => {
  const sdkScript = document.createElement('script');
  sdkScript.setAttribute('src', 'https://web-resources.offer18.net/sdk/web/WebSDK.js');
  sdkScript.setAttribute('async', '');
  document.head.appendChild(sdkScript);
  sdkScript.onload = function () {
    // window.Offer18WebSDK.activateDebugMode();
    window.Offer18WebSDK.initializeConversion('<YOUR-CLICK-ID-PARAMETER>');
  };
  sdkScript.onerror = function () {
    console.error('No se pudo cargar el SDK web de Offer18.');
  };
});

analytics.subscribe('flexype:purchase', (event) => {

var totalAmount = event.customData.pricing.total;
var orderID = event.customData.shopify_order_name;
var currency = event.customData.currency;
var coupons = event.customData.coupons || [];
var couponCode = coupons.map(c => c.code).join(',');
var couponDiscount = coupons.map(c => c.discount).reduce((acc, discount) => acc + discount, 0);

  const sdkScript = document.createElement('script');
  sdkScript.setAttribute('src', 'https://web-resources.offer18.net/sdk/web/WebSDK.js');
  sdkScript.setAttribute('async', '');
  document.head.appendChild(sdkScript);
  sdkScript.onload = function () {
    // window.Offer18WebSDK.activateDebugMode();
    window.Offer18WebSDK.trackConversion({
      domain: '<YOUR-POSTBACK-DOMAIN>',
      accountId: '<YOUR-ACCOUNT-ID>',
      offerId: '<CAMPAIGN-ID>',
      postbackType: 'ajax',
      coupon: `${couponCode}`,
      conversionData: {
        sale: `${totalAmount}`,
        adv_sub1: `${orderID}`,
        adv_sub2: `${couponCode}`,
        adv_sub3: `${couponDiscount}`,
        currency: `${currency}`,
      }
    });
  };
  sdkScript.onerror = function () {
    console.error('No se pudo cargar el SDK web de Offer18.');
  };
});
```

{% endcode %}

***

## Recopilar datos

Puedes recopilar datos de conversión utilizando varios parámetros de postback de Offer18

<table data-header-hidden><thead><tr><th width="259"></th><th width="252"></th><th></th></tr></thead><tbody><tr><td><strong>Datos de conversión</strong> </td><td><strong>Parámetro de postback de Offer18</strong></td><td><strong>Variable a usar</strong></td></tr><tr><td>Moneda</td><td>currency</td><td><pre><code>`${currency}`
</code></pre></td></tr><tr><td>Importe total del pedido</td><td>sale</td><td><pre><code>`${totalAmount}`
</code></pre></td></tr><tr><td>ID del pedido</td><td>adv_sub5</td><td><pre><code>`${orderID}`
</code></pre></td></tr><tr><td>Cupones de descuento</td><td>coupon</td><td><pre><code>`${discountString}`
</code></pre></td></tr></tbody></table>

***

## Modo de depuración

El usuario puede habilitar el modo de depuración descomentando '**window\.Offer18WebSDK.activateDebugMode()**;'

<figure><img src="/files/30feff2dca0953c152b9d261dca835403c0b96e1" alt=""><figcaption></figcaption></figure>