Bazaarvoice Personalized Recommendations uses historical analytics from the Bazaarvoice network shopper data to offer product and category recommendations.

At a high level, this solution offers a list of client-specific products based on the existence of a given user cookie. This provides you the ability to personalize product grids and carousels of recommended products to consumers by leveraging the power of the Bazaarvoice network shopper data.

Included in Bazaarvoice Personalized Recommendations is analytic tracking that captures a consumer’s habits and purchases. Bazaarvoice captures and presents these tracking results in the Personalization Data ROI Report.

Common use cases

The most common use for Personalized Recommendations is to display a list of product recommendations to a given user. You can create personalized product grids and carousels of recommended products using a combination of a consumer’s profile and Bazaarvoice network shopper data.

Personalized Recommendations

You can also use the Personalization Data SDK to return category data. You can use the returned personalization data with an existing personalization engine or another Bazaarvoice product.

The BV Personalization hosted carousel is a JavaScript implementation delivered by the BV loader and powered by BV Pixel. It is required on all pages on your site that include events you want to track (do not add them to cart pages).

At a high level, this service offers a list of client-specific products in response to a given consumer BVID and injects them into the BV hosted carousel.

BV Hosted Carousel

Complete the following steps to add a hosted carousel to your site to display product recommendations.

Step 1: Add the Personalization BV loader

The BV loader is a small, asynchronous JavaScript application that manages and displays configured features and CGC on your web pages. The BV loader will only download the required applications requested by a specific page.

To integrate the BV loader, add the following to your HTML in the <head> tag of the page:

<script async src="https://apps.bazaarvoice.com/deployments/<client_name>/<site_ID>/<environment>/<locale>/bv.js"></script>

In the <script> element, replace the following with your values:

  • <client_name>—The client name provided by Bazaarvoice. Be sure to use lowercase letters for this value.
  • <site_ID>—The ID of the deployment zone you want to use. This is set in the Bazaarvoice configuration hub within the Bazaarvoice Workbench. In this case, use a personalization deployment zone. The default deployment zone is main_site. Check with your Bazaarvoice representative to ensure the correct ID, or log in to the configuration hub to verify.
  • <environment>—The deployment environment where you want to implement Bazaarvoice features. For a production environment, include production in the path. If you are referencing a staging environment, include staging in the path.
  • <locale>—The locale used by the implementation. If you are not using US English (en_US), use the correct locale code.

Insert a div element that determines where the Personalized Recommendations carousel will display. For example:

<div data-bv-show="ProductRecommendations" data-bv-page-type="home" data-bv-slot="slot1"></div>

Configure the carousel with the following required attributes:

  • data-bv-show—Instructs the BV loader to display the Product Recommendations carousel.
  • data-bv-page-type—Denotes the page where you are implementing the hosted carousel.
  • data-bv-slot—Determines where Personalized Recommendations is being injected and provides analytics included in the Personalization Data ROI Report.

Full code example

The following example contains most of the code you must add to each page where you want to display a Personalized Recommendations hosted carousel. Only use this code as a reference; do not copy and paste this code without adding your company’s specific information. You must modify this code to support your implementation and place each code snippet in the appropriate location in each page’s HTML.

<html>
  <head>
    <script async src="https://apps.bazaarvoice.com/deployments/<client_name>/<site_ID>/personalization/<locale>/bv.js"></script>
  </head>
  <body>
    <div data-bv-show="ProductRecommendations" data-bv-page-type="home" data-bv-slot="slot1"></div>
  </body>
</html>

To access the Personalization Data ROI Report and to understand the value of your Personalization Data implementation, you will need to set up an A/B test. Using this experimental framework, you can compare site visitor groups’ behaviors to one another to accurately determine the impact of your Personalization Data implementation on revenue and transactions, among other metrics.

Tip: See this documentation for more information on Personalization A/B testing.

Implement A/B test code

When implementing the Personalization hosted carousel, you will need to add Bazaarvoice code to your control slice. You will need the BV loader and Recommendations <div> as well as a data-bv-hidden parameter. Adding the data-bv-hidden parameter will provide Bazaarvoice insight into customers who will not see BV recommendations.

