Welcome to our guide on enabling data sharing between Shopline and NewsBreak Ads! Follow these simple steps to successfully connect your data from Shopline to NewsBreak for accurate event attribution and performance tracking.
1. Log into Shopline > Online Store > click 'Edit Code.'
2. Go to ‘Layout’ > edit the the ‘theme.html’ file > insert the base pixel code from NewsBreak.
3. Grab the Custom Code from NewsBreak in Event Management.
For example, if you're tracking a ‘complete_payment’ event (like a purchase), make sure to enable the ‘Event Value’ option—this is necessary if you plan to optimize for ROAS (Return on Ad Spend).
4. To add Custom Code in Shopline, you’ll need to access the Custom Code app.
- Once there, select your store and click “Add Code” to insert your NewsBreak tracking script.
- Paste the following code into the code page:
<script>
<!-- Start NB Pixel Snippet -->
!(function (e, n, t, i, p, a, s) {
e[i] ||
(((p = e[i] =
function () {
p.process ? p.process.apply(p, arguments) : p.queue.push(arguments);
}).queue = []),
(p.t = +new Date()),
((a = n.createElement(t)).async = 1),
(a.src = 'https://static.newsbreak.com/business/tracking/nbpixel.js?t=' + 864e5 * Math.ceil(new Date() / 864e5)),
(s = n.getElementsByTagName(t)[0]).parentNode.insertBefore(a, s));
})(window, document, 'script', 'nbpix'),
nbpix('init', 'ID-1768168395766816769'),
nbpix('event', 'pageload');
console.log('Start NB Pixel Snippet init')
<!-- End NB Pixel Snippet -->
<!-- Start NB Pixel Snippet view_content -->
console.log('Start NB Pixel Snippet view_content')
nbpix('event','view_content');
<!-- End NB Pixel Snippet view_content -->
<!-- Start NB Pixel Snippet add_to_cart -->
(function () {
const originalFetch = window.fetch;
window.fetch = function (...args) {
return new Promise((resolve, reject) => {
originalFetch
.apply(this, args)
.then((response) => {
const clone = response.clone();
if ((args[0] && args[0].url && args[0].url.includes("/cart/add")) || (args[0] && args[0].includes("/cart/add"))) {
clone.json().then((data) => {
console.log('Start NB Pixel Snippet add_to_cart')
if(data.final_line_price){
const add_to_cart_total_amount = data.final_line_price.toString();
nbpix('event','add_to_cart', {nb_value: add_to_cart_total_amount});
}else{
nbpix('event','add_to_cart');
}
});
}
resolve(response);
})
.catch((error) => {
reject(error);
});
});
};
// xhr
const originalOpen = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function (
method,
url,
) {
this.addEventListener("load", function () {
if (method === "POST" && url === "/leproxy/api/carts/cart") {
try {
const response = JSON.parse(this.responseText);
console.log('Start NB Pixel Snippet add_to_cart')
if(response.data.itemDetail.total){
const add_to_cart_total_amount = (response.data.itemDetail.total / 100).toFixed(2).toString();
nbpix('event','add_to_cart', {nb_value: add_to_cart_total_amount});
}else{
nbpix('event','add_to_cart');
}
} catch (error) {
console.error("Error processing add_to_cart request", error);
}
}
});
originalOpen.apply(this, arguments);
};
const originalSend = XMLHttpRequest.prototype.send;
XMLHttpRequest.prototype.send = function (body) {
const method = this._method;
const url = this._url;
if (method === "POST" && url === "/leproxy/api/carts/cart/batch/add") {
console.log("axon add_to_cart xhr");
try {
const bodyData = JSON.parse(body);
console.log('Start NB Pixel Snippet add_to_cart')
if(bodyData.items){
const add_to_cart_total_amount = bodyData.items.reduce((total, item) => {
return total + (item.productPrice || 0);
}, 0).toFixed(2).toString();
nbpix('event','add_to_cart', {nb_value: add_to_cart_total_amount});
}else{
nbpix('event','add_to_cart');
}
} catch (error) {
console.error("Error processing add_to_cart batch request", error);
}
}
return originalSend.apply(this, arguments);
};
})();
<!-- End NB Pixel Snippet add_to_cart -->
<!-- Start NB Pixel Snippet initiate_checkout -->
{{#if @root.checkout}}
console.log('Start NB Pixel Snippet initiate_checkout')
const checkout_total_amount = '{{ divide checkout.total_price 100 }}';
nbpix('event', 'initiate_checkout', {nb_value: checkout_total_amount});
{{/if}}
<!-- End NB Pixel Snippet initiate_checkout -->
<!-- Start NB Pixel Snippet complete_payment -->
{{#if @root.thankyou}}
console.log('Start NB Pixel Snippet CompleteOrder')
const thankyou_total_amount = '{{ divide thankyou.priceInfo.totalAmount 100 }}';
nbpix('event','complete_payment', {nb_value: thankyou_total_amount});
{{/if}}
<!-- End NB Pixel Snippet complete_payment -->
</script>