Product recommendations for MPA using Library v1.5.0

Steps to configure product recommendations for Multi-Page Application (MPA) channels.

As a best practice, it is recommended that the code updates are validated in a non-Production environment before pushing those to the Production website.

Prerequisites

Ensure that you are using Personalization Library version 1.5.0.

Procedure

1. In your MPA channel, configure the zone on which you want to display product recommendations.
2. Register the zone in Acoustic Personalization. Make a note of the Zone Registration Id (ZONE_REG_ID) from the Personalization UI.
3. 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, and its value must be the same as the ZONE_REG_ID.
4. Add the following code snippet to the JavaScript file of your MPA on which you want to show product recommendations.
If you are using multiple code snippets (for example, personalization snippet, product recommendation snippet and Google Analytics events snippet), you should include them in the same window.onload = init function.

<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.)
• PRNF404 is the error code if there are no recommendations or error 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 the RESPONSE/product object, and you can rename it as required.
• The trackProduct function is used for analytics and must be included for each of the rendered products in the recommended zone.