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.

    Callouts of the WHAT settings and the ADD ACTION button

  4. Click Product Recommendations on the Action Type panel.

    Callout of the Product Recommendations option 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.

    Example of the Product Recommendations panel in the WHAT configuration

  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.

      Callout of the Insert Selector field of a recommendations slider action template

    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.

      Callout of the Insert Method selector of a recommendations slider action template

    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.

      Callout of the 'Recheck For Element' and 'Select Multiple Elements' options of a recommendations slider action template

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

      Callout of the Product Recommendation selector of a recommendations slider action template

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

      Callout of the Primary Fallback recommendation strategy selector of a recommendations slider action template

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

      Callout of the Secondary Fallback recommendation strategy selector of a recommendations slider action template

    4. Enter the minimum number of products that the recommendation strategy 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.

      Callout of the 'Minimum products returned' field of a recommendations slider action template

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

      Callout of the 'Maximum products returned' field of a recommendations slider action template

  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.

      Callout of the Pinned Products field of a recommendations slider action template

    2. 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 recommendation strategies that you selected in steps 7a, 7b, and 7c.

      Callout of the 'Remove duplicate products based on' selector of a recommendations slider action template

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

      Callout of the 'Maximum Number of Items' field of a recommendations slider action template

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

      Callout of the Orientation selector of a recommendations slider action template

  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.

    Callout of the Slider Container Template code editor and the SELECT DYNAMIC TEXT selector of a recommendations slider action template

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

    Example of the Slide Template code editor of a recommendations slider action template

  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.

    Callout of the 'CHOOSE SAVED CSS' and 'UPLOAD CSS buttons' atop the CSS code editor of a recommendations slider action template

  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.

    Example of the Slides Visible code editor of a recommendations slider action template

  13. 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.

    Example of the JavaScript editor of a recommendations slider action template

  14. 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.

    Callout of the CHOOSE EXISTING, GENERATE IMAGE, and UPLOAD buttons for the 'Previous Button Creative' field and the 'Next Button Creative' field of a recommendations slider action template

  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.

    The action conditions attribute categories accessible from the ADD CONDITION selector of a recommendations slider action template

  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 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.

If you want to use custom attributes from your product catalogs to modify slide templates, then contact your dedicated Customer Success Manager so that Development Services can perform the backend work required for the recommendations action to support those custom attributes.

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

Only use the dots-page value if the value of slideIncrement is page.

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.