Introduction to the Universal Pixel Integration Addon

Introduction

Bloomreach Universal Pixel is a JavaScript tracking pixel tool to log visitors' activities for best-in-class optimization and personalization.

The Universal Pixel Integration addon provides a seamless integration in Bloomreach Experience Manager for editors, webmasters, and developers so that they can manage Universal Pixel contributions in pages easily.

Overview

The Universal Pixel needs to be integrated in almost every page and every channel, in order to collect data and contribute it to the Pixel Server for analytics and insights, so it can help improve visitors' digital experiences.

 

To minimize the integration cost and increase business agility, it is necessary for business users (like editors and webmasters) to be able to manage and control Universal Pixel contributions for landing pages or content-oriented pages in a channel independently through intuitive UIs.

The content delivery application renders pages dynamically with the Universal Pixel data configured by editors or webmasters, so each page visit should be able to contribute Universal Pixel data seamlessly.

Finally, analysts will be able to analyze the collected data such as conversion actions and help improve visitors' digital experiences. 

Bloomreach Pixel Validator

Based on the Universal Pixel contribution data, the content delivery web application generates pieces of Universal Pixel JavaScript for a page, like in the following example:

<script type="text/javascript">
  var br_data = {
    "page_type":"search",
    "page_labels":"bloomreach,documentation",
    "cmscategories":"news",
    "acct_id":"****",
    "domain_key":"",
    "type":"pageview"
  };
</script>
<script type="text/javascript">
(function() {
  var brtrk = document.createElement('script');
  brtrk.type = 'text/javascript';
  brtrk.async = true;
  brtrk.src = '//cdns.brsrvr.com/v1/br-trk-****.js';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(brtrk, s);
})();
</script>

BloomReach Pixel Validator, a Google Chrome Extension Plugin that you can download for free, allows you to inspect Universal Pixel contribution data at runtime on the content delivery web application through a nice UI instead of looking into the page source:

Business users as well as developers can use the tool to validate the result against the configured or customized Universal Pixel contribution data.

Various Levels of Universal Pixel Contribution

There are two different types of pages rendered by a Bloomreach Experience Manager delivery web application:

• Landing pages, managed by webmasters, aggregating components and primary content.
• Content-driven pages, pre-configured by developers, managed by editors creating documents, and primarily exposing the content in those documents.

Webmasters are able to configure Universal Pixel contribution data for landing pages in the Experience manager and editors can do the same in a document for content-driven pages.

In addition, webmasters might want to set channel-level default Universal Pixel data values which can be merged together if either a landing page or content-driven page doesn't override some Universal Pixel data values.

Universal Pixel Contribution for Landing Page

For a landing page, webmasters can manage Universal Pixel contribution data by selecting the Page > Info menu in Experience manager. See the following screenshot:

The Experience manager then opens the Universal Pixel variables editor UI in the right side-panel. Any changes made in the UI are stored with the landing page and that data will be used by the content delivery application when rendering the landing page once the channel gets published.

Universal Pixel Contribution for Content-driven Page

For content-driven pages, the "driving" document can be combined with a Universal Pixel contribution editor field like the following example:

If the specific document type is designed to include the Universal Pixel contribution editor field, then editors are able to configure Universal Pixel contribution data at the document level directly.

Once the document gets published, the associated content-driven page(s) will be rendered with the specified Unviersal Pixel contribution data automatically.

See the Configuration page for how to add the Universal Pixel contribution editor field to a document type.

Channel Default Universal Pixel Contribution

Sometimes, you might want to set the default Universal Pixel contribution data for every page in a channel if a specific landing page or content-oriented page does not define contribution data by itself. Default Universal Pixel contribution is possible per channel even when a page doesn't contribute data by itself.

If you want to render default Universal Pixel contribution values, you should pick a Universal Pixel Variables document for the Default Universal Pixel Variables parameter in the Channel properties window:

See the Configuration page for how to enable the Universal Pixel configuration in the Channel setting window.

You can create a Universal Pixel Variables document anywhere in CMS and configure variables like the following:

See the Configuration page for more details.

Event Tracking to Track User Interaction in a Page

The Universal Pixel Integration Addon does currently not provide support for triggering Universal Pixel requests for user interaction events other than page loads (event tracking).

Therefore, if you want to add event tracking to a page, you should customize the HST component templates to add JavaScript snippets like the following example:

<a href="#" onClick="BrTrk.getTracker().logEvent('cart', 'click-add', {'prod_id': '348574', 'sku' : 'sku38738'});">Add to cart</a>

Like the above snippet, which would typically be called from the "add to cart" function in your project, you need to use the BrTrk.getTracker().logEvent() function on a case by case basis, so you contribute Universal Pixel event tracking data by attaching click handlers to the "add to cart" buttons for instance. Please consult the Universal Pixel developer guide documentation for details.

References

1. BloomReach Pixel Validator Chrome Extension, https://chrome.google.com/webstore/search/bloomreach+pixel+validator
2. BloomReach DevStudio, https://developers.bloomreach.com/products/personalization/dev-studio