Bloomreach Web SDK

The Bloomreach Web SDK lets you integrate your website with Bloomreach and track customer behavior across both Engagement and Discovery. It's built on top of the Engagement JavaScript SDK and inherits its functionality, so if you've worked with that SDK before, the setup will feel familiar.

🚧
Important
Namespace conflict: The Bloomreach Web SDK and the Engagement JavaScript SDK share the same namespace and cookie structure. You can't run both on the same website at the same time. If you're migrating from the Engagement JavaScript SDK, follow the migration guide before proceeding.

Installation

To install the SDK, add the following snippet to the <head> of your HTML before any other scripts. Replace the placeholder values with your actual credentials — see Find your credentials for instructions.

<style>.xnpe_async_hide{opacity:0 !important}</style>
<script>
  !function(e,t,n,i,o,r){
    const s=4e3,c="xnpe_async_hide";
    function a(e){
      if("number"!=typeof e)return e;
      const t=new Date;
      return new Date(t.getTime()+1e3*e)
    }
    function p(e){
      return e.reduce((function(e,t){
        return e[t]=function(){e._.push([t.toString(),arguments])},e
      }),{_:[]})
    }
    function m(e,t,n){
      const i=n.createElement(t);
      i.src=e;
      const o=n.getElementsByTagName(t)[0];
      return o.parentNode.insertBefore(i,o),i
    }
    function l(e){
      return"[object Date]"===Object.prototype.toString.call(e)
    }
    r.target=r.target||"//api.exponea.com",
    r.file_path=r.file_path||r.target+"/js/brweb.min.js",
    o[t]=p(["anonymize","initialize","identify","getSegments","update",
      "track","trackLink","trackEnhancedEcommerce","getHtml","showHtml",
      "showBanner","showWebLayer","ping","getAbTest","loadDependency",
      "getRecommendation","reloadWebLayers","_preInitialize",
      "_initializeConfig","metadata"]),
    o[t].notifications=p(["isAvailable","isSubscribed","subscribe","unsubscribe"]),
    o[t].segments=p(["subscribe"]),
    o[t]["snippetVersion"]="v3.1.1",
    function(e,t,n,i){
      e[i]={sdk:e[n],sdkObjectName:n,skipExperiments:!!t.new_experiments,
        path:t.target,streamId:t.stream_id}
    }(o,r,t,i),
    function(e,t,n){m(e.file_path,t,n)}(r,n,e),
    function(e,t,n,i,o,r,p,u){
      if(!e.new_experiments)return;
      !0===e.new_experiments&&(e.new_experiments={});
      const _=e.new_experiments.hide_class||c,
            f=e.new_experiments.timeout||s,
            d=encodeURIComponent(r.location.href);
      let g;
      e.cookies&&e.cookies.expires&&(
        "number"==typeof e.cookies.expires||l(e.cookies.expires)
          ?g=a(e.cookies.expires)
          :e.cookies.expires.tracking&&(
              "number"==typeof e.cookies.expires.tracking||
              l(e.cookies.expires.tracking)
            )&&(g=a(e.cookies.expires.tracking)));
      g&&g<new Date&&(g=void 0);
      const b=e.target+"/webxp/streams/"+e.stream_id+"/"+t+"/"+
        (u.exec(p.cookie)||[0,"new"])[1]+
        "/modifications.min.js?http-referer="+d+
        "&timeout="+f+"ms"+
        (g?"&cookie-expires="+Math.floor(g.getTime()/1e3):"");
      "sync"===e.new_experiments.mode&&
      r.localStorage.getItem("__exponea__sync_modifications__")
        ?function(e,t,n,i,o){
            n[o][t]="<"+t+' src="'+e+'"></'+t+">";
            i.writeln(n[o][t]);
            i.writeln("<"+t+">!"+o+".init && document.writeln("+o+"."+t+
              '.replace("/'+t+'/","/'+t+'-async/")'+
              '.replace("><"," async><"))</'+t+">")
          }(b,t,r,p,n)
        :function(e,t,n,i,o,r,s,c){
            r.documentElement.classList.add(e);
            const a=m(n,i,r);
            function p(){
              o[c].init||m(n.replace("/"+i+"/","/"+i+"-async/"),i,r)
            }
            function l(){r.documentElement.classList.remove(e)}
            a.onload=p,a.onerror=p,o.setTimeout(l,t),o[s]._revealPage=l
          }(_,f,b,t,r,p,o,n)
    }(r,n,i,0,t,o,e,RegExp("__exponea_etc__"+"=([\\w-]+)")),
    function(e,t,n){
      var i;
      e[t]._initializeConfig(n);
      (null===(i=n.experimental)||void 0===i?void 0:i.non_personalized_weblayers)
        &&e[t]._preInitialize(n);
      e[t].start=function(i){
        i&&Object.keys(i).forEach((e=>n[e]=i[e]));
        e[t].initialize(n)
      }
    }(o,t,r)
  }(document,"brweb","script","webxpClient",window,{
    target: "https://api.XXXXXXX.dev",
    // Your Bloomreach API base URL
    stream_id: "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX",
    // Your event stream ID
    experimental: {
      non_personalized_weblayers: true
    },
    new_experiments: {
      mode: "sync"
    },
    customer: {
      email_id: "[email protected]"
      // Identified visitor's email address
    },
    track: {
      default_properties: {
        customer_tier: "gold-member"
        // Custom properties added to all events
      },
      metadata: {
        domain_key: "Pacific",
        // Provided by your Discovery consultant
        view_id: "en_US",
        // Provided by your Discovery consultant
        test_data: true,
        // Ignores events in Discovery on production
        debug: true
        // Enables real-time integration mode in Discovery
      }
    },
  });
  brweb.start();
</script>

📘
Note
Some privacy regulations require you to call brweb.start() only after the visitor has granted cookie consent.

Find your credentials

You need two credentials to configure the snippet: target and stream_id.

target is your Bloomreach API base URL. Find it in either of these locations:

Event streams menu — the endpoint URL is displayed in the Access security tab on an event stream details page.
Data Hub > Workspace settings > Access Management > API > API Credentials

stream_id is your event stream ID. Find it in Data hub > Event streams > select your stream > Settings.

Configuration

The Bloomreach Web SDK shares its base configuration with the Engagement JavaScript SDK. For a full reference of shared configuration options, see JS SDK configuration.

The following options are unique to the Bloomreach Web SDK.

Metadata

Use the metadata object inside track to pass Discovery-specific properties with every tracked event. Contact your Discovery technical consultant to get the correct values for your account.

Parameter	Type	Description
`domain_key`	String	Identifies your Discovery catalog. Provided by your Discovery consultant.
`view_id`	String	Identifies the catalog view, for example, a locale or region. Provided by your Discovery consultant.
`test_data`	Boolean	When `true`, Discovery ignores events on production. Use during testing.
`debug`	Boolean	When `true`, enables real-time integration mode and ignores events in Discovery on production.

Real-time segments

Real-time segments (RTS) let Engagement pass live customer segment data to Discovery for personalized search and merchandising. To enable RTS, add the following to your configuration object:

cdp_segments: {
  rts: true
}

Custom tracking domain

A custom tracking domain (CTD) lets you serve the SDK from your own domain, which can improve resilience against ad blockers and enable first-party data collection. For setup instructions, see Custom tracking domain.

What's next?

Explore the Bloomreach Web SDK documentation:

Read the Engagement JavaScript SDK documentation for details on: