Campaigns / Personalization

showWebLayer()

In addition to configuring rules for showing web layers in Bloomreach Engagement App you can also trigger a web layer manually by calling the 'showWebLayer()' function.

Arguments

NameValueDescription
BannerId (Required)StringID of your banner
ParametersObjectPass custom parameters to your banner
NoHidingBoolean (default false)Keep other layers visible?
OnSuccess callbackFunctionExecute custom function after successfully receiving banner from Bloomreach Engagement

Examples

Show a web layer by ID:

exponea.showWebLayer('5c8f6c6b48092d00121cf959');

Show a web layer, pass custom parameters, and register a callback:

exponea.showWebLayer(
  '5c8f6c6b48092d00121cf959',
  {
    myCustomValue: 12 // accessible in the web layer as {{ params.myCustomValue }}
  },
  true,
  function(){
    // called after the web layer is shown
  }
);

📘

You can still use the older function 'showBanner()' to achieve the same result.

📘

When calling showWebLayer, the grouping policy and some of the settings from the weblayer setup are ignored:
Ignored parameters: schedule, showOn, target devices
Applied parameters: display, audience

getRecommendation()

Get personalized recommendations from your Bloomreach Engagement recommendation model.

Arguments

NameValueDescription
Options (Required)ObjectRecommendation options

Options

NameValueDescription
recommendationId (Required) StringID of your recommendation model.
fillWithRandomBooleanIf true, fills the recommendations with random items until size is reached. This is utilized when models cannot recommend enough items.
callback (Required)FunctionHandle data returned from recommendation model.
sizeNumberSpecifies the upper limit for the number of recommendations to return. Defaults to 10.
itemsObjectIf present, the recommendations are related not only to a customer, but to products with IDs specified in this array. Item IDs from catalog used to train the recommendation model need to be used. Input product IDs in a dictionary as {product_id: weight}, where the value weight determines the preference strength for the given product (bigger number = higher preference).

Example:
json {"product_id_1": 1, "product_id_2": 2,}
catalogFilterArray of ObjectsAdds additional constrains to catalog when retrieving recommended items.

Can only be applied to fields marked as searchable. It is not possible to use item_id as a filter

Data Types | Operators
--------|--------
Common | is set, is not set, has value, has no value
Strings | equals, does not equal, in, not in, contains, does not contain
Numbers | equal to, in between, less than, greater than
Boolean | is true, is false
Dates | more than, less than, matches range, matches current day, matches current month, matches current year

Example:
json [ { "constraint": { "operands": [ { "type": "constant", "value": "jacket" } ], "operator": "contains", "type": "string" }, "property": "name" }, { "constraint": { "operands": [ { "type": "constant", "value": "" } ], "operator": "has value", "type": "string" }, "property": "description" }, { "constraint": { "operands": [ { "type": "constant", "value": "SUPER BRAND" } ], "operator": "equals", "type": "string" }, "property": "brand" }, { "constraint": { "operands": [ { "type": "constant", "value": "Women" } ], "operator": "equals", "type": "string" }, "property": "gender" }, { "constraint": { "operands": [ { "type": "constant", "value": 20 }, { "type": "constant", "value": 100 } ], "operator": "in between", "type": "number" }, "property": "price" }, { "constraint": { "operands": [ { "type": "constant", "value": 0 } ], "operator": "greater than", "type": "number" }, "property": "stock_level" } ]
catalogAttributesWhitelistArray of StringsReturns only specified attributes from catalog items. If empty or not set, returns everything.

Example:
["item_id", "title", "link", "image_link"]
strategyStringIf specified, overrides the predefined value of the recommendation. Corresponds with the setting in the application. Can be one of 'winner' or 'mix'.
categoryNamesArray of StringsReturns only specified categories.

(Required for Metric based category engine; when passing to Metric based category, the list is limited to 10)

Example:
["t-shirt", "jeans"]
or
["125", "14", "2"]

