Recommendation Campaign

Introduction

Recommendation campaigns helps users to discover relevant products based on their previous purchases. They display the most relevant items to each customer, as mapped at the product level. For example, consider an e-commerce store recommending you to buy a protective case after you purchase ear buds. The recommendations can be sent to the customer through any channel. In this example, we discuss how to send recommendation campaigns through Push and Email channels. 

library_add_check

Prerequisites

  1. Enterprise Plan - Dynamic product messaging should be enabled for your account

  2. Recommendation Product Mapping - Products to be recommended against any products the user has shown interest in. Interest may be shown, either by adding the product to the cart or purchasing a particular product.

Recommendation Campaign - Set up

To create a Recommendation Campaign:

  1. Set up the Catalog.
  2. Map an event in User Actions.
  3. Create a Product Set.
  4. Set the campaign up.

Set up the Catalog

A product catalog serves as the source for the relevant product and stock details. To set up a catalog, refer here.

Let's describe the product using these mandatory fields to set up a catalog. 

  • id - Unique identifier of the product
  • title - Name of the product
  • link - Link of the landing page of the product
  • image_link - Link of the image for the product
  • price - Price of the product

In addition to the above mandatory fields, add the recommended products against all products that the user may be interested in. You can have multiple recommendations for each product.

Sample file

Recom_excel.jpg

Click here to download the sample file.

Go Back 

Map an event

A product is recommended to the user basis his/her interactions with the app/website. These interactions are picked up as events. These events, for instance, the Item Purchased event, triggers other product recommendations for the user. 

Events are mapped in the User actions section; check here for more details.

BCS-2.png

Go Back 

Create a Product Set

After the catalog and user actions are set, both need to be mapped to generate the product set.
So, when a customer purchases a product,
the product details are fetched from the catalog and the user event that gets associated with it helps create the product set. Click here to understand more about Product Set.

Sample Product Set -

BCS-3.png

Go Back 

Setup Campaign

Create a Campaign after creating the Product Set. Use a periodic campaign for a specific channel or a periodic flow to reach users with multiple communications across channels.

Add JINJA code to fetch the product details from the product set. 

Unlike other DPM campaigns, in this case, we reference the recommended products on the action done for the product. Hence, for each product, there can be multiple recommended products within the same object of the product set.

Sample JINJA snippets.

To get the title of the first recommendation for the Item Purchased, use the code below

{% if ProductSet.purchaseRecommendation%}{% for i in ProductSet.purchaseRecommendation%}{{i.reco1_title}}{% endfor %}{% else %}MOE_NOT_SEND{% endif %}

To get the title of the second recommendation for the Item Purchased, use the code below

{% if ProductSet.purchaseRecommendation%}{% for i in ProductSet.purchaseRecommendation%}{{i.reco2_title}}{% endfor %}{% else %}MOE_NOT_SEND{% endif %}

The catalog, in the case above, has 2 recommended products against each product, hence there are two iterations shown.

Similarly, the column name of recommended products title is used in the code, in case the column name in the catalog used is different, accordingly, the name needs to be changed.

In the case of Push Notifications, since only the first product in the Product Set has to be fetched, limit the for loop to only the first product and fetch only one recommended product.

{% if ProductSet.purchaseRecommendation%}{%{% if ProductSet.purchaseRecommendation%}{% for i in ProductSet.purchaseRecommendation[0:1]%}{{i.reco1_title}}{% endfor %}{% else %}MOE_NOT_SEND{% endif %} for i in ProductSet.purchaseRecommendation%}{{i.reco2_title}}{% endfor %}{% else %}MOE_NOT_SEND{% endif %}

In the case of Emails, since all the products in the product set are to be displayed, add the HTML within the for loop to ensure all products are printed, but for each purchased product, you will need to display all the recommended products.

{% if ProductSet.purchaseRecommendation%}{% for i in ProductSet.purchaseRecommendation%}<HTML>{{i.reco1_title}}<HTML><HTML>{{i.reco2_title}}<HTML>{% endfor %}{% else %}MOE_NOT_SEND{% endif %} if ProductSet.purchaseRecommendation%}{% for i in ProductSet.purchaseRecommendation%}{{i.reco2_title}}{% endfor %}{% else %}MOE_NOT_SEND{% endif %}
info

Note

Change the Product Set name in the above snippets from purchaseRecommendation to a name your Product Set uses.

Go Back

On-Site Messaging (OSM) for recommendations

