Introduction to Customer Bias
The Hello Retail platform keeps track of the preferences of customers visiting a shop. We call these preferences "Customer Bias". The customers reveals their preferences gradually by visiting and buying products. Even with very little information Hello Retail will be able to utilize our Product Inteligence engine to predict the preferences of the new visitor.
This Customer Bias is used to provide personalization inside Hello Retail products like Search, Pages and Product Recommendations. Beyond this, the Customer Bias can also be accessed directly using the SDK and through the REST-API.
The raw Customer Bias data can be used to implement personalization on other elements of the customer journey. If you hava helloretail.js installed on your site, you can get the users 5 favorite brands by running this example.
hrq = window.hrq || [];
hrq.push([
"getCustomerBias",
{fields: ["brand"]},
function(response){
if (response.success) {
console.log(response);
} else {
console.error("Could not load customer bias");
}
}
]);
Below we provide two more complete example use-cases, a personalized front page hero banner and personalized post conversion emails.
Customer Bias data
The customer preferences are expressed in terms of the attributes available on the products in your product catalog. If a customer has viewed many products in the category "Men" and many with sports brands the data could look something like this:
{
"bias": {
"hierarchyLevel1": [
{
"value": "Men$",
"weight": 80
},
{
"value": "Kids$",
"weight": 15
},
{
"value": "Women$",
"weight": 5
}
],
"brand": [
{
"value": "Nike",
"weight": 50
},
{
"value": "Adidas",
"weight": 40
},
{
"value": "Tiger of Sweden",
"weight": 10
}
]
},
"success": true
}
Notice that for each product attribute (hierarchyLevel1 and brand in the example) you get the values that the customer prefers. You also get a weight as a percentage, this value indicates how much the customer prefers that value compared to the other returned values.
A note about hierarchies (breadcrumbs)
Each product in your catalog will typically be in one or more hierarchies, also often refered to as breadcrumbs or categories. A mens sports shoe could for example be in:
Men › Shoes › Sport
and
Offers › Shoes
The customer bias will return the customer preference for each hierarchy level seperately. So to get the customers preferred level 2 hierarchy you would request the field hierarchyLevel2.
Example 1: Personalized Front Page Hero Banner
In many cases it can be a good idea to have eye-catching hero banners on the frontpage of a shop. Using customer bias it is possible to personalize this banner to the individual customer.
If we imagine a shop with the following structure:
- Women
- Clothes
- Shoes
- Accessories
- Beauty
- Men
- Clothes
- Shoes
- Accessories
- Personal Care
- Kids
- Clothes
- Shoes
The ecommerce manager knows that Women › Clothes, Women › Shoes and Men › Clothes are very important categories for the shop. So they design specific banners for each of those 2nd level categories. Furthermore they design a banner for each of the three 1st level categories Women, Men, Kids that can be used for the other cases.
The shop developer can use the Hello Retail SDK to decide what banner to show to each customer. When the frontpage is loaded they call the getCustomerBias function, passing in the fields that they want returned and a callback that will receive the response. When the response is returned the resulting data can be used to load the correct banner. The example below illustrates how a system like this could be implemented. The code is just an example, but can be used as a starting point for your own implementation.
// Available banners
const bannerUrlMap = {
'Women$Clothes$': {'image':'https://shop.example.com/hero/banner/woman_clothes.jpg', 'link': 'https://shop.example.com/woman/clothes' },
'Women$Shoes$': {'image':'https://shop.example.com/hero/banner/woman_shoes.jpg', 'link': 'https://shop.example.com/woman/shoes' },
'Women$Shoes$': {'image':'https://shop.example.com/hero/banner/woman_shoes.jpg', 'link': 'https://shop.example.com/woman/shoes' },
'Women$': {'image':'https://shop.example.com/hero/banner/woman.jpg', 'link': 'https://shop.example.com/woman' },
'Men$': {'image':'https://shop.example.com/hero/banner/men.jpg', 'link': 'https://shop.example.com/men' },
'Kids$': {'image':'https://shop.example.com/hero/banner/kids.jpg', 'link': 'https://shop.example.com/kids' }
}
// Default banner used if something fails
const defaultBanner = {
'image': 'https://shop.example.com/hero/banner/woman_clothes.jpg',
'link': 'https://shop.example.com/woman/clothes'
}
function showBanner(banner) {
// implement logic to actually show the banner
}
hrq = window.hrq || [];
hrq.push([
"getCustomerBias",
{fields: ["hierarchyLevel1", "hierarchyLevel2"]},
function(response){
if (response.success) {
const preferredLevel2hierarchy = response.bias.hierarchyLevel2[0].value;
if (bannerUrlMap[preferredLevel2hierarchy]) {
showBanner(bannerUrlMap[preferredLevel2hierarchy]);
return;
}
const preferredLevel1hierarchy = response.bias.hierarchyLevel1[0].value;
if (bannerUrlMap[preferredLevel1hierarchy]) {
showBanner(bannerUrlMap[preferredLevel1hierarchy]);
return;
}
}
showBanner(defaultBanner);
}
]);
Example 2: Discount code for high margin shoppers
Providing discount codes is a good way of increasing the probability that a customer will return, but it might not be a good idea to provide the same discount code to all customers. This example shows how you can use the Hello Retail REST API to fetch customer bias and use that to determine if an email with a discount code should be sent.
It is possible to get customer preferences data on custom extraData fields as well as the standard product fields. In a situation where products in a catalog synchronized with Hello Retail has a property extraData.margin, with one of the values low, medium, or high, it is possible to use the API to learn if the customer is more interested in high margin products. A specific product might look something like this:
{
"title": "Air Max X",
"description": "Ultra light and fast running shoes",
"price": 1200,
"url": "htpps://shop.example.com/men/shoes/air-max-x",
"imgUrl": "htpps://shop.example.com/images/shoes/air-max-x.jpg",
"extraData": {
"margin": "high"
},
...
}
Given a product catalog where products have a structure similar to the above, and given that Hello Retail conversion and view tracking has been configured, it is possible to use the REST API to know what margin-class a customer has shown interest in. The following example in Javascript could be run as part of code that sends out a newsletter. For each newsletter recipient it will request the customer bias for the extraData.margin field, and then use the returned value to determine if a discount code should be included or not.
async function getCustomerBias(email, websiteUuid){
var data = {
websiteUuid: websiteUuid,
email: email,
fields: ['extraData.margin']
};
var options = {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data)
}
const response = await fetch('https://core.helloretail.com/serve/customer/bias', options);
return await response.json();
};
newsletterRecipients.forEach((recipient) => {
getCustomerBias(recipient.email, '{website id}').then((resp) => {
let discount = null;
if (resp.success && resp.bias["extraData.margin"]) {
const marginClass = resp.bias["extraData.margin"][0].value;
discountCode = getDiscountCodeForMarginClass(marginClass);
}
sendMailWithDiscountCode(recipient, discountCode);
});
});