Content rendering examples based on content types
Here are some examples and code samples for rendering your personalized content based on the content type.
🦉
Render your personalized content based on the content type
Open Recipe
Important
Rendering of the personalized content returned by Acoustic Personalization is the responsibility of the channel developer. The code snippets are provided for guidance and illustration purpose only and may require modifications as per your channel.
Example code
The following code snippet provides an example of how to render product recommendations.
Add the following code snippet either in HEAD or BODY of the HTML page that has the zones to be personalized.
/**
* Step 1- Add a script tag
*/
<script type="text/javascript">
/**
* Step 2- Initialize Personalization Library
*/
var init = (function () {
/**
* Step 3- check that Library is loaded successfully
*/
if (acoustic != undefined || acoustic != {}) {
/**
* Step 4- Create the personalization object
*/
var personalizationObject = acoustic.personalization.PersonalizationLibrary.create();
/**
* Step 5- Create DOM Element validator for zones
*/
var validateDOMElement = function (outlet) {
var outletDiv = document.getElementById(outlet);
if (!(outletDiv instanceof Node)) {
console.log(outlet, " is not a valid HTML element.");
return null;
}
return outletDiv;
};
/**
* Define the Helper functions to be used in Step 6
*/
var displayDefaultContent = function (result, targetArea) {
/**
* In this snippet, the provide the URL to fetch default content
* Default content is the content to show in case of no personalization
*/
var defaultContent = '<<LINK_TO_THE_DEFAULT_CONTENT.JPG>>';
targetArea.style.background = "url(" + defaultContent + ") 0px 0px / cover no-repeat";
targetArea.style.opacity = 1;
}
var displayCustomUrl = function (content, targetArea) {
var contentId = content.value
if (contentId && contentId !== 'CONNF404' && targetArea) {
/**
* In this snippet, the provide the URL to fetch personalized content
*/
targetArea.style.background = "url(" + contentId + ") 0px 0px / cover no-repeat";
targetArea.style.opacity = 1;
} else {
displayDefaultContent(content, targetArea);
}
}
var displayWchUrl = function (content, targetArea) {
var contentId = content.value
if (contentId && contentId !== 'CONNF404' && targetArea) {
/**
* Display the personalized content
*/
targetArea.style.opacity = 1;
} else {
displayDefaultContent(content, targetArea);
}
}
var displayCustomHtml = function (content, targetArea) {
var contentId = content.value
if (contentId && contentId !== 'CONNF404' && targetArea) {
/**
* Display the personalized content
*/
targetArea.innerHTML = contentId;
targetArea.style.opacity = 1;
} else {
displayDefaultContent(content, targetArea);
}
}
var displayWchHtml = function (content, targetArea) {
var contentId = content.value
if (contentId && contentId !== 'CONNF404' && targetArea) {
/**
* Display the personalized content
*/
targetArea.style.opacity = 1;
} else {
displayDefaultContent(content, targetArea);
}
}
var displayRecommendations = function (products, targetArea) {
var recommendations = products.value;
if (recommendations && recommendations !== 'CONNF404' && targetArea) {
/**
* Display the personalized recommendations
*/
console.log('Display the personalized recommendations');
recommendations.length && recommendations.forEach(function(data) {
/**
* create the element dynamically to hold the product details here.
*/
var 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.collectBehavior(data.<<PRODUCT_ID>>,event);
/**
* Add the redirection to product details page (if available in product object)
*/
window.location.href = '<<REDIRECT_TO_PRODUCT_DETAILS_PAGE.html>>';
};
/**
* Add the product image here (if available in product object)
*/
element.style.background = "url(" + <<LINK_TO_THE_IMAGE_SOURCE.JPG>> + ") 50% 50% / cover no-repeat";
zoneArea.append(element);
});
/**
* example widget to render the products
* required: Renderer.css & Renderer.js
*/
domOutlet.style.opacity = 1;
wrtpRenderer(domOutlet);
} else {
/**
* Display the default recommendations
*/
displayDefaultContent(products, targetArea);
}
}
/**
* Step 6 - Add handler to process the results
* Define the Helper function by the type
*/
function personalizationHandler(result, targetArea) {
switch(result.type) {
case "recommendation":
displayRecommendations(result, targetArea);
break;
case "custom-url":
displayCustomUrl(result, targetArea);
break;
case "custom-html":
displayCustomHtml(result, targetArea);
break;
case "wch-url":
displayWchUrl(result, targetArea);
break;
case "wch-html":
displayWchHtml(result, targetArea);
break;
case "":
displayDefaultContent(result, targetArea);
break;
}
}
/**
* Step 7- Add the callback function
*/
personalizationObject.onReady(() => {
/**
* Step 8- Configure personalization zones
*/
var zones = [
{
"zoneId": "<<ZONE_REGISTRATION_ID>>",
"targetArea": "<<TARGET_ID>>",
"num": "<<NO_OF_PRODUCTS_REQUIRED>>"
}
];
zones.forEach(function(zoneObj) {
var validElement = validateDOMElement(zoneObj.targetArea)
if(validElement) {
personalizationObject.getContent(zoneObj)
.then((result) => {
personalizationHandler(result, validElement)
});
personalizationObject.collectBehavior("<<ZONE_ID>>", "click", "<<TARGET_HTML_ELEMENT>>");
}
});
});
} else {
console.log("Error in loading the Personalization library.");
}
});
</script>
Updated almost 2 years ago