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 sdk methods method defines the events that can trigger the action the sdk methods 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 addevent method 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 the parameters are as follows context is name of the event events is the event data addevent method 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) 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 addevent example coresdkinstance addevent(eventtypes contextproductthumbnailview, { products \["slbc", "99"], }); addevent example 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"]))) addevent example // 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 monetate core components of an experience, then that experience is triggered a json object containing the experience response is then returned getactionsdata method 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); }); getactionsdata method 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); }); getactionsdata method 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 sdk event and action types 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 { } } getactionsdata method 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 sdk event and action types as the action type for this method getactionsdata call example 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 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); }); 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); }); 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 } } } } } } 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(); 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 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" } 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" } 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" ] } ] } ] } } 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" }