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 the RESPONSE/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 code this.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&amp;&amp;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 for YOUR_NESTED_COMPONENT.