Configure product recommendations
As a channel developer, configuring the Product Recommendations feature involves the following steps.
Before you begin:
- Create and upload your product catalog. For more information, see Create your product catalog.
- Configure the Exchange and your analytics library to work with Personalization. For more information, see Exchange - Connect user data with Personalization.
- Deploy the Personalization library. For more information, see Configure library.
- Set up the zones of your channel to display the product recommendations. For more information, see Configure zones on your channel.
Configure product recommendations for MPA using Personalization library version 1.5.0
- Configure the zone on your MPA channel to display product recommendations.
- Register the zone in Personalization. Make a note of the Zone Registration Id (ZONE_REG_ID) from the Personalization UI.
- Locate the HTML file of your MPA zone on which you want to show product recommendations.
<div>
<h3>Title of the zone</h3>
<div id="ZONE_REG_ID" wrtp-recommended-zone="ZONE_REG_ID"></div>
</div>
You must include the wrtp-recommended-zone HTML attribute. The value must be the same as the ZONE_REG_ID.
- Add the following code to the JavaScript file of your MPA. If you are using multiple code snippets, include them in the same
window.onload = init function
. You can add the following code snippets:- personalization,
- product recommendation,
- and Google Analytics events snippets.
<script>
let init = (function () {
if (acoustic != undefined || acoustic != {}) {
const personalizationObject = acoustic.personalization.JsWRTP.create();
//If Personalization Library already configured, use code from here onwards
personalizationObject.onRecommendationsReady(() =>
{
// Repeat this part for each zone required for product recs
const zoneId = "ZONE_REG_ID";
personalizationObject.getRecommendedProducts(zoneId, <<NUMBER_OF_PRODUCTS>>)
.then(RESPONSE => {
let zoneArea = personalizationObject.getZoneArea(zoneId);
if (zoneArea) {
if (RESPONSE !== 'PRNF404' && RESPONSE !== undefined) {
// Rendering logic
/**
* Create an HTMLElement dynamically for each product
* Add personalizationObject.trackProduct(RESPONSE[i].PRODUCT_ID, event); on click of each HTMLElement.
**/
zoneArea.append(<<HTMLElement>>);
zoneArea.style.opacity = 1;
// Add code to display the content
} else {
console.log('Personalization: Error in getting the recommendations.');
}
} else {
console.log('Personalization: Please add a valid element on HTML for displaying the recommended products.');
}
}); //End of part to be repeated
})
} else {
console.log("Personalization: Error in loading the online-engine library.");
}
});
window.onload = init;
</script>
In the code snippet:
- Note that the version 1.5.0 introduces a new function
personalizationObject.onRecommendationsReady()
- The variable
ZONE_REG_ID
must be unique for each registered zone. RESPONSE
is the catalog data with strategy information. You can rename it with the appropriate algorithm name (MostPopular, MostRrecent, etc.)- Error
PRNF404
occurs if there are no recommendations or errors in fetching recommendations. NUMBER_OF_PRODUCTS
is the total number of products required. If nothing is passed for this parameter, then the default value of 10 is used.PRODUCT_ID
is a property of theRESPONSE/product
object, and you can rename it as required.- The
trackProduct
function is used for analytics. It must be included for each of the rendered products in the recommended zone.
Example code snippet for rendering product recommendations on an MPA.
- Add the following JavaScript and CSS to your website page. Add the code to the HTML in the HEAD tag to use the example renderer widget:
<link
rel="stylesheet" href="https://cdn-personalization-us- 1.goacoustic.com/acoustic/prod/utility/Renderer.css" type="text/css"/>
<script type="text/javascript" src="https://cdn-personalization-us-1.goacoustic.com/acoustic/prod/utility/Renderer.js"></script>
- Add the following code to the JavaScript file to show product recommendations. In the code snippets, replace the variable with the actual value of your variable. For example: replace
ZONE_REG_ID
with the value of the Zone ID from UI.
<script>
let init = (function () {
if (acoustic != undefined || acoustic != {}) {
const personalizationObject = acoustic.personalization.JsWRTP.create();
personalizationObject.onRecommendationsReady(() => {
const zoneId = "ZONE_REG_ID";
personalizationObject.getRecommendedProducts(zoneId, <<NUMBER_OF_PRODUCTS>>)
.then(<<RESPONSE>> => {
let zoneArea = personalizationObject.getZoneArea(zoneId);
if (zoneArea) {
if (<<RESPONSE>> !== 'PRNF404' && <<RESPONSE>>!== undefined) {
// Rendering logic
<<RESPONSE>>.forEach(function(data) {
// create the element dynamically to hold the product details here.
let element = document.createElement('div');
element.id = data.<<PRODUCT_ID>>;
element.classList.add("wrtp-slide-2fec40e4-091c-40ca-b1df-d45cf19144da", "wrtp-slide-2fec40e4-091c-40ca-b1df-d45cf19144da-" + ([i]));
element.onclick = () => {
// Add the function to track the product here.
personalizationObject.trackProduct(data.<<PRODUCT_ID>>,event);
// Add the redirection to product details page (if available in product object)
window.location.href = 'REDIRECT_TO_PRODUCT_DETAILS_PAGE';
};
// Add the product image here (if available in product object)
element.style.background = "url(" + <<LINK_TO_THE_IMAGE_SOURCE>>
+ ") 50% 50% / cover no-repeat";
zoneArea.append(element);
});
// Example widget to render the products (optional)
zoneArea.style.opacity = 1;
wrtpRenderer(zoneArea);
} else {
console.log("Error in getting the recommendations.");
}
} else {
console.log("Please add a valid element on HTML for displaying
the recommended products.");
}
});
})
} else {
console.log("Error in loading Personalization Library");
}
});
window.onload = init;
</script>
Configure product recommendations for Angular SPA using Personalization library version 1.5.0.
- Configure the zone on your Angular SPA to display product recommendations.
- In your channel, identify the Angular SPA component (YOUR_COMPONENT) to show product recommendations.
- Add the following code snippet to the JavaScript or TypeScript file of
YOUR_COMPONENT
.
import {OnInit} from '@angular/core';
import {map, catchError } from 'rxjs/operators';
import {NgPersonalization} from '@acoustic/personalization';
export class YOUR_COMPONENT implements OnInit {
let YOUR_VARIABLE ;
constructor(private personalizationService: NgPersonalization){
super();
}
ngOnInit() {
this.personalizationService.onRecommendationsReady(()=>{
//Repeat this code for each zone to display product recommendations
this.YOUR_VARIABLE = this.personalizationService.getRecommendedProducts('ZONE_REGISTRATION_ID',NUMBER_OF_PRODUCTS)
.pipe(
map(RESPONSE => {
if (RESPONSE !== "PRNF404") {
// Add code for rendering logic
} else {
// Add code to handle the error code
console.log("Personalization:", "recommendation not applied");
}
})
);//End of the code to be repeated for each zone
})
}
}
In the code snippet:
- Note that in this version, the
ngOnInit()
function introduces a new line of codethis.personalizationService.onRecommendationsReady(()=>
- Replace
NUMBER_OF_PRODUCTS
with the number of the recommended products that you want to display. For example:"10"
.
- Next, open the HTML file of your Angular SPA component (YOUR_COMPONENT). You may follow one of the following approaches.
Approach 1: Use this approach if your product list rendering is done using a component.
<div id="ZONE_REGISTRATION_ID " wrtp-recommended-zone ="ZONE_REGISTRATION_ID">
<h4>Title</h4>
<div *ngIf="(YOUR_VARIABLE | async) as alias_name; else elseBlock;">
<YOUR_NESTED_COMPONENT *ngIf="alias_name&&alias_name.length;" [YOUR_PROPERTY_BINDING_VARIABLE]="alias_name">
</YOUR_NESTED_COMPONENT>
</div>
<ng-template #elseBlock >No products found.</ng-template>
</div>
Approach 2:
Use this approach if the product list rendering is done inside the same zone of YOUR_COMPONENT
using the angular FOR
loop.
<div id="ZONE_REGISTRATION_ID" wrtp-recommended-zone="ZONE_REGISTRATION_ID">
<h4>Title</h4>
<div *ngIf="(YOUR_VARIABLE | async) as alias_name; else elseBlock;">
<div *ngFor="let item of alias_name">
<span (click)="trackProduct($event, item.id)">{{item.id}}</span>
</div>
</div>
<ng-template #elseBlock>No products found.</ng-template>
</div>
In both the approaches:
- You must include the wrtp-recommended-zone HTML attribute. Its value must be the same as the ZONE_REGISTRATION_ID.
- Use the
trackProduct($event, product.id)
function on the(click)
event for each iteration of product rendering on UI forYOUR_NESTED_COMPONENT
.
Updated almost 3 years ago