Bloomreach

Bloomreach Documentation version

This article covers a Bloomreach Experience Manager version 13. There's an updated version available that covers our most recent release.

Customize Universal Pixel Integration Addon

This Bloomreach Experience Manager feature requires a standard or premium license. Please contact Bloomreach for more information.

Add a Universal Pixel Editor Field to an Existing Document Type

For content-driven pages (as opposed to landing pages), Universal Pixel data can be specified per document. If you want to do that, add the Universal Pixel Variables mixin to the desired document types.

Once you commit and publish the changes with the new Universal Pixel Variables mixin, editors will be able to set Universal Pixel variables per document.

Pixel Scriptlet Location and Head Contributions

In the end, Universal Pixel data contribution is done through JavaScript scriptlets on a page, like this:

<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>

The scriptlets consist of two parts:

  1. Definition of the Universal Pixel Data JavaScript object: var br_data = { ... }
  2. Dynamic retrieval of the Universal Pixel Tracker Library

The Universal Pixel Integration addon internally uses the HST Head Contributions feature and contributes both scripts using the "scripts" category value.

Typically, the base layout template (e.g. repository-data/webfiles/src/main/resources/site/freemarker/myproject/base-layout.ftl) specifies the <@hst.headContributions /> tag for the "scripts" category, which causes the scriptlets to be included at the bottom of each page:

<!doctype html>
<#include "../include/imports.ftl">
<html lang="en">
  <head>
    <#-- SNIP -->
    <@hst.headContributions categoryExcludes="htmlBodyEnd, scripts" xhtml=true/>
  </head>
  <body>
    <#-- SNIP -->
    <@hst.headContributions categoryIncludes="htmlBodyEnd, scripts" xhtml=true/>
  </body>
</html>

Configure Head Contribution Category Values

By default, both scriptlets are contributed using the default category value, "scripts". To set a different category value for each scriptlet, add the following properties in /WEB-INF/hst-config.properties in the webapp web application:

# Head contribution category name for the Universal Pixel Data JavaScript variable scriptlet
universalpixel.trackingDataHeadContributionCategory = pixel-data-scriptlet
# Head contribution category name for the Universal Pixel Tracker library inclusion scriptlet
universalpixel.trackingJslibHeadContributionCategory = pixel-jslib-scriptlet

Above example makes the web application use the value "pixel-data-scriptlet" for the category of the head contribution for defining the pixel data object, and the value "pixel-jslib-scriptlet" for the category of the head contribution for dynamically including the tracking library.

If you customize the Head Contribution category values, make sure to update the layout page accordingly, as follows:

<!doctype html>
<#include "../include/imports.ftl">
<html lang="en">
  <head>
    <#-- SNIP -->
    <@hst.headContributions categoryExcludes="htmlBodyEnd, scripts, pixel-data-scriptlet, pixel-jslib-scriptlet" xhtml=true/>
  </head>
  <body>
    <#-- SNIP -->
    <@hst.headContributions categoryIncludes="htmlBodyEnd, scripts" xhtml=true/>

    <#-- Now, let's add separate head contributions for Universal Pixel scriptlets here. -->
    <@hst.headContributions categoryIncludes="pixel-data-scriptlet" xhtml=true/>
      <#-- Note: you can also include any custom JavaScript scriptlets here by using Head Contributions with a specific category for customization purposes. -->
    <@hst.headContributions categoryIncludes="pixel-jslib-scriptlet" xhtml=true/>
  </body>
</html>

You can include any custom JavaScript scriptlets between the two Universal Pixel Integration scriptlets for customization purposes. e.g. tweaking or automatic addition/updating of Universal Pixel variables based on domain specific knowledge.

Did you find this page helpful?
How could this documentation serve you better?
On this page
    Did you find this page helpful?
    How could this documentation serve you better?