Add the data-bv-hidden parameter to your hosted carousel div, like so:

<div data-bv-show="ProductRecommendations" data-bv-page-type="home" data-bv-slot="slot1" data-bv-hidden></div>

CSS overrides

If you choose to override the Bazaarvoice stylesheet for the hosted carousel, complete the following steps to customize the visual styling of the Recommendations display module with your own CSS.

In your HTML markup, add a link to your CSS:

<link rel="stylesheet" type="text/css" href="your-custom-styles.css" />

Use specificity to override Bazaarvoice carousel base styles if necessary.

Caution: Only advanced engineers should attempt to override the BV-hosted stylesheets. Bazaarvoice does not support stylesheet overrides, so you must thoroughly test your changes in a staging environment before moving them to production.

Personalization Data SDK

The Personalization Data SDK returns product and category data for use with your existing personalization service.

Product Recommendations

The Product Recommendations SDK offers a list of client-specific products in response to a given consumer BVID. This gives you the ability to personalize product grids and carousels of recommended products to consumers by leveraging the power of BV Network shopper data.

Product request configuration

Request-level data is a configuration passed to a recommendations request that affects the type of data received in the response by Bazaarvoice.

A product request looks like this:

bvAPI.getRecommendations({
  slot: 'slot1',
  pageType: 'home',
}).then(renderProducts).catch(recosError);

You can add the following properties:

Property Type Description Required?
slot string Identifies which slot this request is for. This value must match the value of data-bv-p13n-slot for the corresponding slot element. Required
pageType string

Identifies which type of page recommendations are being requested for. Accepted values are:

  • 'home'
  • 'category'
  • 'product'
  • 'cart'
  • 'thankyou'
Required
category string Passes in a category ID to scope the recommendations to a specific category. This is useful when displaying recommendations on a category page. Optional
limit number Restricts the maximum number of recommendations returned to this number. The default value is 10. Optional

Response data

The data returned from the getRecommendations call will be in this format:

{
  slot: (Element) the slot element,
  Recommendations: (Array <object>) array of recommended products
}

The array of products returned will contain an object with product data in this format:

{
  client: "(string) Client Name",
  product: "(String) BV Product ID",
  name: "(string) Product Name",
  image_url: "(string) Product Image URL", 
  product_page_url: "(string) Product Page URL"
  num_reviews: 1 // (number) Number of Reviews, 
  avg_rating: 5.0 // (number) Average Star Rating
}

Add Product Recommendations SDK code to your website

Complete the following steps to add the Product Recommendations SDK code to your site.

Step 1: Add the Personalization BV loader

The BV loader is a small, asynchronous JavaScript application that manages and displays configured features and CGC on your web pages. The BV loader will only download the required applications requested on the specific page.

To integrate the BV loader, add the following to your HTML within the <head> tag of the page:

<script async src="https://apps.bazaarvoice.com/deployments/<client_name>/personalization/<environment>/<locale>/bv.js"></script>

In the <script> element, replace the following with your values:

  • <client_name>—The client name provided by Bazaarvoice. Be sure to use lowercase letters for the value.
  • <site_ID>—The ID of the deployment zone you want to use. This is set in the Bazaarvoice configuration hub within the Bazaarvoice Workbench. In this case, use a personalization deployment zone. The default deployment zone is main_site. Check with your Bazaarvoice representative to ensure the correct ID, or log in to the configuration hub to verify.
  • <environment>—The deployment environment where you want to implement Bazaarvoice features. For a production environment, include production in the path. If you are referencing a staging environment, include staging in the path.
  • <locale>—The locale used by the implementation. If you are not using US English (en_US), use the correct locale code.

Step 2: Add getRecommendations script code

Add the getRecommedations script in your HTML <body>.

