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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://knowledgebase.offer18.com/es/red/integracion-de-comercio-electronico/shopify-1.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.