Configure a Recommendations Action

Recommendations actions allow you to offer recommendations to your customers in a slideshow or slider across any channel.

Follow these steps to add a recommendations action that uses a single recommendation strategy or a slotted recommendation compound strategy to an experience.

1. Create a new Web experience.
2. Configure the WHY and WHO settings.
3. Click WHAT and then click ADD ACTION.

   

4. Click Product Recommendations on the Action Type panel.

   

5. Click the type of recommendations action that you want to use. If you select an action that includes slotting, refer to Configure a Recommendations Action with Slotting for the appropriate steps for that action type.

   The recommendations action templates shown here may not reflect the options that appear in your account. Furthermore, the templates in your account may not include configuration specifics shown.

   

6. Determine where on the page of your site you want the recommendations action to appear.
   1. Input the element selector identifying where on the page the recommendations action should appear. See Element Selectors for more information.

      

   2. Select an option from Insert Method to determine where the action should be inserted relative to the element selector you input in the previous step.

      

   3. Toggle RecheckForElement to NO if you do not want Monetate to recheck for the selected node for up to 3 seconds if it doesn't find it immediately. Toggle SelectMultipleElements to YES if you want Monetate to display the recommendations at every occurrence of the selected node on the page if it finds multiple occurrences.

      

7. Configure the Product Recommendations settings.
   1. Select from Product Recommendation the recommendation strategy or slotted recommendation that you want the action to use.

      

   2. Select from Primary Fallback the recommendation strategy that you want used first to supplement the strategy or slotted recommendation that you selected in the previous step if it can't display enough recommended products to meet the minimum.

      Slotted recommendations are ineligible for use as a fallback.

      

   3. Select from Secondary Fallback the recommendation strategy that you want used if your selections in steps 7a and 7b can't display enough recommended products to meet the minimum.

      

   4. Enter the minimum number of products that the recommendation strategy or slotted recommendation that you selected in step 7a must display before the action triggers the primary fallback recommendation strategy.

      Setting the minimum to zero prevents the fallback strategies from rendering and thus causes the action to fire in all scenarios, even if no products are recommended. This situation can also result in customers being counted in the experience without seeing recommendations.

      If in step 7a you selected a recommendation strategy with Prepend context item in recommendation enabled or selected a slotted recommendation configured with at least one recommendation strategy that has Prepend context item in recommendation enabled, then the context item counts toward meeting the threshold you set in Minimum products returned.

      

   5. Enter the maximum number of products to include in the recommendations results.

      If in step 7a you selected a recommendation strategy with Prepend context item in recommendation enabled or selected a slotted recommendation configured with at least one recommendation strategy that has Prepend context item in recommendation enabled, then the context item counts toward meeting the threshold you set in Maximum products returned.

      

8. Configure the recommendation slider's content.
   1. Optionally, enter into Pinned products the value of the id attribute for each product that you want to always appear at the beginning of the recommendations results.

      Pinned products are not subject to any recommendation filters configured in the selected recommendation strategies or to the recommendation filters configured on the Global Settings tab of the Product Recommendations page.

      If you enter product IDs into Pinned products and if in step 7a you selected a recommendation strategy with Prepend context item in recommendation enabled, then the products identified at the action level appear before the context product in the recommendations results.

      If in step 7a you selected a slotted recommendation, then see Pinned Products and Slotted Recommendations to understand how that configuration impacts the order of displayed recommendations.

      

   2. Optionally, select a product catalog attribute on which duplicate recommended products are removed from the results.

      Ensure that the attribute that you select appears in the product catalogs used in the recommendations sources that you selected in steps 7a, 7b, and 7c.

      

   3. Select the movement of product images in the recommendations slider.

      

9. Optionally, modify the HTML template in Slider Container Template to build the slider structure.
   • To add slide navigation buttons, use the attributes data-prev-button and data-next-button. If you include optional arrow images, you must include elements with the attribute data-prev-button and data-next-button for them to appear.
   • To add location-related dynamic text, select an option from SELECT DYNAMIC TEXT, and then paste the code snippet into the code editor.

   

10. Optionally, modify the HTML template in Slide Product Template to build the product slides. See Modifying the Slide Product Template for more information.

    

