Actions
Create an Image-Based Badging Action

Monetate's SDK product badging action allows clients to apply a small promotional image displayed atop the product image to specific items on product listing pages and product detail pages to draw site visitors' attention to those items. A product badge frequently appears as a digital promotional sticker displayed atop the product image to indicate that the item is a bestseller or a top-rated product. These labels serve as customer endorsements, allowing shoppers to more quickly locate popular products on a page.
You can set up a handler for Omnichannel badging actions using two methods. The addEvent﻿ method defines the events that can trigger the action. The getActionsData﻿ method is then used as the trigger and requests the experience based on the defined events. getActionsData then returns a JSON object containing badging image data that you can then handle in code.
Prerequisites
You must first create an Omnichannel badging action in the Monetate platform for the methods to reference. Refer to Configure an Omnichannel Product Badging Action in the Monetate Knowledge Base for instructions.
This action uses Product Thumbnail View as an event listener. To accomplish this, you must configure a Thumbnail's product ID = action condition. Make note of this product ID so that you can pass the appropriate ID in code.
Optionally, you can add other conditions to this action. If you do, make note of those so that you can pass those as relevant events.
addEvent
This method adds event data to the SDK's internal stack.
React Native
React Web
iOS
Android
addEvent Method
addEvent(context: EventTypes, events: ContextData): void
addEvent(context: EventTypes, events: ContextData): void
﻿
The parameters are as follows:
context is name of the event.
events is the event data.
addEvent Method
addEvent(context: EventTypes, events: ContextData): void
addEvent(context: EventTypes, events: ContextData): void
﻿
The parameters are as follows:
context is name of the event.
events is the event data. 
addEvent Method
addEvent(context: <ContextEnum>, event: <MEvent?>)
addEvent(context: <ContextEnum>, event: <MEvent?>)
﻿
The parameters are as follows:
context is name of the event. (Required)
event is the event data. (Required)
addEvent Method
public void addEvent(String context, Object event)
public void addEvent(String context, Object event)
﻿
The parameters are as follows:
context is name of the event. (Required)
event is the event data. (Required)
For an Omnichannel badging action, use the ContextProductThumbnailView event as your context. Pass a list of product IDs that you want to set up a badge for as your events data.
Code Example
React Native
React Web
iOS
Android
addEvent Example
coreSdkInstance.addEvent(EventTypes.ContextProductThumbnailView, {
  products: ["SLBC", "99"],
});
coreSdkInstance.addEvent(EventTypes.ContextProductThumbnailView, {
  products: ["SLBC", "99"],
});
﻿
addEvent Example
coreSdkInstance.addEvent(EventTypes.ContextProductThumbnailView, {
  products: ["SLBC", "99"],
});
coreSdkInstance.addEvent(EventTypes.ContextProductThumbnailView, {
  products: ["SLBC", "99"],
});
﻿
addEvent Example
objPersonalization.addEvent(context: .ProductThumbnailView, event: ProductThumbnailView(products: Set(["BackP_001", "BackP_002", "BackP_003", "BackP_004", "BackP_005", "BackP_006"])))
objPersonalization.addEvent(context: .ProductThumbnailView, event: ProductThumbnailView(products: Set(["BackP_001", "BackP_002", "BackP_003", "BackP_004", "BackP_005", "BackP_006"])))
﻿
addEvent Example
// Events/context
ProductThumbnailView productThumbnailView = new ProductThumbnailView();
productThumbnailView.setProducts(new String[]
{
  "SLBC",
  "99"
});

// addEvent
personalization.addEvent(EventTypes.ContextProductThumbnailView, productThumbnailView);
// Events/context
ProductThumbnailView productThumbnailView = new ProductThumbnailView();
productThumbnailView.setProducts(new String[]
{
  "SLBC",
  "99"
});

// addEvent
personalization.addEvent(EventTypes.ContextProductThumbnailView, productThumbnailView);
﻿
If you added other action conditions to the Omnichannel badging action, then use additional calls of this method to handle them with the appropriate events and data.
getActionsData
This method sends the defined events to Monetate to trigger an experience. If the events fulfill the WHO settings﻿ of an experience, then that experience is triggered. A JSON object containing the experience response is then returned.
React Native
React Web
iOS
Android
getActionsData Method
getActionsData(actionType: Array<string>, includeReporting?: boolean) : Promise<any>
getActionsData(actionType: Array<string>, includeReporting?: boolean) : Promise<any>
﻿
The parameter is as follows:
actionType is the type of action you want to request. You can specify one action or multiple actions in an array to handle.
includeReporting indicates whether the response will have impression reporting data.
Use OmniChannelImageBadging as the action type for this method.
getActionsData Example
let imageBadge;
personalizationInstance
  .getActionsData("monetate:action:OmniChannelImageBadging")
  .then(res => {
    imageBadge = res[0].actions;
  })
  .catch(error => {
    console.warn('Error!', error);
  });
