Action Dispatcher
Dispatch an action that triggers a change in campaign.
For instance setPage
navigates the user to a specific page.
window.wyng['_WYNG_ID_'].dispatchCampaignAction(payload);
Parameters
dispatchCampaignAction
accepts a single paramter, an object containing at least the following:
Key | Type | Description |
---|---|---|
componentId | string - required | The id of the component you want to target, e.g. sign_up_436366175206 . |
actionType | string - required | A string representing the campaign action type. |
Each action type has their own set of additional required keys.
Example
This will get the value of a url parameter named utm from current page url, and set its value to a hidden value field of a Sign Up component.
function getUrlParameter(name) {
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
var results = regex.exec(location.search);
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
};
window.wyng['_WYNG_ID_'].dispatchCampaignAction(
{
componentId: "sign_up_436366175206",
actionType: "setAndValidateFormField",
fieldComponentId: "hidden_value_6664517258088",
fieldValue: getUrlParameter("utm")
}
)
Supported Components
- Sign-up Form Component
- Direct Upload Component
- Gallery/Carousel
- Quiz Component
- FlexGrid Gallery Component
Supported Action Types
setAndValidateFormField
Change the value of a form field and then validate the field. This value will be cleared out after a successful submission a.k.a. when the form values are reset. A user can still change this value manually.
Required keys:
Key | Type | Description |
---|---|---|
componentId | string - required | The id of the component you want to target, e.g. sign_up_436366175206 . |
actionType | string - required | Must be setAndValidateFormField |
fieldComponentId | string - required | The id of the field you want to target e.g. textarea_6570984561008 |
fieldValue | required | The value you want to set the field to, e.g., "Hello World". |
Note for forms in children components: When targetting a form located within another component (Quiz, Image Upload…) make sure to set componentId
to the ID of the form child component, e.g. quiz_form_section_123456
.
The fieldValue
type depends on the field itself, different field types have different value requirements.
Please refer to the examples below.
Examples
- Text
- Date
- Multiple Choice
- Multi-Select
- Checkbox
- Image
- Radio
- Calendar Date
This example applies to Text Input, Text Area and Hidden field types.
window.wyng['_WYNG_ID_'].dispatchCampaignAction(
{
componentId: 'sign_up_436366175206',
actionType: 'setAndValidateFormField',
fieldComponentId: 'textarea_6570984561008',
fieldValue: 'test@example.com'
}
)
window.wyng['_WYNG_ID_'].dispatchCampaignAction(
{
componentId: 'sign_up_436366175206',
actionType: 'setAndValidateFormField',
fieldComponentId: 'date_3579334075255',
fieldValue: {
monthValue: '2',
dayValue: '27',
yearValue: '1992'
}
}
)
window.wyng['_WYNG_ID_'].dispatchCampaignAction(
{
componentId: 'sign_up_436366175206',
actionType: 'setAndValidateFormField',
fieldComponentId: 'multiple_choice_1819084264811',
fieldValue: 'Choice 2'
}
)
For Multi-Select fields the fieldValue can be either an array of objects or an array of strings
- Strings
- Objects
An array of strings contains the string values of the multi-select choice values that will get checked. Any value not listed will be unchecked. Keep in mind that the choice values must be an exact match and are case-sensitive.
window.wyng['_WYNG_ID_'].dispatchCampaignAction(
{
componentId: 'sign_up_436366175206',
actionType: 'setAndValidateFormField',
fieldComponentId: 'multi_select_836826252302',
fieldValue: ['Choice 2'],
}
)
An array of objects should include all possible choices. The object should contain the following keys:
Key | Type | Description |
---|---|---|
id | integer - required | Index of the choice (The order it appears in). The index starts at 0 |
choice | string - required | Value for the check box |
selected | boolean - required | True if checkbox should get checked, false if not |
window.wyng['_WYNG_ID_'].dispatchCampaignAction(
{
componentId: 'sign_up_436366175206',
actionType: 'setAndValidateFormField',
fieldComponentId: 'multi_select_836826252302',
fieldValue: [
{
choice: 'Choice 1', // Choice value
id: 0, // Index of the choice (Order it appears)
selected: false // Indicates whether the choice is selected.
},
{
choice: 'Choice 2',
id: 1,
selected: true
}
]
}
)
window.wyng['_WYNG_ID_'].dispatchCampaignAction(
{
componentId: 'sign_up_436366175206',
actionType: 'setAndValidateFormField',
fieldComponentId: 'checkbox_1113500351579',
fieldValue: true
}
)
window.wyng['_WYNG_ID_'].dispatchCampaignAction(
{
componentId: 'sign_up_436366175206',
actionType: 'setAndValidateFormField',
fieldComponentId: 'image_580323694217',
fieldValue: 'https://images.url/my_image.jpg'
}
)
window.wyng['_WYNG_ID_'].dispatchCampaignAction(
{
componentId: 'sign_up_436366175206',
actionType: 'setAndValidateFormField',
fieldComponentId: 'radio_2057578130140',
fieldValue: 'Choice 2'
}
)
The value must either be a Date object or null.
window.wyng['_WYNG_ID_'].dispatchCampaignAction(
{
componentId: 'sign_up_436366175206',
actionType: 'setAndValidateFormField',
fieldComponentId: 'calendar_4700764868445',
fieldValue: new Date()
}
)
setAndValidateFormFieldDefaultValue
Change the default value of a form field and then validate the field. This value will remain even after the form is reset after a successful submission. A user can still change this value manually.
Required keys:
Key | Type | Description |
---|---|---|
componentId | string - required | The id of the component you want to target, e.g. sign_up_436366175206 . |
actionType | string - required | Must be setAndValidateFormFieldDefaultValue |
fieldComponentId | string - required | The id of the field you want to target e.g. textarea_6570984561008 |
fieldValue | required | The value you want to set the field to, e.g., "Hello World". |
Note for forms in children components: When targetting a form located within another component (Quiz, Image Upload…) make sure to set componentId
to the ID of the form child component, e.g. quiz_form_section_123456
.
The fieldValue
type depends on the field itself, different field types have different value requirements.
Please refer to the examples listed for setAndValidateFormField.
Examples
window.wyng['_WYNG_ID_'].dispatchCampaignAction(
{
componentId: 'sign_up_436366175206',
actionType: 'setAndValidateFormFieldDefaultValue',
fieldComponentId: 'textarea_6570984561008',
fieldValue: 'test@example.com'
}
)
setPage
Change current selected page.
Required keys:
Key | Type | Description |
---|---|---|
actionType | string - required | Must be setPage . |
pageId | string - required | The id of the page you wish to navigate to. e.g. page_64537254 . |
The value of pageId
can be found in page settings.
Examples
window.wyng['_WYNG_ID_'].dispatchCampaignAction(
{
actionType: 'setPage',
pageId: 'page_64537254'
}
)
filterContentByQuery
Filter gallery/carousel component content. You could filter content by keyword, hashtag, user, tag or any other attribute that available as parameter for ContentAPI request in additional_query request query parameter.
The query format should be the same as Content API. You can find good example by inspecting network requests within the Content Tab, which is also using this API.
Required keys:
Key | Type | Description |
---|---|---|
componentId | string - required | The id of the component you want to target, e.g. sign_up_436366175206 . |
actionType | string - required | Must be filterContentByQuery . |
additionalQuery (or query ) | string - required | The query string e.g. tags.marketer_tags:beach . |
Examples
Filter by marketer tag
window.wyng['_WYNG_ID_'].dispatchCampaignAction(
{
componentId: "gallery_5227044097293",
actionType: "filterContentByQuery",
query: "tags.marketer_tags:beach"
}
)
Filter with compound query
window.wyng['_WYNG_ID_'].dispatchCampaignAction(
{
componentId: "gallery_5227044097293",
actionType: "filterContentByQuery",
query: "social_platform:twitter AND tags.marketer_tags:beach"
}
)
Filter to content created in the last 30 days
window.wyng['_WYNG_ID_'].dispatchCampaignAction(
{
componentId: "gallery_5227044097293",
actionType: "filterContentByQuery",
query: "social_platform_created_on:[now-30d TO *]"
}
)
Reset filter parameters by passing "" as query
window.wyng['_WYNG_ID_'].dispatchCampaignAction(
{
componentId: "gallery_5227044097293",
actionType: "filterContentByQuery",
query: ""
}
)
setDisplayOrder
Sort Flex Grid component content. This overrides the “Set Display Order” setting in the Flex Grid config panel.
Content may be sorted by any of the standard options, or custom sort may be configured on any field in the ElasticSearch content object using the following keywords:
Order | Key |
---|---|
Newest first | created_on:desc |
Oldest first | created_on:asc |
Last modified | last_modified:desc |
Most popular | vote_count:desc |
Random | random |
Required keys:
Key | Type | Description |
---|---|---|
componentId | string - required | The id of the component you want to target, e.g. sign_up_436366175206 . |
actionType | string - required | Must be setDisplayOrder . |
order | string - required | Any value from the list above e.g. last_modified:desc . |
- actionType: "setDisplayOrder",
- order: "last_modified:desc" (or any other value from the list above)
Examples
Set random display order
window.wyng['_WYNG_ID_'].dispatchCampaignAction(
{
componentId: 'flex_grid_6029720128430',
actionType: 'setDisplayOrder',
order: 'random',
}
);
Reset display order and use default one specified in FlexGrid config
window.wyng['_WYNG_ID_'].dispatchCampaignAction(
{
componentId: 'flex_grid_6029720128430',
actionType: 'setDisplayOrder',
order: undefined,
}
);
setComponentSettings
Provides an opportunity to set additional query and display order in one command.
Required keys:
Key | Type | Description |
---|---|---|
componentId | string - required | The id of the component you want to target, e.g. sign_up_436366175206 . |
actionType | string - required | "setComponentSettings" |
settings | object - required | object with key-values additionalQuery: '...' and (or) order: '...' |
Examples
Set random display order and show only Instagram content
window.wyng.dispatchCampaignAction(
{
componentId: 'flex_grid_6029720128430',
actionType: 'setComponentSettings',
settings: {
order: 'random',
additionalQuery: 'content.social_platform:(instagram)',
},
}
);
Reset display order and query and use defaults specified in FlexGrid config
window.wyng.dispatchCampaignAction(
{
componentId: 'flex_grid_6029720128430',
actionType: 'setComponentSettings',
settings: {
order: undefined,
additionalQuery: undefined,
},
}
);
goToPriorQuizQuestion
Return to prior question in the "Questions" component. Usually there is only one quiz on page
so the action does not have component_id
key.
Example
window.wyng['_WYNG_ID_'].dispatchCampaignAction({ actionType: "goToPriorQuizQuestion" })
pushTranslatedCaptionPreferredLocale
Sets the preferred displayed locales in a flexgrid component.
Required keys:
Key | Type | Description |
---|---|---|
componentId | string - required | The id of the component you want to target, e.g. sign_up_436366175206 . |
actionType | string - required | Must be pushTranslatedCaptionPreferredLocale . |
locales | array - required | An array of ISO 639-1 locales. e.g. ['fr', 'ru'] |
enabled | boolean | Enables or disables the translation feature |
Example
window.wyng['_WYNG_ID_'].dispatchCampaignAction({
actionType: "pushTranslatedCaptionPreferredLocale",
locales: ['fr', 'ru'],
componentId: 'flex_grid_component_123456',
enabled: true // set this to false to disable the translation feature
})