Examples

Display a recommendation model on the page:

<div id='recommendations'>
  Preparing recommendations just for you...
</div>
<script>
  var options = {
    recommendationId: '5a7c4dfefb6009323d4c7311',
    size: 5,
    callback: onRecommendationsLoaded,
    fillWithRandom: true,
  };
  exponea.getRecommendation(options);

  function onRecommendationsLoaded(data) {
    if (data && data.length > 0) {
      var element = document.getElementById('recommendations');
      var ul = document.createElement('ul');
      element.appendChild(ul);
      for (var i = 0; i < data.length; i++) {
        var item = data[i];
        var li = document.createElement('li'),
            a = document.createElement('a');
        a.id = item.item_id;
        a.setAttribute('href', item.url);
        a.innerText = a.textContent = item.title;
        li.appendChild(a);
        ul.appendChild(li);
      }
    } else {
      document.getElementById('recommendations').innerHTML =
        'Nothing could be recommended for you!';
    }
  }
</script>

getAbTest()

Runs an AB-test and returns the result.

Arguments

NameValueDescription
Name (Required)StringName of your A/B test
Variants (Required)ObjectA/B test options and probabilities
CallbackFunctionDo you tested stuff accordingly to returned variant

Examples

exponea.getAbTest(
  'Add to cart button A/B test', 
  {
    'GreenAddToCart':50,
    'YellowAddToCart':30,
    'ControlGroup':20
  },
  function(result) {
    if (result == 'GreenAddToCart') {
      $('.add-to-cart').css({
        'background-color':'green',
      });
    }else if (result == 'YellowAddToCar') {
      $('.add-to-cart').css({
        'background-color':'yellow',
      });
    }
  }
);

This code generates (randomly on client-side) an 50:30:20 A/B test on changing the add to cart button. Once your customer gets a variant of an A/B test, this value is stored in his cookie, so that next time he comes, he gets the same variant.

There is also an automatically tracked 'ab test' event, that contains the A/B test name and variant values, so that you can segment your customers based on this A/B test. This event is tracked only once.

🚧

If the JS SDK is fully loaded and there is no callback function defined, the call returns a String with Variant name and you can process the response yourself. Use freely from Tags / Web layers. Do not use without JS SDK fully loaded.

showHtml()

You can create custom HTML blocks in Bloomreach Engagement campaign builder, which can be called up by this function. It lets you easily implement customized HTML elements into your webpage.

Arguments

NameValueDescription
CSS selector (Required)StringCSS selector of item(s) which will hold your HTML block
HTML node name (Required)StringName of your HTML node

Examples

exponea.showHtml('div','myHtmlNode');

This call will asynchronously load content from Bloomreach Engagement backend that is associated under 'myHtmlNode' for current customer and set it as innerHTML of all div elements on your page.

Scenario needs to run at least once before the content is available in show/getHtml response.

getHtml()

You can even process your HTML block yourself by calling getHtml function, which returns the HTML block code.

Arguments

NameValueDescription
HTML node name (Required)StringName of your HTML node
Callback function (Required)FunctionCallback function that processes the HTML block code

Examples

exponea.getHtml(
  'myHtmlNode',
  function(html){
    // process the HTML block code in any way
  }
);

reloadWebLayers()

📘

This function is new in version v2.2.0.

Bloomreach Engagement handles loading of your weblayers automatically. However, in special cases (i.e. on SPA pages), you may need to control the re-loading of your weblayers by yourself. Function reloadWebLayers is used in such cases and it does:

  1. Revert weblayers on the page.
  2. Fetch and apply new weblayers from Bloomreach Engagement.
  3. Call the user's callback after the weblayers are applied.

Arguments

NameValueDescription
callbackFunctionExecute custom function after successfully reloading weblayers.

Examples

Reload all web layers and register a callback:

const callback = () => console.log('Weblayers reloaded');
exponea.reloadWebLayers(callback);