Build an Action

With Action Builder you can create new actions for any page of your site.

Technical Considerations

Before you can use Action Builder, you must meet these prerequisites:

  • You must have the Administrator or the Action Building user role in the Monetate platform.
  • You must implement the Monetate tag on a page from the corresponding account instance to run any of the platform's Builders on it.

You can use the Builder with the latest versions of Chrome, Firefox, Safari, and Internet Explorer browsers.

Accessing Action Builder

Follow these steps to access Action Builder.

  1. Click COMPONENTS in the top navigation bar and then click Actions.

    Callout of the Actions option in the COMPONENTS menu

  2. Click CREATE ACTION.

    Callout of the CREATE ACTION button

In the top-right corner of Action Builder are buttons that let you pin it to the top or bottom of the browser window or tab, minimize it, or close it.

Callout of the Action Builder window controls

Action Types

Most actions fall into one of two categories: insert content and edit content.

Insert actions add the following elements to your site:

  • Image
  • HTML
  • JavaScript
  • CSS
  • Background image
  • Lightbox
  • Countdown timer
  • Recommendations slider

Edit actions work with or act on site elements in the following ways:

  • Edit HTML
  • Move, show, or hide an element or swap two current site elements
  • Modify an attribute

Other actions you can build include setting a cookie, simulating a click event, and collecting data.

Using the Element Selector

Many actions use element selectors to determine where on the site an action happens and what site elements are affected. Therefore, the first step when building many actions is selecting an element.

To select an element in Action Builder, move your mouse pointer across your site, and a selector box appears around the current element. This box is the DOM selector tool. Use this tool to choose any element or element container on your site.

Animated demonstration of how the DOM selector tool appears as the mouse pointer lands on various site elements

Once you click to select an element, the selector offers additional options. Click the element name to view relative elements.

Example of the DOM selector tool showing relative elements of the selected element

When you're building certain types of actions, such as inserting an image, you can click the icon to the left of the element name to select a placement option relative to the selected element.

Example of the DOM selector tool showing the insert options for the selected element

Click the icon to the right of the element name to reset the DOM selector tool and then select a new element.

If you want to run multiple actions at the same time, you can use a specific selector for one action and a variation of it for the second action. For example, you could set the selector for action A to #main > .content > .hero and then set the selector for action B to #main > div.content > div.hero.

If you don't use specific selectors, experience priority determines which action fires. See Experience Priority for more information.

Element-Related Options on the Details Tab

After you determine where on the page the action will occur, the options on the Details tab allow you to further customize certain aspects of the action and its relationship to the selected element.

The options on the tab are determined by the type of action you're building.

Example of the Details tab, which includes the 'Relative Element Selector' field, 'Select multiple elements, if matched?' toggle, and the 'Re-check for Elements' toggle

For some action types, you can input a new element selector path or edit the one you selected to change which site element the action affects. Some examples of valid paths include the following:

  • parentElement > nextChildElement
  • .className > .nextClassname
  • #element_ID_Name > nextChildElement

For certain action types, you can toggle Select multiple elements, if matched? to YES if you want the change the action makes to apply to all occurrences of the specified selector. If the setting remains on its default NO setting, then the change only the first match.

Toggle Re-check for Elements to YES to enable matched element polling. If you enable this setting, then the action continues to check for the selected element every 50 milliseconds for up to 3 seconds, even if it doesn't initially appear on the page. Enabling this option is useful if you have certain elements that don't fire immediately when the page loads. If the setting remains on its default NO setting, then the action only checks for the element once when the page loads.

See Element Selectors for more information.

Inserting Images into Actions

Action Builder has three ways to add an image: select an image from Content Manager, generate a placeholder image, or upload an image.

The 'Select an Image' panel of Action Builder, with a CHOOSE button, an UPLOAD button, and a GENERATE button

Using an Image in Content Manager

Follow these steps to select an image previously uploaded to the Monetate platform.

  1. Click CHOOSE.

    Callout of the CHOOSE button on the 'Select an Image' panel of Action Builder

  2. Find in the Content Manager modal the image you want to insert and then click to select it.

    The 'Select image' modal of Action Builder, which displays image files contained in Content Manager

  3. Optionally, click EDIT IN CONTENT BUILDER if you want to modify the image before using it in the action you're building. See Content Builder Overview for more information. If you don't need to modify the image, then click SELECT.

    Callout of the EDIT IN CONTENT BUILDER button in the 'Select image' modal of Action Builder

  4. Click SELECT.

    Callout of the SELECT button in the 'Select image' modal of Action Builder

After you select an image, you can then select the element the action impacts.

Uploading an Image

Follow these steps to upload an image to the Monetate platform.

  1. Click UPLOAD.

    Callout of the UPLOAD button on the 'Select an Image' panel of Action Builder

  2. Drag and drop the file you want to upload, or click CLICK HERE to navigate to the location outside of the Monetate platform where the image file is stored.

    The drag-and-drop zone and the CLICK HERE button of the 'SELECT AN IMAGE' panel of Action Builder