<script>
  (function () {
    // Define global callback to be triggered when BV is available. 
    window.bvCallback = function (BV) {
      BV.api.ready().then(bvAPIReady).catch(recosError); 
    };            

    // This basic example uses the SDK to request product recommendations, then renders the product images in order.
    function bvAPIReady (bvAPI) {         
      bvAPI.getRecommendations({ 
        slot: 'slot1',            
        pageType: 'home' 
      }).then(renderProducts).catch(recosError);            
    }

    function renderProducts (result) {
      const recos = result.recommendations; 
      const slot = result.slot; 
      recos.forEach(function (recommendation) {
        const img = document.createElement('img');
        img.src = recommendation.image_url;
        img.setAttribute('data-bv-product-id', recommendation.product); 
        slot.appendChild(img);``
    }); 
    }         

    function recosError (err) { 
      console.error(err);           
    }
  })();
</script>

Step 3: Add the Personalization slot <div>

Insert a <div> element that determines where the Personalized Recommendation data will be injected. This will provide analytics included in the Personalization Data ROI Report. If you’re using a third-party recommendations carousel, the slot ID needs to be added to the outer carousel <div>.

For example:

<div data-bv-p13n-slot="slotID"></div>

Note: The slotID in the Personalization <div> and the slotID in the getRecommendations script must match.

Full code example

The following example contains most of the code you must add to each page on which you want to display product recommendations using the Personalization SDK. Only use this code as a reference; do not copy and paste this code without adding your company’s specific information. You must modify this code to support your implementation and place each code snippet in the appropriate location in each page’s HTML.

<html>
  <head>
    <script src=”https://apps.bazaarvoice.com/deployments/client_name/personalization/production/en_US/bv.js async> 
    </script>
  </head>
  <body>
    <script>
      (function () {
        // Define global callback to be triggered when BV is available. 
        window.bvCallback = function (BV) {
          BV.api.ready().then(bvAPIReady).catch(recosError); 
        };            

        // This basic example uses the SDK to request product recommendations, then renders the product images in order.
        function bvAPIReady (bvAPI) {         
          bvAPI.getRecommendations({ 
            slot: 'slot1',            
            pageType: 'home' 
          }).then(renderProducts).catch(recosError);            
        }

        function renderProducts (result) {
          const recos = result.recommendations; 
          const slot = result.slot; 
          recos.forEach(function (recommendation) {
            const img = document.createElement('img');
            img.src = recommendation.image_url;
            img.setAttribute('data-bv-product-id', recommendation.product); 
            slot.appendChild(img);``
          }); 
        }         

        function recosError (err) { 
          console.error(err);           
        }
      })();
    </script>

    <!-- Define a recommendations "slot" around any unique section of the page using recommendations. -->
    <div data-bv-p13n-slot="slot1"></div> 
  </body>
</html>

Category Recommendations

The Category Recommendations API is very similar to the Product Recommendations API, but it’s focused on returning the higher level category interests of a shopper, such as Apparel or Electronics. These category recommendations can be read by personalization engines and used to customize the shopping experience for each individual shopper.

Category request configuration

Request-level data is a configuration passed to a recommendations request that affects the type of data received in the response by Bazaarvoice.

A category request looks like this:

bvAPI.getRecommendations({
  slot: 'slot1',
  type: 'category',
  pageType: 'home'
}).then(renderProducts).catch(recosError);

You can add the following properties:

Property Type Description Required?
slot string Identifies which slot this request is for. The value here must match the value of data-bv-p13n-slot for the corresponding slot element. Required
type string

Identifies the type of recommendations are being requested for. For Category Recommendations, this string should always be 'category'.

Required
pageType string

Identifies which type of page recommendations are being requested for. Accepted values are:

  • 'home'
  • 'category'
  • 'product'
  • 'cart'
  • 'thankyou'
Required
limit number Restricts the maximum number of recommendations returned to this number. Default is 10. Optional

Response data

The data returned from the getRecommendations call will be

{
  slot: (Element) the slot element,
  Recommendations: (Array <string>) array of recommended categories
}

The array of categories returned will contain an object with category data in this format:

{
  client: "(String) Client Name",
  category: "(String) BV Category ID",
  name: "(string) Category Name",
  url: "(string) Category Page URL"
}