OSM is a great way to grab customers attention while on the website and showcase recommended products powered by the catalog when the customer intends to exit or does a particular action like viewing the cart. Create an OSM campaign using the custom HTML code given below to show product recommendations. Watch the video below to see the journey of your user.  

Custom HTML

The following is a Dynamic Product Messaging(DPM) based OSM where recommended products are listed.


<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style>
body {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
margin-top: 75px;


}

#container {
background: white;
margin: 20px;
padding: 0;
width: 70%;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
border-radius: 20px;
box-shadow: 1.5px 1.5px 2.5px 3px rgba(0, 0, 0, 0.4);

}

#prodcontainer {
display: flex;
justify-content: center;
margin: 10px;
flex-direction: row;
position: relative;
align-items: center;
width: 100%;
}

#product {
display: flex;
justify-content: center;
margin: 10px;
flex-direction: column;
position: relative;
align-items: center;
border-radius: 10px;
border: 1px solid #44a7b7;
width: 30%;
min-height: 350px;
max-height: 350px;

}

.image {
max-height: 150px;


border-radius: 5px;

}

.title {
padding: 5px;
margin: auto;
text-align: center;
}

.price {
padding: 5px;
margin: auto;
text-align: center;
}

.desc {
padding: 5px;
margin: auto;
text-align: center;
}

.atcbut {
background: #44a7b7;
padding: 10px 30px;
margin: 10px;
cursor: pointer;
color: white;
border: none;
width: 100%;
}

.atcbut:hover {
background: #eaeaea;
color: black;

}

.butdiv {
display: flex;
position: relative;
justify-content: center;

}

.titdiv {
display: flex;
position: relative;
justify-content: center;
min-height: 50px;
max-height: 50px;

}

.tcbut:hover {
background: #eaeaea;
color: black;

}

#product:hover {
box-shadow: 1.5px 1.5px 2.5px 3px rgba(0, 0, 0, 0.4);
}

.gtcbut {
background: #44a7b7;
padding: 10px 30px;
margin: 10px;
cursor: pointer;
color: white;
border: none;
}

.gotocartdiv {
display: flex;
position: relative;
justify-content: center;
width: 100%;
margin-top: 0;

}

.gtcbut:hover {
background: #eaeaea;
color: black;

}

.closediv {
margin-left: 900px;
margin-top: 10px;


}

.close {
background: #44a7b7;
margin: 10px;
cursor: pointer;
color: white;
border: none;

}

.close:hover {
background: #eaeaea;
color: black;

}
</style>
</head>

<body>
<div id="container">

<div class="row">
<div class="closediv"><button class="close close-icon moe-inapp-close moe-element">X</button></div>
<!--<div class="gotocartdiv"><h1>Hate to see you go!</h1></div>-->


</div>
<div id="prodcontainer">
<div id="product">
<div>
<img class="image" src="{{ProductSet.bliblirecocat[0].image_link}}">
</div>
<div>
<h2 class="title">{{ProductSet.bliblirecocat[0].title}}</h2>
</div>
<div>
<h3 class="price">Rp{{ProductSet.bliblirecocat[0].price|int}}</h3>
</div>
<!--<div class="titdiv">
<p class="desc">Description</p>
</div>-->
<div class="butdiv"><button class="atcbut">Add to Cart</button></div>
</div>

<div id="product">
<div>
<img class="image" src="{{ProductSet.bliblirecocat[1].image_link}}">
</div>
<div>
<h2 class="title">{{ProductSet.bliblirecocat[1].title}}</h2>
</div>
<div>
<h3 class="price">Rp{{ProductSet.bliblirecocat[1].price|int}}</h3>
</div>
<!--<div class="titdiv">
<p class="desc">Description</p>
</div>-->
<div class="butdiv"><button class="atcbut">Add to Cart</button></div>

</div>

<div id="product">
<div>
<img class="image" src="{{ProductSet.bliblirecocat[2].image_link}}">
</div>
<div>
<h2 class="title">{{ProductSet.bliblirecocat[2].title}}</h2>
</div>
<div>
<h3 class="price">Rp{{ProductSet.bliblirecocat[2].price|int}}</h3>
</div>
<!--<div class="titdiv">
<p class="desc">Description</p>
</div>-->
<div class="butdiv"><button class="atcbut">Add to Cart</button></div>

</div>


</div>
<div>
<div class="gotocartdiv"><button class="gtcbut">Visit Cart</button></div>
</div>

</div>

</body>

</html>
Was this article helpful?
0 out of 0 found this helpful