Actions
Create a Banner Message Action
Displaying a banner involves creating an action trigger that activates an Omnichannel experience to return an appropriate JSON object. This object contains data that you can use to populate a banner message. You can use the getActions method to set up this trigger and obtain the JSON.
You can use the returned JSON data for multiple purposes. This example uses the JSON to display a banner message.
You must first create an Omnichannel experience in the Monetate platform that uses an Omni JSON action type. Refer to Create an Omnichannel Experience in the Monetate Knowledge Base for instructions, and to Available Action Types for additional information on Omni JSON actions.
You can use the following JSON template for the required input:
React Native
React Web
iOS
Android
Omni JSON Action Template Code
1{
2 "meta": {
3 "type": "action",
4 "tool": "react-native",
5 "version": "1"
6 },
7 "data": {
8 "actionId": "12345",
9 "actionType": "monetate:action:OmnichannelJson",
10 "component": "home_component_1",
11 "impressionId": "5678",
12 "json": {
13 "text": "Experience Configured for React Native personalization SDK ",
14 "color": "#FF0000",
15 "style": "bold",
16 "fontSize":24,
17 "buttonText": "Reset All",
18 "buttonColor": "#7B68EE",
19 "type": "monetate:action:GenericAction"
20 }
21 }
22}
Omni JSON Action Template Code
1{
2 "meta": {
3 "type": "action",
4 "tool": "react-web",
5 "version": "1"
6 },
7 "data": {
8 "actionId": "12345",
9 "actionType": "monetate:action:OmnichannelJson",
10 "component": "home_component_1",
11 "impressionId": "5678",
12 "json": {
13 "text": "Experience Configured for React Web Personalization SDK",
14 "color": "#FF0000",
15 "style": "bold",
16 "fontSize":24,
17 "buttonText": "Reset All",
18 "buttonColor": "#7B68EE",
19 "type": "monetate:action:GenericAction"
20 }
21 }
22}
Omni JSON Action Template Code
1{
2 "meta":
3 {
4 "code": 200
5 },
6 "data":
7 {
8 "responses":
9 [
10 {
11 "requestId": "sample-unique-request-id-ABC-123",
12 "actions":
13 [
14 {
15 "json":
16 {
17 "text": "Free Shipping on orders over $500",
18 "color": "#FFFFFF",
19 "style": "bold",
20 "fontSize": 24,
21 "background-color": "#697895"
22 },
23 "actionType": "monetate:action:OmnichannelJson",
24 "component": "home_component_1",
25 "actionId ": 5005228
26 }
27 ]
28 }
29 ]
30 }
31}
Omni JSON Action Template Code
1{
2 "meta": {
3 "type": "action",
4 "tool": "android",
5 "version": "1"
6 },
7 "data": {
8 "actionId": "12345",
9 "actionType": "monetate:action:OmnichannelJson",
10 "component": "home_component_1",
11 "impressionId": "5678",
12 "json": {
13 "text": "Experience Configured for Android Personalization SDK",
14 "color": "#FF0000",
15 "style": "bold",
16 "fontSize":24,
17 "buttonText": "Reset All",
18 "buttonColor": "#7B68EE",
19 "type": "monetate:action:GenericAction"
20 }
21 }
22}
This is the JSON object that is returned on the trigger. Modify this template to suit your needs.
The Omnichannel experience is triggered using the getActions method. This method is used when you want to satisfy an experience using a single event condition.
React Native
React Web
iOS
Android
getActions Method
1getActions(actionType, context?, eventData?, includeReporting?) : Promise<any>
The parameters are 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.
- context is name of the event.
- eventData is the data associated with the event.
- includeReporting indicates whether the response will have impression reporting data.
getActions Method
1getActions(actionType, context?, eventData?, includeReporting?) : Promise<any>
The parameters are 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.
- context is name of the event.
- eventData is the data associated with the event.
- includeReporting indicates whether the response will have impression reporting data.
getActions Method
1objPersonalization.getActions(context: <ContextEnum>, requestId: <String>, includeReporting: <Bool>, arrActionTypes: <[String]>, event: <MEvent?>)
The parameters are as follows:
- context is name of the event.
- requestID is the request ID for the API.
- includeReporting indicates whether the response will have impression reporting data.
- arrActionType is the type of action you want to request. You can specify one action or multiple actions in an array to handle.
- event is the data associated with the event.
getActions Method
1public String getActions(String context, Object event, String[] actionTypes, boolean includeReports) {returns response;}
The parameters are as follows:
- context is name of the event.
- eventData is the data associated with the event.
- actionTypes 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.
This code triggers the configured Omni JSON experience and handles the experience by displaying a banner. Customize the example code as you see fit.
React Web
React Native
iOS
Android
Omni JSON Banner Action Full Example
1import React, { useEffect, useState} from "react" ;
2import { View , Text} from "web" ;
3import Personalization from '@personalization-js-sdk/web';.
4import { ActionTypes, EventTypes } from "@personalization-js-sdk/common";
5
6const test = () => {
7 const personalizationInstance = new Personalization(account, user)
8 const [actionData, setActionData] = useState({});
9
10 const handleGetActions = () => {
11 const eventType = EventTypes.ContextCart;
12 personalizationInstance.getActions("monetate:action:OmnichannelJson", eventType)
13 .then((res) => {
14 if (res.length > 0) {
15 res[0].actions.map((action) => {
16 if (action.json.meta && action.json.meta.tool === 'web') {
17 const data = {
18 color: action.json.data.json.color,
19 text: action.json.data.json.text,
20 fontSize: action.json.data.json.fontSize,
21 style: action.json.data.json.style,
22 buttonText: action.json.data.json.buttonText,
23 buttonColor: action.json.data.json.buttonColor,
24 };
25 setActionData(prevState => {
26 return {
27 ...prevState,
28 decisionEventData: data,
29 }
30 });
31 } else {
32 console.warn('Meta Object not present in Omni JSON.');
33 }
34 });
35 }
36 })
37 .catch((error) => console.warn('Please try after some time!', error));
38 };
39
40 useEffect(() => {
41 handleGetActions();
42 }, []);
43
44 return <View>
45 <Text> {actionData.buttonText} //Render Data On UI
46 </View>;
47};
Omni JSON Banner Action Full Example
1import React, { useEffect, useState} from "react" ;
2import { View , Text} from "react-native" ;
3import Personalization from '@personalization-js-sdk/react-native';.
4import { ActionTypes, EventTypes } from "@personalization-js-sdk/common";
5
6const test = () => {
7 const personalizationInstance = new Personalization(account, user)
8 const [actionData, setActionData] = useState({});
9
10 const handleGetActions = () => {
11 const eventType = EventTypes.ContextCart;
12 personalizationInstance.getActions("monetate:action:OmniChannelJson", eventType)
13 .then((res) => {
14 if (res.length > 0) {
15 res[0].actions.map((action) => {
16 if (action.json.meta && action.json.meta.tool === 'react-native') {
17 const data = {
18 color: action.json.data.json.color,
19 text: action.json.data.json.text,
20 fontSize: action.json.data.json.fontSize,
21 style: action.json.data.json.style,
22 buttonText: action.json.data.json.buttonText,
23 buttonColor: action.json.data.json.buttonColor,
24 };
25 setActionData(prevState => {
26 return {
27 ...prevState,
28 decisionEventData: data,
29 }
30 });
31 } else {
32 console.warn('Meta Object not present in Omni JSON.');
33 }
34 });
35 }
36 })
37 .catch((error) => console.warn('Please try after some time!', error));
38 };
39
40 useEffect(() => {
41 handleGetActions();
42 }, []);
43
44 return <View>
45 <Text> {actionData.buttonText} //Render Data On UI
46 </View>;
47};
Omni JSON Banner Action Full Example
1import MarqueeLabel
2import UIKit
3import monetate_ios_sdk
4
5class CategoryViewController: UIViewController {
6
7 @IBOutlet weak var bottomLabel: MarqueeLabel!
8 @IBOutlet weak var bottomView: UIView!
9 @IBOutlet weak var constraintHeightBottomView: NSLayoutConstraint!
10 final var objPersonalization = Personalization(
11 account: Account(
12 instance: "p", domain: "localhost.org", name: "a-701b337c", shortname: "localhost"),
13 user: User(deviceId: "62bd2e2d-213d-463f-83bb-12c0b2530a14"))
14
15 override func viewDidLoad() {
16 super.viewDidLoad()
17 self.bottomView.isHidden = true
18 self.constraintHeightBottomView.constant = 0
19 bottomLabel.text = ""
20 }
21
22 override func viewWillAppear(_ animated: Bool) {
23 super.viewWillAppear(animated)
24 pageEvent()
25 }
26
27 func pageEvent() {
28 objPersonalization.getActions(
29 context: .PageView, requestId: "test_request_id", includeReporting: false,
30 arrActionTypes: ["monetate:action:OmnichannelJson"],
31 event: PageView(
32 pageType: "Homepage", path: "n/a", url: "n/a", categories: [], breadcrumbs: [])
33 ).on { (res) in
34 if res.status == 200 {
35 let data = JSON(res.data)
36 print(data)
37 self.handleAction(res: res)
38 } else {
39 }
40 }
41 }
42
43 fileprivate func handleAction(res: APIResponse) {
44 let data = JSON(res.data)
45 for item in data["data"]["responses"].arrayValue {
46 bottomLabel.animationCurve = .linear
47 bottomLabel.speed = .duration(5)
48 bottomLabel.fadeLength = 15.0
49
50 if item["requestId"].string == res.requestId {
51 for oneaction in item["actions"].arrayValue {
52 let component = oneaction["component"].string ?? ""
53 if component.lowercased() == "footer" {
54 if let json = oneaction["json"].dictionary {
55 print("final dict \(json)")
56 if let text = json["text"]?.string {
57 self.bottomView.isHidden = false
58 self.constraintHeightBottomView.constant = 60
59 bottomLabel.text = text
60 if let fontStyle = json["style"]?.string, let fontSize = json["fontSize"]?.double {
61 if fontStyle == "bold" {
62 bottomLabel.font = UIFont(name: "Roboto-Bold", size: fontSize)
63 } else if fontStyle == "normal" {
64 bottomLabel.font = UIFont(name: "Roboto-Regular", size: fontSize)
65 } else if fontStyle == "italic" {
66 bottomLabel.font = UIFont(name: "Roboto-Italic", size: fontSize)
67 }
68 }
69 if let color = json["color"]?.string {
70 bottomLabel.textColor = MiscClass.hexStringToUIColor(hex: color)
71 }
72 if let backgroundColor = json["background-color"]?.string {
73 bottomView.backgroundColor = MiscClass.hexStringToUIColor(hex: backgroundColor)
74 return
75 }
76 }
77 }
78 }
79 }
80 }
81 }
82 }
83}
Omni JSON Banner Action Full Example
1Account account = new Account("localhost.org", "a-701b337c", "p", "localhost");
2User user = new User();
3user.setCustomerId(null);
4user.setDeviceId("1769696968989");
5Personalization personalization = new Personalization(user, account);
6IpAddress address = new IpAddress();
7address.setIpAddress("127.0.0.0.");
8String responseData;
9
10new Thread(new Runnable()
11{
12 @Override
13 public void run()
14 {
15 // Gets the responseData using getActionsData
16 responseData = personalization.getActions(EventTypes.ContextIpAddress, address, new String[]
17 {
18 "monetate:action:OmnichannelJson"
19 }, true);
20 // Once you receive the responseData from getActionsData, use the Handler and parse the required data from it
21 new Handler(Looper.getMainLooper()).post(new Runnable()
22 {
23 @Override
24 public void run()
25 {
26 // Parse the received responseData, get the requiredData from it and use it accordingly
27 try
28 {
29 // Example: textView.setText(requiredData);
30 }
31 catch (Exception ex)
32 {
33 // Catch any exception that occurs while parsing
34 ex.printStackTrace();
35 }
36 }
37 });
38 }
39}).start();
You must handle the getActions method in a Thread or AsyncTask. To update the main thread, you can use either Handler or runOnUiThread. This code example uses Thread and Handler to update the main thread and change the UI.