Configure Recommendations Web for a Single Page App

You can implement Recommendations Web on a site built as a Single Page App (SPA), but it requires a little more planning and a few more steps.

About this task

With SPA sites, managing the life cycle of the Recommendations Web performance is the key to it functioning properly on the site. Code and data must load in the correct order for the solution to render properly on each page.

Specifically, when the site is initially loaded (or the browser is manually refreshed by the site visitor) AND after every subsequent dynamic reload of a page, the following steps must occur in this EXACT order:

Procedure

  1. Insert the Bronto-specific div tags on the page. Recommendation results are automatically rendered into HTML and appended to these div tags.
  2. On all product pages, insert the Product ID value into the JS or CSS variable you have configured within Bronto.
  3. Insert the page identifier value into the brontoIdentifier JS variable , if applicable. You do not need to do this if the URL is being used to identify the page.
  4. Set the page's URL. You do not need to do this if the brontoIdentifier is being used to identify the page.
    Note: Steps 1-4 can occur in any order.
  5. Load the Script Manager JavaScript Snippet . This snippet will run all required scripts to produce recommendations on the page.
  6. Call the setReferenceProducts or setReferenceJsonProducts function call, if applicable. This is needed if the recommendations for the page require reference products other than the page's product ID.
  7. Call the setParameter function call, if applicable. This is needed if the recommendations for the page require Request Time Criteria values.
    Note: Steps 6 and 7 can occur in any order after step 5.
  8. When the site initially loads (or the browser is manually refreshed by the site visitor), call the Render function to initiate the recommendation execution process.
  9. When a site visitor triggers a new page load, call the changeIdentifier function. 
    <script type="text/javascript">
  bronto("webRecs:changeIdentifier");
</script>
    This reruns the entire recommendations execution process including gathering new data points.