Contextual Personalization in Weblayers

Contextual personalization for weblayers is a feature that drives your conversion rates and provides truly personalized banners for your customers. It automatically assesses all the chosen contexts of your customers and utilizes the insights in real time to serve the most suitable weblayer variant to your customers based on their specific context.

📘

This guide shows you how you can set up contextually personalized weblayers. For general information on weblayers, please refer to our main documentation page.

To learn more about contextual personalization and how it works, you can also check our main documentation page.

You can watch this video guide to see how to set up contextual personalization in weblayers. Everything is covered in the textual guide, too.

🌟

This is a Premium tier feature powered by Loomi AI.

Setup Guide

1. Select a Use Case

Select a use case where personalization plays a relevant role to achieve desired results. This guide will use a subscription weblayer with two discount types as an example.

2. Create a Weblayer

Create different variants of a weblayer. Allow A/B test and set all the relevant settings. Read more about how you can create weblayers here.

Variant A shows a banner that offers free delivery when subscribing.

Variant A shows a banner that offers free delivery when subscribing.

Variant B shows a banner that offers a 10% discount when subscribing.

Variant B shows a banner that offers a 10% discount when subscribing.

3. Set the Contextual Personalization

To set the contextual personalization, go to the A/B test section, choose Contextual personalization in the field shown in the first picture, and then set the Traffic distribution.

Traffic Split

To make sure you make the right choices, it is essential to not only use contextual personalization, but also compare it to simple variants. That is why you should send some customer traffic to a comparative A/B test.

A good ratio is to send 80% of the traffic to contextual personalization and 20% to the comparative A/B test. This way, contextual personalization can learn fast, and at the same time, enough relevant traffic goes to the simple variants so you can accurately measure the improvement accurately.

Optimization Target

To make the contextual personalization model work effectively, it is important to let it know when the served variants are successful. You can do this automatically when you set up the optimization target or manually using the open API.

However, keep in mind that the automatic way only works when you track success on the same page where the weblayer is shown. If you want to track success further along in the process, you will need to use the API.

In this case, you can do so if you set it to subscription banner click and specify the banner_name, such as "New Subscription Banner" or banner_id, which can be found in the URL. This way, you can provide more detailed tracking for success in the funnel.

Reward Settings

In situations where the weblayer variants and their success have different business values (e.g., subscription with and without discount), you can promote this information to the model. In this example, however, it is not needed.

Features

Contextual personalization works with contexts that are defined via selected features. The features can be anything from the visitor's device to the most-visited product category to a behavior segment like RFM.

1980

The first example shows customer features - device, browser, and country.

1646

The second example shows a segmentation by the number of purchases of your customers.

Settings

Under the Settings page, choose relevant data, including the consent category. Learn more about consent management in our documentation. For this use case, use a consent category you normally use for personalized weblayers.

Contextual personalization can serve different variants to the same visitors based on the current visitor context and learnings. If you do not wish this to happen, ensure the weblayer is shown only once.

After you set up the contextual personalization, you are ready to run the weblayer.

Advanced Settings

Optimization Target

The optimization target is the action that triggers sending the reward to contextual personalization. This target is turned on by default in the contextual personalization Settings. This works with events tracked on the same page as the weblayer is displayed. If you need to track the reward later or are not on the same page, turn this option off and use the API to track the reward whenever needed.

Make sure this is no later than 15 minutes, as this is the maximum delay between serving the weblayer and tracking the reward. Remember that the bigger the conversion rate from impression to this target, the faster it will take the contextual personalization model to learn relevant insights and use them.

Also make sure that you have the reward_token stored to be able to send the reward. This can be done directly in the JavaScript of the weblayer. The reward token is in the object data.contextual_personalization.reward_token, so you can track it into the banner event or create a new dedicated event that can easily expire after 15 minutes.

The data.contextual_personalization is present only for variants served by contextual personalization. Therefore, do not try to get reward for variants served by the comparative A/B test in cases where you use it.

You can send the reward token easily via a simple on_event triggered scenario:

954

In this example, after every purchase, a verification of whether the user was impressed by the contextual personalization is done. If yes, the reward is tracked.

This is the relevant API you need to call:

POST https\://<api-domain>/webxp/bandits/reward

req: {"reward_token": "<reward-token-string>", "value": 1.0}

resp: <empty> (HTTP 202)

🚧

Automatic Reward Tracking

Automatic reward tracking is available only for events that are tracked on the same page session as the weblayer is shown.

Evaluation

In order to evaluate the uplift of contextual personalization, you need to run a comparative A/B test.

Imagine a case with two variants where you also used the comparative A/B test option.

To evaluate the uplift of contextual personalization against simple variants, you need to split the customers based on the served variant and its origin.

The best way to do this is to create a segmentation with three segments:

  1. Contextual personalization,
  2. Variant A,
  3. Variant B.

To be able to create such segmentations, use the property variant_type. This property is tracked inside the banner event.

Since contextual personalization and also the comparative A/B test serve all the different variants, this property variant_type tells what the origin of the variant was.

Usually, contextual personalization performs better than the whole A/B test or each variant on its own. But if it does not, it is more helpful to show everyone the winning variant.

There are a few reasons why contextual personalization might not do as well as the simple variants. One reason is that visitor behavior cannot always be predicted based on the selected features. Also, as part of the ongoing learning process, contextual personalization and its algorithm always show a small percentage of different options to visitors randomly.

For example, in a simple case where one variant is better for every context, the worse variant will also be served via contextual personalization. Overall, they will lose against the single variant.

📘

Evaluation Dashboard

All our predefined weblayer templates have the property variant_type populated. It is recommended to build your evaluation dashboard right when you build your campaign to make sure all the data is tracked correctly.

In case you build your weblayer from scratch, you need to add the variant_type to the tracking in the JS in following way:

function getEventProperties (action, interactive) {
	return {
    action: action,
    banner_id: self.data.banner_id, 
    banner_name: self.data.banner_name, 
    banner_type: self.data.banner_type, 
    variant_id: self.data.variant_id, 
    variant_name: self.data.variant_name,
    variant_type: self.data.contextual_personalization != null ? 'contextual personalisation' : 'ABtest',
    interaction: interactive !== false,
	};
}
Evaluation funnel for the New Subscription Banner

Evaluation funnel for the New Subscription Banner

Results of the evaluation funnel for the New Subscription Banner

Results of the evaluation funnel for the New Subscription Banner

Post-Evaluation Settings

The last step after the evaluation is to take action based on its results. If you are happy with the results and do not plan to make any adaptations or rerun the test, you need to select the winner — either the contextual personalization or one of the variants. This can be quickly done in the contextual personalization settings in the Finish A/B test section.

🚧

This section is available only for running weblayers with non-100% traffic sent to contextual personalization.

❗️

A confirmation window is displayed as this action cannot be undone after you select the winner and click on the Finish A/B Test button.

After the confirmation, all the traffic is served with the selected variant, and the Finish A/B test section informs about this.