Campaigns and personalization

showWebLayer()

In addition to configuring rules for showing weblayers in Marketing App you can also trigger a weblayer manually by calling the showWebLayer() function.

Arguments

Examples

Show a weblayer by ID:

exponea.showWebLayer('5c8f6c6b48092d00121cf959');

Show a weblayer, pass custom parameters, and register a callback:

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

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 Marketing 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 A/B 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.

showHtml()

You can create custom HTML blocks in Marketing 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 Marketing 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
  }
);

getPageState()

Get the engagement signals the Web SDK has measured for the current page view — active time, scroll position, clicks, exit intent, and more. This is the same data smart triggering uses to decide when a weblayers appears.

Return value

All values reset when a new page loads.

Examples

Read the current state and send it to your own analytics when the visitor leaves the page:

window.addEventListener("pagehide", function () {
  const state = exponea.getPageState();
  myAnalytics.send("engagement", { activeSeconds: state.active_time_s, clicks: state.total_clicks });
});

reloadWebLayers()

Marketing handles loading of your weblayers automatically. However, in special cases (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 Marketing.
3. Call the user's callback after the weblayers are applied.

Arguments

Examples

Reload all weblayers and register a callback:

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