Skip to main content

How to install a NewsBreak Pixel on Shopify

  • Updated

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 for a "purchase" conversion event?

3. In your Shopify account, go to Settings > Customer events.

step 1.png

4. Create a unique name for your pixel.

step 2.png

5. Click "Add pixel" to open the event editor.

6. Paste your custom JavaScript pixel code into the Code window.

  • The following </script> tag is your custom pixel code for complete_payment, which tracks the checkout_completed event in Shopify (Shopify Custom Events Reference), it looks something like the snippet below: remember that instead of 'ID-1234567890', you should use your unique ID specified in Event Management!

!(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');
});

7. Save and Connect the Custom Pixel.

  • Save your custom pixel.

  • Click "Connect pixel" to initiate event tracking.

8. Test your pixel integration.

Screen Shot 2023-08-16 at 3.11.31 PM.png

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!

 

Related articles