Add Category Recommendations SDK code to your website

Complete the following steps to add the Category Recommendations SDK code to your site.

Step 1: Add the Personalization BV loader

The BV loader is a small, asynchronous JavaScript application that manages and displays configured features and CGC on your web pages. The BV loader will only download the required applications requested on the specific page.

To integrate the BV loader, add the following to your HTML within the <head> tag of the page:

<script async src="https://apps.bazaarvoice.com/deployments/<client_name>/<site_ID>/<environment>/<locale>/bv.js"></script>

In the <script> element, replace the following with your values:

  • <client_name>—The client name provided by Bazaarvoice. Be sure to use lowercase letters for the value.
  • <site_ID>—The ID of the deployment zone you want to use. This is set in the Bazaarvoice configuration hub within the Bazaarvoice Workbench. In this case, use a personalization deployment zone. The default deployment zone is main_site. Check with your Bazaarvoice representative to ensure the correct ID, or log in to the configuration hub to verify.
  • <environment>—The deployment environment where you want to implement Bazaarvoice features. For a production environment, include production in the path. If you are referencing a staging environment, include staging in the path.
  • <locale>—The locale used by the implementation. If you are not using US English (en_US), use the correct locale code.

Step 2: Add getRecommendations script code

<script>
  (function () {
    // Define global callback to be triggered when BV is available. 
    window.bvCallback = function (BV) {
      BV.api.ready().then(bvAPIReady).catch(recosError); 
    };            

    // This basic example uses the SDK to request category recommendations
    function bvAPIReady (bvAPI) {         
      bvAPI.getRecommendations({ 
        type: 'category',
        slot: 'slot1',            
        pageType: 'home' 
      }).then(renderCategories).catch(recosError);            
    }

    function renderCategories (result) {
      const recos = result.recommendations; 
      recos.forEach(function (recommendation) {
        console.log(recommendation);          
      }); 
    }         

    function recosError (err) { 
      console.error(err);           
    }
  })();
</script>

Step 3: Add the Personalization slot <div>

Insert a <div> element that determines where the Personalized Recommendation data will be injected. This will provide analytics included in the Personalization Data ROI Report. If you’re using a third-party recommendations carousel, the slot ID needs to be added to the outer carousel <div>.

For example:

<div data-bv-p13n-slot="slotID"></div>

Note: The slotID in the Personalization <div> and the slotID in the getRecommendations script must match.

Full code example

The following example contains most of the code you must add to each page on which you want to display category recommendations using the Personalization SDK. Only use this code as a reference; do not copy and paste this code without adding your company’s specific information. You must modify this code to support your implementation and place each code snippet in the appropriate location in each page’s HTML.

<html>
  <head>
    <script src=”https://apps.bazaarvoice.com/deployments/client_name/personalization/production/en_US/bv.js async> 
    </script>
  </head>
  <body>
    <script>
      (function () {
        // Define global callback to be triggered when BV is available. 
        window.bvCallback = function (BV) {
          BV.api.ready().then(bvAPIReady).catch(recosError); 
        };

        // This basic example uses the SDK to request category recommendations.
        function bvAPIReady (bvAPI) {         
          bvAPI.getRecommendations({ 
            type: 'category',
            slot: 'slot1',            
            pageType: 'home' 
          }).then(renderCategories).catch(recosError);            
        }

        function renderCategories (result) {
          const recos = result.recommendations; 
          recos.forEach(function (recommendation) {
            console.log(recommendation);          
          });
        }         

        function recosError (err) { 
          console.error(err);           
        }
      })();
    </script>
    <!-- Define a recommendations "slot" around any unique section of the page using recommendations. -->
    <div data-bv-p13n-slot="slot1"></div> 
  </body>
</html>

Error codes

If you have incorrectly configured the code, the console may return one of these error codes returned in the console:

Value Description
Unable to locate Personalization Slot The slot parameter was not found in your HTML
Uncaught Bazaarvoice is not configured for the domain The domain where the code is executing is not whitelisted