11. Optionally, revise the CSS that is appended to the DOM in a <style> or <link> element, or click CHOOSE SAVED CSS or UPLOAD CSS to insert code into the editor.

    Use the placeholder #MONETATE-ID as the selector for the action's wrapper ID.

    

12. Configure the visibility options for the recommendations in the Visible Slides code editor. See Modifying the Visible Slides Template in this documentation for more information.

    

13. Optionally, add image files to be used for the slider navigation buttons by clicking CHOOSE EXISTING, GENERATE IMAGE, or UPLOAD for the Previous Button Creative field and the Next Button Creative field, respectively.

    

14. Optionally, configure the action with JavaScript.

    You must contact your dedicated Customer Success Manager (CSM) and request that the action template that includes the JavaScript editor be added to your account.

    

15. Click ADD CONDITION, select an attribute category, and then select and configure an option to set any conditions that must be met for the action to fire. See Action Conditions for more information.

    

16. Click CREATE.
17. Configure or modify the WHEN settings for the experience.

Ensure that you preview the experience before you activate it to ensure it works as you expect.

Modifying the Slide Product Template

You can modify the slide product template using placeholders that contain valid values, such as {{price}}. In addition to price, possible placeholder values include all product catalog attributes, including title, id, itemGroupId, salePrice, link, and imageLink.

You can also modify the slide template with these code snippets:

• truncate — Sets the maximum number of characters of the returned data that appear before the rest is truncated (for example, {{title|truncate: 20}})
• priceFormat — Formats a price based on a template of 1,000; supports currency symbols before or after the price, comma separators, and infinite decimal places to accommodate such prices points as EUR 1.000,00 (for example, {{price|priceFormat: $1,000.00}})
• appendParam — Adds parameters to a URL; added with a question mark (?) if the URL has no existing parameters or added with an ampersand (&) after the URL's existing parameters (for example, {{link|appendParam: source=monetate}} and {{link|appendParam: source=monetate&experience=intelligentRecommendations}})

Modifying the Visible Slides Template

You can use a variety of JSON code snippets to modify the Visible Slides template, which determines various factors for the movement of slides within the slider.

Use the autoRotateDuration snippet to determine how long the slider pauses in milliseconds before automatically advancing to the next slide display. The default value is 0, which disables autorotation.

The breakpoints snippet determines the breakpoints and how many slides are visible or partially visible. Consider this example:

{
  "breakpoints": { 
    "Infinity": { 
      "visible": 5 
  }, 
  "768": { 
    "visible": 3 
  }, 
  "414": { 
    "peekLeft": 0.5, 
    "visible": 1, 
    "peekRight": 0.5 
  } 
}

This code results in the following behavior:

• When displayed on a screen up to 414 pixels wide, one full slide appears with half a slide to the left and to the right of it "peeking"
• When displayed on a screen sizes 414–768 pixels, three full slides appear
• When displayed on a screen 768 pixels wide or greater (established by Infinity), five full slides appear

Use gridSize to enable a grid layout. The default value is 1. For example, a value of 3 sets three rows for a horizontal slider or three columns for a vertical slider.

The infiniteSlide snippet determines if the slider scrolls infinitely or stops at the end. The default value is false.

The pagination snippet determines if page navigation buttons appear. The value options are as follows:

• none — No pagination appears; default setting
• dots — Displays a single dot for each slide
• dots-page — Displays a dot for each page of slides (for example, three dots appear in a slider with 18 total slides that appear six slides to a page)
• thumbnails — Creates a thumbnail version of each slide

Use pauseOnHover to determine if the slider pauses autorotation on slide hover if autoRotateDuration is set. The default value is false.

The slideIncrement snippet determines if the slider transitions by page or by single slide. The value options are as follows:

• page — Slider transitions by page of slides; default setting
• single — Slider transitions one single slide at a time

Use stopOnInteraction to determine if the slider stops autorotating when the customer interacts with it if autoRotateDuration is set. The default value is false.

Use transitionAnimation to set the animation style for transitioning between slides. The value options are as follows:

• push — A slide moves in from the side for a horizontal slider and from the bottom for a vertical slider; default setting
• fade — The current slide fades out and the new one fades in
• none — No animation is used

Use transitionDuration to determine how long the slide transition animation lasts in milliseconds. The default value is 250.