let imageBadge;
personalizationInstance
  .getActionsData("monetate:action:OmniChannelImageBadging")
  .then(res => {
    imageBadge = res[0].actions;
  })
  .catch(error => {
    console.warn('Error!', error);
  });
﻿
getActionsData Method
getActionsData(actionType: Array<string>, includeReporting?: boolean) : Promise<any>
getActionsData(actionType: Array<string>, includeReporting?: boolean) : Promise<any>
﻿
The parameter is as follows:
actionType is the type of action you want to request. You can specify one action or multiple actions in an array to handle.
includeReporting indicates whether the response will have impression reporting data.
Use OmniChannelImageBadging as the action type for this method.
getActionsData Example
let imageBadge;
personalizationInstance
  .getActionsData("monetate:action:OmniChannelImageBadging")
  .then(res => {
    imageBadge = res[0].actions;
  })
  .catch(error => {
    console.warn('Error!', error);
  });
let imageBadge;
personalizationInstance
  .getActionsData("monetate:action:OmniChannelImageBadging")
  .then(res => {
    imageBadge = res[0].actions;
  })
  .catch(error => {
    console.warn('Error!', error);
  });
﻿
getActionsData Method
getActionsData(requestId: <String>, includeReporting: <Bool>, arrActionTypes: <[String]>) 
getActionsData(requestId: <String>, includeReporting: <Bool>, arrActionTypes: <[String]>) 
﻿
The parameters are as follows:
requestID is the request ID for the API.
includeReporting indicates whether the response will have impression reporting data.
arrActionTypes is the type of action you want to request. You can specify one action or multiple actions in an array to handle.
Use monetate:action:OmniChannelImageBadging﻿ as the action type for this method.
getActionsData Example
Personalization.shared.getActionsData(
  requestId: "test_request_id", includeReporting: false, arrActionTypes: ["monetate:action:OmniChannelImageBadging"]
).on { (res) in
  if res.status == 200 {
    let data = JSON(res.data)
    self.handleBadging(res: res)
    print(data)
  } else {
  }
}
Personalization.shared.getActionsData(
  requestId: "test_request_id", includeReporting: false, arrActionTypes: ["monetate:action:OmniChannelImageBadging"]
).on { (res) in
  if res.status == 200 {
    let data = JSON(res.data)
    self.handleBadging(res: res)
    print(data)
  } else {
  }
}
﻿
getActionsData Method
public String getActionsData(String[] actionTypes, boolean includeReports)
public String getActionsData(String[] actionTypes, boolean includeReports)
﻿
The parameters are as follows:
actionTypes is the type of action you want to request. You can specify one action or multiple actions in an array to handle.
includeReports indicates whether the response will have impression reporting data.
Use monetate:action:OmniChannelImageBadging﻿ as the action type for this method.
getActionsData Call Example
responseData = personalization.getActionsData(new String[]{"monetate:action:OmniChannelImageBadging"},true);
responseData = personalization.getActionsData(new String[]{"monetate:action:OmniChannelImageBadging"},true);
﻿
Full Code Example
This code triggers the configured Omnichannel badging experience. Customize the example code as you see fit.
React Native
React Web
iOS
Android
Image-Based Product Badging Action Example
// Add the required events used in experience.

personalizationInstance.addEvent(EventTypes.ContextProductThumbnailView, {
  products: ["SLBC", "99"],
});

// -----------------------------
// Fetch badging experience data 
 
let imageBadge;
personalizationInstance
  .getActionsData("monetate:action:OmniChannelImageBadging")
  .then(res => {
    imageBadge = res[0].actions;
  })
  .catch(error => {
    console.warn('Error!', error);
  });
// Add the required events used in experience.

personalizationInstance.addEvent(EventTypes.ContextProductThumbnailView, {
  products: ["SLBC", "99"],
});

// -----------------------------
// Fetch badging experience data 
 
