Configure a Recommendations Action

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

Adding a Recommendations Action to an Experience

Follow these steps to add a recommendations action 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 Recommendation 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 options shown here may not reflect the options that appear in your account.

   

6. Determine where on the page of your site you want the recommendations action to appear.
   1. Input the element selector in the Insert Selector field to define where on the page the recommendations action should appear. See Element Selectors for more information about how to use this field.

      

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

      

   3. Select RecheckForElement if you want Monetate to recheck for the selected node for up to 3 seconds if it doesn't find it immediately. Select SelectMultipleElements 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 recommendation strategy settings.
   1. Select the recommendation strategy you want the action to use.

      

   2. Select a backup recommendation strategy from Fallback Recommendation Strategy that you want used to supplement the strategy you selected in the previous step if it can't display enough recommended products to meet the minimum.

      

   3. Enter the minimum number of products the primary recommendation strategy must display before the action triggers the fallback recommendation strategy.

      Setting the minimum to zero prevents the fallback recommendation strategy 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.

      

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

      

8. Configure the recommendation slider's content.
   1. Enter into Pinned Products the product IDs for any products that you want to always appear at the beginning of the recommendations.

      If you select a recommendation strategy that uses a collaborative recommendation algorithm with recommended items based on Item group ID(s) in custom variable and with Pin products in custom variable to front of recommendation results selected, those products appear after any pinned products configured in a recommendations action.

      

   2. Enter the maximum number of products you want to appear in the slider.

      

   3. Select the movement of product images in the slider:
      • Horizontal - Left to Right
      • Horizontal - Right to Left
      • Vertical

      

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 Template to build the product slides. See Modifying the Slide 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 Slides Visible code editor. See Modifying the Slides Visible 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. 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.

    

15. Click CREATE.
16. 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 Template

You can modify the slide 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 Slides Visible Template

You can use a variety of JSON code snippets to modify the Slides Visible 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.