Campaigns / Personalization

showWebLayer()

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

Arguments

Name

Value

Description

BannerId (Required)

String

ID of your banner

Parameters

Object

Pass custom parameters to your banner

NoHiding

Boolean (default false)

Keep other layers visible?

OnSuccess callback

Function

Execute custom function after successfully receiving banner from Exponea

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, some of your web layer settings are ignored:
Ignored parameters: schedule, showOn, target devices
Applied parameters: display, audience

getRecommendation()

Get personalized recommendations from your Exponea recommendation model.

Arguments

Name

Value

Description

Options (Required)

Object

Recommendation options

Options

Name

Value

Description

recommendationId (Required)

String

ID of your recommendation model.

fillWithRandom

Boolean

If true, fills the recommendations with random items until size is reached. This is utilized when models cannot recommend enough items.

callback (Required)

Function

Handle data returned from recommendation model.

size

Number

Specifies the upper limit for the number of recommendations to return. Defaults to 10.

items

Object

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

{"product_id_1": 1, "product_id_2": 2,}

catalogFilter

Array of Objects

Adds 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 TypesOperators
Commonis set, is not set, has value, has no value
Stringsequals, does not equal, in, not in, contains, does not contain
Numbersequal to, in between, less than, greater than
Booleanis true, is false
Datesmore than, less than, matches range, matches current day, matches current month, matches current year

Example:

[
    {
        "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"
    }
]

catalogAttributesWhitelist

Array of Strings

Returns only specified attributes from catalog items. If empty or not set, returns everything.

Example:

["item_id", "title", "link", "image_link"]

strategy

String

If specified, overrides the predefined value of the recommendation. Corresponds with the setting in the application. Can be one of 'winner' or 'mix'.

categoryNames

Array of Strings

Returns only specified categories.

(Required for Metric based category and Personalized category page engines; 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

Name

Value

Description

Name (Required)

String

Name of your A/B test

Variants (Required)

Object

A/B test options and probabilities

Callback

Function

Do 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 Exponea campaign builder, which can be called up by this function. It lets you easily implement customized HTML elements into your webpage.

Arguments

Name

Value

Description

CSS selector (Required)

String

CSS selector of item(s) which will hold your HTML block

HTML node name (Required)

String

Name of your HTML node

Examples

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

This call will asynchronously load content from Exponea 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

Name

Value

Description

HTML node name (Required)

String

Name of your HTML node

Callback function (Required)

Function

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

Exponea 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 Exponea.
  3. Call the user's callback after the weblayers are applied.

Arguments

Name

Value

Description

callback

Function

Execute custom function after successfully reloading weblayers.

Examples

Reload all web layers and register a callback:

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

Updated about a month ago


Campaigns / Personalization


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.


We rely on cookies

to optimize our communication and to enhance your customer experience. By clicking on the Accept and Close button, you agree to the collection of cookies. You can also adjust your preferences by clicking on Manage Preferences. For more information please see our Privacy policy.

Manage cookies
Accept & close

Cookies preferences

Accept & close
Back