Skip to main content

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:

KeyTypeDescription
componentIdstring - requiredThe id of the component you want to target, e.g. sign_up_436366175206.
actionTypestring - requiredA string representing the campaign action type.
tip

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:​

KeyTypeDescription
componentIdstring - requiredThe id of the component you want to target, e.g. sign_up_436366175206.
actionTypestring - requiredMust be setAndValidateFormField
fieldComponentIdstring - requiredThe id of the field you want to target e.g. textarea_6570984561008
fieldValuerequiredThe value you want to set the field to, e.g., "Hello World".
caution

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.

caution

The fieldValue type depends on the field itself, different field types have different value requirements.

Please refer to the examples below.

Examples​

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'
    }
)

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:​

KeyTypeDescription
componentIdstring - requiredThe id of the component you want to target, e.g. sign_up_436366175206.
actionTypestring - requiredMust be setAndValidateFormFieldDefaultValue
fieldComponentIdstring - requiredThe id of the field you want to target e.g. textarea_6570984561008
fieldValuerequiredThe value you want to set the field to, e.g., "Hello World".
caution

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.

caution

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:​

KeyTypeDescription
actionTypestring - requiredMust be setPage.
pageIdstring - requiredThe id of the page you wish to navigate to. e.g. page_64537254.
tip

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:​

KeyTypeDescription
componentIdstring - requiredThe id of the component you want to target, e.g. sign_up_436366175206.
actionTypestring - requiredMust be filterContentByQuery.
additionalQuery (or query)string - requiredThe 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:

OrderKey
Newest firstcreated_on:desc
Oldest firstcreated_on:asc
Last modifiedlast_modified:desc
Most popularvote_count:desc
Randomrandom

Required keys:​

KeyTypeDescription
componentIdstring - requiredThe id of the component you want to target, e.g. sign_up_436366175206.
actionTypestring - requiredMust be setDisplayOrder.
orderstring - requiredAny 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:

KeyTypeDescription
componentIdstring - requiredThe id of the component you want to target, e.g. sign_up_436366175206.
actionTypestring - required"setComponentSettings"
settingsobject - requiredobject 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:​

KeyTypeDescription
componentIdstring - requiredThe id of the component you want to target, e.g. sign_up_436366175206.
actionTypestring - requiredMust be pushTranslatedCaptionPreferredLocale.
localesarray - requiredAn array of ISO 639-1 locales. e.g. ['fr', 'ru']
enabledbooleanEnables 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
})