What is a NewsBreak Pixel?
The NewsBreak Pixel works similarly to pixels on other Ad Platforms like Facebook, TikTok, and Google Analytics. Its job is to help our Ad Manager track actions taken on an advertiser’s website. This way, we can optimize your ad campaigns based on that data.
How does it work?
The pixel works by embedding a JavaScript code snippet on your website. This code snippet collects data on specific conversion events and sends it back to NewsBreak for analysis and optimization.
How do I integrate the NewsBreak Pixel into my Shopify store?
1. Identify your NewsBreak Pixel Base Code.
- Log into Ad Manager and navigate to Tools > Event Management.
- Choose Pixel as your tracking type, Shopify as integration method, and specify your event type. You could also turn on Event value if you have a value associated with this event. Code and instruction will be generated after you filled all requried fields.
- Locate your base code in Step 1 and copy that code. Please note that instead of 'ID-1234567890', you should use your own Unique ID specified in Event Management.
- The base code looks like the snippet below:
<!-- Start NB Pixel Snippet -->
<script>
!(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-1234567890'),
nbpix('event', 'pageload');
</script>
<!-- End NB Pixel Snippet -->
2. Paste the Base Code in Shopify.
- In your Shopify account, go to Online Store > Themes.
- Identify your active theme, click Actions, and choose Edit code.
- Find and edit the theme.liquid file under the Layout section.
- Paste the copied base code just before the
</head>tag in the theme.liquid file. - Save the changes.
💡Remember to paste the Base Code inside the<head> </head>tags within your theme.liquid file.
What if my conversion event is more specific than page loads?
If your conversion event involves actions like adding items to the cart or making a purchase, you'll need additional tracking. Follow these steps for specific conversion events:
How do I integrate the NewsBreak Pixel to send all funnel events?
3. In your Shopify account, go to Settings > Customer events.
4. Create a unique name for your pixel.
5. Click "Add pixel" to open the event editor.
6. Paste your custom JavaScript pixel code into the Code window.
!(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-1234567890'),
analytics.subscribe("checkout_completed", event => {
nbpix('event', 'complete_payment', {nb_value: event.data.checkout.totalPrice.amount});
});
analytics.subscribe("payment_info_submitted", event => {
nbpix('event', 'add_payment_info', {nb_value: event.data.checkout.totalPrice.amount});
});
analytics.subscribe("product_added_to_cart", event => {
nbpix('event', 'add_to_cart', {nb_value: event.data.cartLine.cost.totalAmount.amount});
});
analytics.subscribe("checkout_started", event => {
nbpix('event', 'initiate_checkout', {nb_value: event.data.checkout.totalPrice.amount});
});
analytics.subscribe("product_viewed", event => {
nbpix('event', 'view_content', {nb_value: event.data.productVariant.price.amount});
});
analytics.subscribe("search_submitted", event => {
nbpix('event', 'search');
});
- Page Load → View Content → Add to Cart → Initiate Checkout → Complete Payment
7. Save and Connect the Custom Pixel.
- Save your custom pixel.
- Click "Connect pixel" to initiate event tracking.
8. Test your pixel integration.
- Navigate back to Ad Manager and proceed to Step 3 in Event Management to test your pixel integration. Once you have successfully saved, you are all done!
- Please note: to get the most out of your campaigns, it's important to track all key events across your conversion funnel, not just the final action. This helps optimize performance, unlock better targeting, and provide deeper insights. We need to create all e-commerce funnel events and test them successfully.
What's the next step after integration?
Once your pixel is integrated, you can test it in Ad Manager or inform your account manager/operations team that the integration is complete. They can verify the integration and perform necessary tests for you!
Where can I learn more about setting up custom pixels?
For more detailed information on setting up custom pixels, please refer to this article.
💡NewsBreak now supports multi-conversion events, however you can only select one tracking event per ad set. Learn more here!
Accelerate Verification with the Pixel Helper (Alpha)
Skip the manual steps by installing our Chrome Extension. While the Pixel Helper is currently in alpha testing, it is designed to provide instant feedback on your implementation.
Note: For comprehensive troubleshooting, please refer to the manual verification steps below.