# Shopify

## Paso 1: Crear oferta

Para el seguimiento sin cookies, es obligatorio incluir el parámetro de ID de clic 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: Colocación del código

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

2. Navega a "**Eventos de clientes**" **»** "**Añadir píxel personalizado**"

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

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

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

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

```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 Offer18 Web SDK.');
  };
});

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 Offer18 Web SDK.');
  };
});
```

**Asegúrate de que los marcadores de posición del script se sustituyan por 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 utilizando 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 Offer18 Web SDK.');
  };
});

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 Offer18 Web SDK.');
  };
});
```

### 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 Offer18 Web SDK.');
  };
});

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 Offer18 Web SDK.');
  };
});
```

### Razorpay Magic Checkout

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

1. En tu administrador 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 muestra a continuación justo antes de la etiqueta de 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 código siguiente en [**Eventos de clientes**](#step-2-code-placement) en la 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("Píxel Magic -> evento:", eventName, data);
    if (eventName === "payment.success") {
      //console.log("Inicio de 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 Offer18 Web SDK.");
};
```

***

## Recopilar datos

Puedes recopilar datos de conversión usando 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: 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:

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

The question should be specific, self-contained, and written in natural language.
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.