How To Implement the Outbrain Pixel and Track Conversions in Shopify

If you are using Shopify to host your online business and want to start tracking conversions across your Shopify site, this article will help you install the Outbrain tracking pixel sitewide.

Our best practice is to implement pixel in two steps:

Implement pixel adding a custom code to your store, which can be done directly in your Shopify account;
Configure the Shopify Customer Privacy Settings using Shopify Customer Privacy API to make sure that user privacy choices are respected when the Outbrain pixel’s code is added to the page.

If you implemented the Outbrain pixel in your Shopify store before February 2025, make sure to apply the updated implementation code and settings described in this article.

How to implement pixel using a custom code

1. Click Settings at the bottom of the left rail (left bottom corner).

2. Click Customer Events on the left rail.

3. Click Add Custom Pixel.

4. Select Marketing and Analytics permissions for the added Custom event as pixel is collecting data for marketing and analytical purposes.

5. Make sure to specify in the Data sale section that Data collected qualifies as data sale.

6. Paste the following code in the code section. Make sure you put in the right advertiser ID under OB_ADV_ID.

// Initialize the JavaScript pixel SDK (make sure to exclude HTML)
/** DO NOT MODIFY THIS CODE**/
!function(_window, _document) {
  var OB_ADV_ID = '%YOUR ADVERTISER ID COMES HERE%';
  if (_window.obApi) {
    var toArray = function(object) {
      return Object.prototype.toString.call(object) === '[object Array]' ? object : [object];
    };
    _window.obApi.marketerId = toArray(_window.obApi.marketerId).concat(toArray(OB_ADV_ID));
      return;
  }
  var api = _window.obApi = function() {
    api.dispatch ? api.dispatch.apply(api, arguments) : api.queue.push(arguments);
  };
  api.version = '1.1';
  api.loaded = true;
  api.marketerId = OB_ADV_ID;
  api.queue = [];
  var tag = _document.createElement('script');
  tag.async = true;
  tag.src = '//amplify.outbrain.com/cp/obtp.js';
  tag.type = 'text/javascript';
  var script = _document.getElementsByTagName('script')[0];
  script.parentNode.insertBefore(tag, script);
}(window, document);

obApi('track', 'SHOPIFY_PRIVACY', {shopifyEvent: init.customerPrivacy});

// Step 2. Subscribe to customer events with analytics.subscribe(), and add tracking

api.customerPrivacy.subscribe('visitorConsentCollected', (event) => {
  obApi('track', 'SHOPIFY_PRIVACY', {shopifyEvent: event.customerPrivacy});
})

analytics.subscribe("all_standard_events", event => {
  obApi('track', event.name, {shopifyEvent: true});
});
analytics.subscribe('page_viewed', (event) => {
obApi('track', 'PAGE_VIEW');
});

7. If you want to trigger shopify’s standard events, such as product_added_to_cart (add to cart), checkout_started (checkout), and checkout_completed (purchase) you should add the following code at the end, and make sure you change the name in the part that says “amplify conversion name comes here”:

analytics.subscribe("product_added_to_cart", (event) => {
obApi('track', 'amplify add to cart conversion name comes here');
});


analytics.subscribe("checkout_started", (event) => {
obApi('track', 'amplify checkout conversion name comes here');
});


analytics.subscribe("checkout_completed", (event) => {
obApi('track', 'amplify purchase conversion name comes here', {
    currency: event.data?.checkout?.currencyCode,
    orderValue: event.data?.checkout?.totalPrice?.amount,
  });
});

8. Click Save and Connect.

How to configure the Shopify Customer Privacy Settings using Shopify Customer Privacy API

If you are running campaigns using Shopify store pages as landing pages and targeting users in the EU or UK, it’s crucial to ensure full compliance of your store with updated regulations, including GDPR and the ePrivacy. These regulations mandate that explicit user consent must be obtained before setting any cookies beyond those that are strictly necessary or using third-party tracking tools such as Outbrain pixel.

Therefore, in order to use the Outbrain pixel, in the EU and UK the Shopify store is required to have the cookie banner and collect the user consent for conversion tracking.

If you are using a third-party or custom cookie banner solution, please check this article from Shopify, explaining how the third-party cookie banners can be configured. Note that a third-party cookie banner needs to support integration with Shopify’s Customer Privacy API, as you need to link the consent purposes collected by your chosen banner to the Marketing, Analytical, and Data Sale permissions passed to the pixel’s custom code. These permissions are required for the pixel to record conversions in the EU and the UK.

If you would like to use Shopify’s cookie-banner solution, please follow the steps described below:

1. Go to the Customer Privacy section on the left rail.

2. Click Cookie Banner.

3. Click Set up cookie banner.

4. Configure the settings of your banner.

5. In the Regions section, make sure to select Europe so that the banner would be shown to the users from the EU and the UK where user consent is required for tracking.

6. Save applied settings.

PLEASE NOTE:

When viewing your dashboard, make sure to replace EXTERNAL_MARKETER_ID with the alphanumeric chain that appears in the URL.

The above code will track Add to Cart, Checkout, and Purchase events.
Shopify has a standard set of events that can be tracked, allowing users to configure these in the code if they wish. Keep in mind that Outbrain has not yet tested those events.
This code is only relevant for Shopify users who have updated to Checkout Extensibility.

For Reference:

Shopify’s Custom Pixel Guide: https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels/code

Shopify’s Pixel’s Privacy: https://shopify.dev/docs/api/web-pixels-api/pixel-privacy

Configuring customer privacy settings for Shopify: https://help.shopify.com/en/manual/privacy-and-security/privacy/customer-privacy-settings/privacy-settings

Was this article helpful?

YesNo

Conversion Tactics