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

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

Options

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

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

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

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

Examples

Reload all web layers and register a callback:

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