Cookieless integration with Shopify
Step 1 : Create Offer
For Cookie less tracking, it is mandatory to include click ID parameter and token in the Offer URL and also for all the landing pages while creating an offer in Offer18 dashboard.
https://shopurl.com/?<YOUR-CLICK-ID-PARAMETER>={tid}
Step 2 : Code Placement
From your Shopify admin, go to "Settings"
Navigate to "Customer events" » "Add Custom Pixel"
Enter the "Pixel name" and then click "Add pixel"
Remove the existing content from the "Code" section
Now, place the script given below in the "Code" section
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.');
};
});
Ensure that the placeholders in the script are replaced with the actual information for the campaign. The placeholders are explained in the table provided below.
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'
Go to Save

Custom Checkout Options
If you are using any of the custom checkouts listed below, you must use the corresponding conversion script specific to that third-party checkout.
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',
coupon: `${discountString}`,
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', (event) => {
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',
coupon: `${discountString}`,
conversionData: {
sale: `${totalAmount}`,
adv_sub5: `${orderID}`,
}
});
};
sdkScript.onerror = function () {
console.error('Failed to load the Offer18 Web SDK.');
};
});
Collect Data
You can collect conversion data using various Offer18 Postback Parameters
Conversion Data
Offer18 Postback Parameter
Variable to use
Currency
currency
`${currency}`
Total Amount of the Order
sale
`${totalAmount}`
Order ID of the Order
adv_sub5
`${orderID}`
Discount Coupons
coupon
`${discountString}`
Debug Mode
The user can enable debug mode by uncommenting 'window.Offer18WebSDK.activateDebugMode();'

Last updated
Was this helpful?