let imageBadge;
personalizationInstance
  .getActionsData("monetate:action:OmniChannelImageBadging")
  .then(res => {
    imageBadge = res[0].actions;
  })
  .catch(error => {
    console.warn('Error!', error);
  });
﻿
Image-Based Product Badging Action Example
// Add the required events used in experience.

personalizationInstance.addEvent(EventTypes.ContextProductThumbnailView, {
  products: ["SLBC", "99"],
});

// -----------------------------
// Fetch badging experience data 
 
let imageBadge;
personalizationInstance
  .getActionsData("monetate:action:OmniChannelImageBadging")
  .then(res => {
    imageBadge = res[0].actions;
  })
  .catch(error => {
    console.warn('Error!', error);
  });
// Add the required events used in experience.

personalizationInstance.addEvent(EventTypes.ContextProductThumbnailView, {
  products: ["SLBC", "99"],
});

// -----------------------------
// Fetch badging experience data 
 
let imageBadge;
personalizationInstance
  .getActionsData("monetate:action:OmniChannelImageBadging")
  .then(res => {
    imageBadge = res[0].actions;
  })
  .catch(error => {
    console.warn('Error!', error);
  });
﻿
Image-Based Product Badging Action Example
// Add the required events used in experience.

objPersonalization.addEvent(
  context: .ProductThumbnailView,
  event: ProductThumbnailView(
    products: Set(["BackP_001", "BackP_002", "BackP_003", "BackP_004", "BackP_005", "BackP_006"])))

// -----------------------------
// Fetch badging experience data

objPersonalization.getActionsData(
  requestId: "test_request_id", includeReporting: false,
  arrActionTypes: ["monetate:action:OmniChannelImageBadging"]
).on { (res) in
  if res.status == 200 {
    let data = JSON(res.data)
    self.handleBadging(res: res)
    print(data)
  } else {
  }
}

// -----------------------------
// Handle badging experience response

private func handleBadging(res: APIResponse) {
  let data = JSON(res.data!)
  for item in data["data"]["responses"].arrayValue {
    if item["requestId"].string == res.requestId {
      for oneAction in item["actions"].arrayValue {
        if oneAction["actionType"].string == "monetate:action:OmniChannelImageBadging" {
          if let pIds = oneAction["pids"].array {
            arrBadgedProductIds = oneAction["pids"].rawValue as! [String]
          }
          if !arrBadgedProductIds.isEmpty {
            let imageContent = oneAction["image_content"]
            let imageURL = URL(string: imageContent["ref"].stringValue)
            if imageURL != nil {
              downloadImage(from: imageURL!)
            }
            return
          }
        }
      }
    }
  }
}
// Add the required events used in experience.

objPersonalization.addEvent(
  context: .ProductThumbnailView,
  event: ProductThumbnailView(
    products: Set(["BackP_001", "BackP_002", "BackP_003", "BackP_004", "BackP_005", "BackP_006"])))

// -----------------------------
// Fetch badging experience data

objPersonalization.getActionsData(
  requestId: "test_request_id", includeReporting: false,
  arrActionTypes: ["monetate:action:OmniChannelImageBadging"]
).on { (res) in
  if res.status == 200 {
    let data = JSON(res.data)
    self.handleBadging(res: res)
    print(data)
  } else {
  }
}

// -----------------------------
// Handle badging experience response

private func handleBadging(res: APIResponse) {
  let data = JSON(res.data!)
  for item in data["data"]["responses"].arrayValue {
    if item["requestId"].string == res.requestId {
      for oneAction in item["actions"].arrayValue {
        if oneAction["actionType"].string == "monetate:action:OmniChannelImageBadging" {
          if let pIds = oneAction["pids"].array {
            arrBadgedProductIds = oneAction["pids"].rawValue as! [String]
          }
          if !arrBadgedProductIds.isEmpty {
            let imageContent = oneAction["image_content"]
            let imageURL = URL(string: imageContent["ref"].stringValue)
            if imageURL != nil {
              downloadImage(from: imageURL!)
            }
            return
          }
        }
      }
    }
  }
}
﻿
Image-Based Product Badging Action Example
// Events and context data
ProductThumbnailView productThumbnailView = new ProductThumbnailView();
productThumbnailView.setProducts(new String[]
{
  "SLBC",
  "99"
});

// addEvent
personalization.addEvent(EventTypes.ContextProductThumbnailView, productThumbnailView);

