Render product recommendations

2 min

You can render product recommendations returned in the response in different ways, depending on your website/ecommerce platform. You may implement rendering in one of two ways.

Writing server-side code that injects JSON data to a recommendation template.

Generating client-side JavaScript code on the relevant page templates, which loops through the recs array returned in the JSON response and renders the values.

By default, all recommendations included in the response are rendered. To render a subset of returned recommendations based on page logic, include the optional markRecsAsShown property (in the smartRecs section) of the request with a value of false. See example below.

{ 
      "type"        : "product",
      "ip"          : "10.42.37.139",
      "session"     : "123456789012|a1b2c3d4e5A6B7C8D9E0f1g2h3i4j5F1G2H3I4J5k1l",
      "cuid"        : "09876543210|Z0Y9X8W7V6z5y4x3w2v1U0T9S8R7Q6u5t4s3r2q1P0O", 
      "site"        : "retailer",
      "clientToken" : "1234abcd5678",
      "channel"     : "web",
      "lang"        : "en-gb",
      "currentURI"  : "www.retailer.com/product/RC456.html",
      "previousURI" : "www.retailer.com/product/RC123.html",
      "userAgent"   : "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36",
      "product"     : { "refCode" : "RC456" },
      "smartRecs"   : { "markRecsAsShown" : "false" }
    }

After the markRecsAsShown flag is set to false, recommendations in the response are not tracked as viewed by the Optimizely service. In other words, although the response includes recommendations, the Optimizely service assumes that they were not rendered on the front end of your site or application.

To provide Optimizely with information about which recommendations are rendered and which are excluded, make an API call from the server or via AJAX from the page.

Note All parameters in GET requests must be URL-encoded.

For example, a response contains three recommendations with IDs of 32720906612, 32720906613, and 32720906614. Your page or server logic skips the first recommendation but renders the second and third recommendations (that is, IDs 32720906613 and 32720906614). In this case, the Server-to-Server API call looks like the following:

https://BaseApiUrl/tracker/api/v1_4/site/rec/shown.pagex?ids=32720906613,32720906614&sessionid=1234abcd5678&cuid=09876543210|{...}

For information about the smartRecs attribute, see Product Recommendations response.