Configure an Omnichannel Product Badging Action

Monetate's Omnichannel product badging action allows Engine API clients to apply some treatment to specific items on product listing pages to draw site visitors' attention to those items to foster engagement. For example, this screenshot shows a product badge advertising a discount on certain items on the mobile view of a product listing page.

A product list page for backpacks as seen on an iPhone. Some of the product thumbnails have a green badge with the words 'SAVE WITH SAVE15.'

Configuring the Action

Follow these steps to configure an image-based product badging action displayed on a product list page for an Omnichannel experience.

Your app is responsible for creating the container for the badge image as well as for any CSS or other styling for it.

  1. Create a new Omnichannel experience, and then configure the WHY and WHO settings.
  2. Click WHAT and then click ADD ACTION.

    Callout of the WHAT settings and of the ADD ACTION button

  3. Click Badges.

    Callout of the Badges option on the Action Type panel of the WHAT settings

  4. Click the Omnichannel badging action template that you want to use.

    Template names may vary.

    Example of the Omnichannel Badges action template options

  5. Add the badge image by one of three methods:
    • Click CHOOSE to select an image file in Content Manager.
    • Click UPLOAD to navigate to an image file stored outside the platform and then upload it to Content Manager.
    • Click GENERATE to create a placeholder that you later replace.

    Callout of the CHOOSE button, the UPLOAD button, and the GENERATE button on the 'Omni Image Badging' action template

  6. Take any of these optional actions after the image creative appears:
    • Click EDIT to modify the image in Content Builder.
    • Type into Link URL a hyperlink to which the customer is taken after clicking the badge.
    • Type into Title Text a description of the image to appear as a tooltip when the customer's cursor hovers over the image.
    • Type into Alt Text a description of the image that can be read aloud by screen readers used by visitors who are blind or visually impaired.

    Callout of the EDIT button, the Link URL field, the Title Text field, and the Alt Text field on the 'Omni Image Badging' action template

  7. Optionally, input into Badge positioning a string that helps your app determine where the image should be positioned on the page.

    Callout of the 'Badge positioning' field on the 'Omni Image Badging' action template

  8. Optionally, input into Application Data any JSON-formatted additional data or configuration information that you want to pass to your app.

    Callout of the Application Data JSON code editor on the 'Omni Image Badging' action template

  9. Create an action condition that identifies on which products you want the badge to appear.
    1. Click ADD CONDITION, expand Product Thumbnail, and then select an option from that category.

      The Action Condition selector on the 'Omni Image Badging' action template, with the Product Thumbnail category expanded

    2. Complete the action condition equation by inputting the necessary product IDs.

      Product IDs must match across the product catalog and the Engine API request.

      A 'Thumbnail's product ID equals' action condition, with a field to input product IDs, on the 'Omni Image Badging' action template

  10. As necessary, create additional action conditions. See Using Action Conditions for more information on which action conditions are available for a product badging action targeting a product list page.
  11. Click CREATE.

    Callout of the CREATE button on the 'Omni Image Badging' action template

In addition to configuring the WHAT action, you must also configure the appropriate request to the Engine API. See Configuring the Engine API Request in this documentation for more information.

Using Action Conditions

You can use action conditions to specify the exact pages or products on which the badging action should fire. All standard action conditions, such as page type, page category, time, and cart value, can be used with badging actions.

The Development Services team may include certain built-in action conditions, such as a Page type condition so that the badging action targets product list pages. If this is the case and you determine you want the badging action to fire on other pages, contact your dedicated Customer Success Manager or submit a support ticket using the Monetate Technical Support portal (support.monetate.com) for assistance updating the action.

You can also use badging-specific conditions to specifically target products by either product ID (PID) or SKU, or you can use the brand or product type as defined in the product catalog.

You can use these conditions with a badging action for a product listing page:

  • Thumbnail's product ID =
  • Thumbnail's product ID ≠
  • Thumbnail's product ID in custom list
  • Thumbnail's product ID ≠ in custom list
  • Thumbnail's product SKU =
  • Thumbnail's product SKU ≠
  • Thumbnail's product type (New Catalog Spec) starts with
  • Thumbnail's product type (New Catalog Spec) doesn't start with
  • Thumbnail's brand (New Catalog Spec) =
  • Thumbnail's brand (New Catalog Spec) ≠

When you begin typing a PID or SKU into the text field for the action condition you are building, a type-ahead feature displays partially matching values that exist in the product catalog. If your site has products that match the input but are not in the product catalog, then the type-ahead feature does not show them.

Configuring the Engine API Request

Engine API clients must ensure that the request specifies that the product badge appears on product list pages.

Here is an example of an Engine API request targeting product list pages.

{
  "channel": "a-701b337c/p/localhost.org",
  "deviceId": "123456",
  "events": [
    {
      "eventType": "monetate:decision:DecisionRequest",
      "requestId": "sample-unique-request-id-ABC-123",
      "includeReporting": false
    },
    {
      "eventType": "monetate:context:ProductThumbnailView",
      "products": [
        "BackP_008",
        "Tent_004",
        "HikePants_012",
        "SleepBag_004",
        "Tent_003",
        "SleepBag_001"
      ]
    }
  ]
}

Ensure that the product IDs sent in the request match product IDs in the product catalog.

Related Articles