//getActionsData
new Thread(new Runnable()
{
  @Override
  public void run()
  {
    // Gets the responseData using getActionsData
    responseData = personalization.getActions(EventTypes.ContextIpAddress, address, new String[]
    {
      "monetate:action:OmniChannelImageBadging"
    }, true);
    // Once you receive the responseData from getActionsData, use the Handler and parse the required data from it 
    new Handler(Looper.getMainLooper()).post(new Runnable()
    {
      @Override
      public void run()
      {
        // Parse the received responseData, get the requiredData from it and use it accordingly
        try
        {
          // Example: textView.setText(requiredData);
        }
        catch (Exception ex)
        {
          // Catch any exception that occurs while parsing 
          ex.printStackTrace();
        }
      }
    });
  }
}).start();
// Events and context data
ProductThumbnailView productThumbnailView = new ProductThumbnailView();
productThumbnailView.setProducts(new String[]
{
  "SLBC",
  "99"
});

// addEvent
personalization.addEvent(EventTypes.ContextProductThumbnailView, productThumbnailView);

//getActionsData
new Thread(new Runnable()
{
  @Override
  public void run()
  {
    // Gets the responseData using getActionsData
    responseData = personalization.getActions(EventTypes.ContextIpAddress, address, new String[]
    {
      "monetate:action:OmniChannelImageBadging"
    }, true);
    // Once you receive the responseData from getActionsData, use the Handler and parse the required data from it 
    new Handler(Looper.getMainLooper()).post(new Runnable()
    {
      @Override
      public void run()
      {
        // Parse the received responseData, get the requiredData from it and use it accordingly
        try
        {
          // Example: textView.setText(requiredData);
        }
        catch (Exception ex)
        {
          // Catch any exception that occurs while parsing 
          ex.printStackTrace();
        }
      }
    });
  }
}).start();
﻿
You must handle the getActions method in a Thread or AsyncTask. To update the main thread, you can use either Handler or runOnUiThread. The code example above uses Thread and Handler to update the main thread and change the UI.
Response Data
An example of the JSON data returned from getActionsData is below. Handle this response in your code accordingly to render the data in your UI as you see fit.
React Native
React Web
iOS
Android
Image-Based Product Badging Action Response Example
{
  "actions": [
    {
      "image_content": {
        "version": 2,
        "clickzones": [],
        "contentId": 775504,
        "top": 0,
        "title": "Test-Badge",
        "href": "https://marketer.monetate.net",
        "iwidth": 40,
        "alt": "Alt-Test-Badge",
        "iheight": 40,
        "ref": "https://sb.monetate.net/img/1/1094/4631519.jpg",
        "left": 180
      },
      "actionType": "monetate:action:OmniChannelImageBadging",
      "actionId": 4959427,
      "application_data": {
        "test": "React-native SDK"
      },
      "positioning_hint": "center",
      "pids": [
        "99",
        "SLBC"
      ]
    }
  ],
  "requestId": "81.2272963332645"
}
{
  "actions": [
    {
      "image_content": {
        "version": 2,
        "clickzones": [],
        "contentId": 775504,
        "top": 0,
        "title": "Test-Badge",
        "href": "https://marketer.monetate.net",
        "iwidth": 40,
        "alt": "Alt-Test-Badge",
        "iheight": 40,
        "ref": "https://sb.monetate.net/img/1/1094/4631519.jpg",
        "left": 180
      },
      "actionType": "monetate:action:OmniChannelImageBadging",
      "actionId": 4959427,
      "application_data": {
        "test": "React-native SDK"
      },
      "positioning_hint": "center",
      "pids": [
        "99",
        "SLBC"
      ]
    }
  ],
  "requestId": "81.2272963332645"
}
﻿
Image-Based Product Badging Action Response Example
{
  "actions": [
    {
      "image_content": {
        "version": 2,
        "clickzones": [],
        "contentId": 775504,
        "top": 0,
        "title": "Test-Badge",
        "href": "https://marketer.monetate.net",
        "iwidth": 40,
        "alt": "Alt-Test-Badge",
        "iheight": 40,
        "ref": "https://sb.monetate.net/img/1/1094/4631519.jpg",
        "left": 180
      },
      "actionType": "monetate:action:OmniChannelImageBadging",
      "actionId": 4959427,
      "application_data": {
        "test": "React-native SDK"
      },
      "positioning_hint": "center",
      "pids": [
        "99",
        "SLBC"
      ]
    }
  ],
  "requestId": "81.2272963332645"
}
{
  "actions": [
    {
      "image_content": {
        "version": 2,
        "clickzones": [],
        "contentId": 775504,
        "top": 0,
        "title": "Test-Badge",
        "href": "https://marketer.monetate.net",
        "iwidth": 40,
        "alt": "Alt-Test-Badge",
        "iheight": 40,
        "ref": "https://sb.monetate.net/img/1/1094/4631519.jpg",
        "left": 180
      },
      "actionType": "monetate:action:OmniChannelImageBadging",
      "actionId": 4959427,
      "application_data": {
        "test": "React-native SDK"
      },
      "positioning_hint": "center",
      "pids": [
        "99",
        "SLBC"
      ]
    }
  ],
  "requestId": "81.2272963332645"
}
﻿
Image-Based Product Badging Action Response Example
{
  "meta": 
  {
    "code": 200
  },
  "data": 
  {
    "responses": 
    [      
      {
        "requestId": "sample-unique-request-id-ABC-123",
        "actions": 
        [          
          {
            "image_content": 
            {
              "version": 2,
              "clickzones": [],
              "contentId": 785039,
              "top": 0,
              "title": "",
              "href": "",
              "iwidth": 75,
              "alt": "",
              "iheight": 100,
              "ref": "https://sb.monetate.net/img/1/1190/4919639.png",
              "left": 180
            },
            "actionType": "monetate:action:OmniChannelImageBadging",
            "actionId": 4959735,
            "application_data": 
            {
              "color": "#FFFFFF",
              "fontSize": 10,
              "style": "bold",
              "badge": "Save 15% with 'SAVE15'",
              "background-color": "#2A519E"
            },
            "positioning_hint": "top-left",
            "pids": 
            [
              "BackP_009",
              "BackP_010"
            ]
          }
        ]
      }
    ]
  }
}
{
  "meta": 
  {
    "code": 200
  },
  "data": 
  {
    "responses": 
    [      
      {
        "requestId": "sample-unique-request-id-ABC-123",
        "actions": 
        [          
          {
            "image_content": 
            {
              "version": 2,
              "clickzones": [],
              "contentId": 785039,
              "top": 0,
              "title": "",
              "href": "",
              "iwidth": 75,
              "alt": "",
              "iheight": 100,
              "ref": "https://sb.monetate.net/img/1/1190/4919639.png",
              "left": 180
            },
            "actionType": "monetate:action:OmniChannelImageBadging",
            "actionId": 4959735,
            "application_data": 
            {
              "color": "#FFFFFF",
              "fontSize": 10,
              "style": "bold",
              "badge": "Save 15% with 'SAVE15'",
              "background-color": "#2A519E"
            },
            "positioning_hint": "top-left",
            "pids": 
            [
              "BackP_009",
              "BackP_010"
            ]
          }
        ]
      }
    ]
  }
}
﻿
Image-Based Product Badging Action Response Example
{
  "actions": [
    {
      "image_content": {
        "version": 2,
        "clickzones": [],
        "contentId": 775504,
        "top": 0,
        "title": "Test-Badge",
        "href": "https://marketer.monetate.net",
        "iwidth": 40,
        "alt": "Alt-Test-Badge",
        "iheight": 40,
        "ref": "https://sb.monetate.net/img/1/1094/4631519.jpg",
        "left": 180
      },
      "actionType": "monetate:action:OmniChannelImageBadging",
      "actionId": 4959427,
      "application_data": {
        "test": "React-native SDK"
      },
      "positioning_hint": "center",
      "pids": [
        "99",
        "SLBC"
      ]
    }
  ],
  "requestId": "81.2272963332645"
}
{
  "actions": [
    {
      "image_content": {
        "version": 2,
        "clickzones": [],
        "contentId": 775504,
        "top": 0,
        "title": "Test-Badge",
        "href": "https://marketer.monetate.net",
        "iwidth": 40,
        "alt": "Alt-Test-Badge",
        "iheight": 40,
        "ref": "https://sb.monetate.net/img/1/1094/4631519.jpg",
        "left": 180
      },
      "actionType": "monetate:action:OmniChannelImageBadging",
      "actionId": 4959427,
      "application_data": {
        "test": "React-native SDK"
      },
      "positioning_hint": "center",
      "pids": [
        "99",
        "SLBC"
      ]
    }
  ],
  "requestId": "81.2272963332645"
}
﻿
﻿
Updated 26 Sep 2024
Create a Banner Message Action
Create a Recommendations Action
Docs powered by Archbee
TABLE OF CONTENTS