After the image uploads, you can then select the element the action impacts.

Generating an Image Placeholder

Follow these steps to generate an image placeholder that you can later replace with the real image for the action.

  1. Click GENERATE.

    Callout of the GENERATE button on the 'Select an Image' panel of Action Builder

  2. Input the height and width in pixels for the placeholder.

    All click zones on responsive image actions are also responsive. If an image is designed to scale to the size of the customer's browser window, then click zones contained within that image also scale without any additional work.

    The 'Generate placeholder' modal of the 'Select an Image' panel of Action Builder

  3. Click SAVE.

    Callout of the SAVE button on the 'Generate placeholder' modal of the 'Select an Image' panel of Action Builder

After you input the dimensions for the placeholder, you then select the element the action impacts.

Inserting a Countdown Timer

Use Action Builder to create and insert a countdown timer anywhere on your site.

  1. Click Countdown Timers.

    Callout of the Countdown Timers tab of Action Builder

  2. Select the type of countdown timer you want to use in the action.

    View of the Countdown Timers tab of Action Builder

  3. If you selected Basic Countdown Timer or Countdown Banner in the previous step, use one of the three options explained in Inserting Images into Actions in this documentation to select a background or banner image, respectively. If you selected an HTML-based countdown timer option, skip to the next step.
  4. Use the element selector tool to specify where on the site you want the countdown timer to appear.
  5. Configure the options on the Details tab to customize the countdown timer. See Customize an Action for more information.

Inserting or Editing HTML Code

You can build an action that inserts or edits HTML code on your site without having to do any coding, unless you want to.

  • Select HTML – Optional JS on the Insert Content tab if you want to include additional HTML code on your site.
  • Select Edit HTML on the Edit/Other tab if you want to replace or modify existing HTML code on your site.

First, use the element selector tool to select where the HTML code should appear or where the HTML code the action edits exists. Next, configure the settings as necessary on the Details tab. After that, click the HTML tab to define the change you want the action to make.

The default view of the HTML code editor is the WYSIWYG view.

The 'What You See Is What You Get' view of the HTML code editor on the HTML tab of Action Builder

Click Source in the top-left corner of the editor to view and edit the code itself.

The 'Source' view of the HTML code editor on the HTML tab of Action Builder

Click the triangle in the bottom-right corner of the code editor to resize it within the Action Builder panel.

Inserting or Editing CSS

The CSS option on the Insert Content tab allows you to include CSS that is appended to the DOM in a <style> or <link> element.

The CSS you input is appended to the current stylesheet for your site. Therefore, this action requires that you have some knowledge of CSS.

The CSS editor on the Styles tab of Action Builder

In addition to inputting code directly into the CSS editor, you can upload a file that contains the code, or you can reuse CSS that exists in Content Manager by clicking CHOOSE SAVED CSS and then selecting a CSS file on the Select CSS Creative modal.

The Styles tab also appears when you build certain other actions in Action Builder. The tab's content remains the same for these actions.

Inserting a Lightbox

The Lightboxes tab of Action Builder offers different types of lightbox actions that you can build.

The Lightboxes tab of Action Builder

The Details tab contains the lightbox-specific settings.

The settings available depend on the type of lightbox action you're building. See the lightbox actions overview for more information.

Example of the lightbox-specific settings on the Details tab

Moving an Element

The Move action allows you to move a current element on your site to a new location on the page.

  1. Click the Edit/Other tab and then click Move Element.

    Callout of the 'Move Element' option on the 'Edit/Other' tab of Action Builder

  2. Select the element that you want to move, and then click the forward button.

    Animated demonstration of a user selecting an element to be moved on a retailer site

  3. Select the element whose position you want your first element to move into and then click the forward button.

    Animated demonstration of a user selecting a relative element selector

Swapping Two Elements

The Swap Elements action allows you to swap the position of two elements on your site.

  1. Click the Edit/Other tab, and then click Swap Elements.

    Callout of the 'Edit/Other' tab and the 'Swap Elements' option

  2. Select the first element that you want to swap, and then click the forward button.

    Animated demonstration of a user selecting the element that contains the 'Gift Certificates' button for the Swap Elements action

  3. Select the second element you want to swap, and then click the forward button.

    Animated demonstration of a user selecting the element that contains the 'Contact Us' button for the Swap Elements action

Hiding an Element

The Hide Element action allows you to hide an existing element on your site.

  1. Click the Edit/Other tab, and then click Hide Element.

    Callout of the 'Edit/Other' tab and the 'Hide Element' option

  2. Place your mouse pointer on the site element that you want to hide, and click it to see it disappear.

    Animated demonstration of a user clicking the 'RSS Syndication' button, which then disappears

Showing an Element

The Show Element action allows you to show an element on your site that is currently hidden based on your site's code. For example, if you have discounted shipping rates that are normally hidden, then you can use a Show Element action to show them in a Web experience.

Callout of the 'Show Element' option on the 'Edit/Other' tab of Action Builder

You can only use the Show Element action with elements on your site that are hidden.