Shopify

Etapa 1: Criar oferta

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

Exemplo

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

---

Etapa 2: Posicionamento do código

1. No admin do Shopify, vá para "Configurações"

2. Navegue até "Eventos do cliente" » "Adicionar pixel personalizado"

3. Digite o "Nome do pixel" e depois clique em "Adicionar pixel"

   

4. Remova o conteúdo existente da seção "Código"

5. Agora, coloque o script abaixo na seção "editor de pixel"

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('Failed to load the 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('Failed to load the Offer18 Web SDK.');
  };
});

Certifique-se de que os espaços reservados no script sejam substituídos pelas informações reais da campanha. Os espaços reservados são explicados na tabela abaixo.

Placeholder	Explanation
<YOUR-CLICK-ID-PARAMETER>	This is the clickid parameter used while creating the offer.
<YOUR-POSTBACK-DOMAIN>	Postback domain of the user. (domain)
<YOUR-ACCOUNT-ID>	Offer18 account id of the user. (accountId)
<CAMPAIGN-ID>	Id of the offer. (offerId)

In case of shopify 'postbackType' must be 'ajax'

1. Vá para Salvar

---

Opções de checkout personalizadas

Se você estiver usando qualquer um dos checkouts personalizados listados abaixo, você deve usar o script de conversão correspondente específico para esse checkout de terceiro.

Shiprocket

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('Failed to load the 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('Failed to load the Offer18 Web SDK.');
  };
});

GoKwik

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('Failed to load the 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('Failed to load the Offer18 Web SDK.');
  };
});

Razorpay Magic Checkout

Implemente o script abaixo em "theme.liquid" na sua conta Shopify.

1. No admin do Shopify, vá para Loja virtual » Temas.

2. Clique em “…” (três pontos) » Edite o código do seu tema ativo.

3. Abra o arquivo: Layout » theme.liquid

4. Agora, coloque o script abaixo logo antes da tag de fechamento </body> tag » Salvar

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

Coloque o código abaixo em Eventos do Cliente na conta Shopify.

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 loaded.");
  //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 -> event:", eventName, data);
    if (eventName === "payment.success") {
      //console.log("SDK page initiate");
      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 () {
  Falha ao carregar o SDK Web da Offer18.
};

Flexype

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('Failed to load the Offer18 Web SDK.');
  };
});

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('Failed to load the Offer18 Web SDK.');
  };
});

---

Coletar dados

Você pode coletar dados de conversão usando vários parâmetros de postback da Offer18

Dados de conversão	Offer18 Postback Parameter	Variable to use
Moeda	currency	`${currency}`
Valor total do pedido	sale	`${totalAmount}`
ID do pedido	adv_sub5	`${orderID}`
Cupons de desconto	coupon	`${discountString}`

---

Modo de depuração

O usuário pode ativar o modo de depuração descomentando 'window.Offer18WebSDK.activateDebugMode();'