Actions for Inserting New Content

The following actions insert new content when used in a Web experience. You can find options to build these actions on the Insert Content tab of Action Builder.

HTML with Optional JavaScript Action

The HTML — Optional JS action inserts HTML on the page relative to a defined element selector. It also appends any included CSS styles in the <head> tag of the page and runs any included JavaScript.

Required Components

HTML

Any content added in the HTML field is inserted on the page relative to the specified selector. This content is wrapped in a container <div> with a unique identifier attribute (ID) that you can use for styling and targeting purposes.

Relative Element Selector

Input the element selector into Relative Element Selector. This selector determines where Monetate inserts the HTML content. For additional information on selectors, refer to Element Selectors.

Insert Method

You can adjust where you want HTML content to appear in relation to the selected element by choosing an option from Insert Method:

  • After the selected element
  • Before the selected element
  • Replace the selected element
  • First child of the selected element
  • Last child of the selected element
  • Take over the contents of the selected element

Optional Components

Banner Div Inline Style

Monetate appends anything you input into Banner Div Inline Style as an inline style attribute of this action's container <div>.

JavaScript

Monetate appends anything you input into the JavaScript editor to your site. It loads in a <script> tag and executes when the action fires. Any variables or functions are available on this page for reference by other page elements or additional actions.

CSS Style

Anything you input into the CSS editor is appended to a stylesheet in the <head> portion of your site within a <style> or <link> element. These styles are available on this page for use with any page element.

Select Multiple Elements

The Select multiple elements, if matched? toggle applies the action to the first occurrence of the relative element selector or all occurrences of it, if multiple exist.

Selecting NO applies the action to the first occurrence. Selecting YES applies the action to all occurrences.

Re-Check for Elements

Use the Re-check for Elements toggle to enable or disable polling. If you enable polling, Monetate continues to check for the selected element even if it doesn't initially appear on the page. This option is good if your site has certain elements that don't fire right when the page loads.

If you disable polling, Monetate only checks for the element once when your page loads.

Closable HTML Action

The Closable HTML action inserts HTML content relative to a defined element selector. You can close the inserted HTML with a click and can specify a frequency interval at which the content is displayed to customers. This action also appends included CSS styles in the <head> of the page.

Required Components

HTML

Monetate inserts any content added in the HTML field on the page relative to the specified selector. This content gets wrapped in a container <div> with a unique identifier attribute (ID) that you can use for styling and targeting purposes. Add a #close click zone to the creative if you want to allow a customer to close the banner.

Interval Settings

These inputs set a cookie-based lightbox ID to distinguish this action from any other lightboxes or banners with the same ID. The banner with this ID is displayed to a customer based on the display frequency settings and can be dismissed after it has loaded or on interaction.

Lightbox ID

Select the basic lightbox identifier number, which must be between 0 and 31, to distinguish an experience's lightbox from any other lightboxes and their display frequencies.

Display Frequency

This input, which is based on the lightbox ID, controls the frequency that a lightbox displays for a particular customer or audience segment. Several frequency options are available:

  • Every page
  • Once per session
  • Once, ever
  • Once every X days

If you select Once every X days, then you must input a number into Days until expiration, which appears in the Optional Inputs section.

When Interval Should Be Applied

This input determines whether your banner persists until a customer interacts with it or if the display frequency should happen as soon as the action runs. This setting has two options to give you flexibility to control how persistent the banner should be and how a customer can interact with and close it:

  • After the banner is first loaded: The banner action has fired and content has loaded on the page. On the next page view, a customer sees the banner.
  • After the user closes the banner: The banner action has fired and content has loaded on the page. On the next page view, the customer sees the banner until they click the close button.

The When should the display interval be applied? setting does not apply if you select Every page from How often (per user) should this banner be shown? because the action is set to run with 100% frequency as long as other targeting criteria are met.

Relative Element Selector and Insert Function

Enter the element selector into Relative Element Selector to determine where the creative is inserted. For additional information on selectors, refer to Element Selectors.

You can adjust where you want the HTML to appear in relation to the selected element using an option from Insert Function:

  • After the selected element
  • Before the selected element
  • Replace the selected element
  • First child of the selected element
  • Last child of the selected element
  • Take over the contents of the selected element

Close Button Selector(s)

Enter any selector(s) for close buttons in the banner HTML content to trigger the close function. The banner remains hidden when a customer clicks this button and only appears again based on the interval settings.

Optional Components

Banner Container Styles

Monetate appends anything that you add to the Banner Container Style field as an inline style attribute of this action's container <div>.

CSS Style

Monetate appends anything that you add to the Additional CSS Style field to a stylesheet in the <head> portion of your site within a <style> block. These styles are available on this page for use with any page element.

Select Multiple Elements

The Select Multiple Elements toggle allows you to apply the action to the first occurrence of the element selector or to all occurrences of the selector, if multiple exist.

Selecting NO applies the action to the first occurrence. Selecting YES applies the action to all occurrences.

Re-Check for Elements

Use the Re-check for Elements toggle to enable or disable polling. If you enable polling, Monetate continues to check for the selected element even if it doesn't initially appear on the page. This option is good if you have certain elements that don't fire right when the page loads.

If you disable polling, Monetate only checks for the element once when your page loads.

Closable Image Action

The Closable Image action inserts an image creative relative to a predefined element selector. You can close the inserted image with a click and specify a frequency interval at which Monetate displays content to users. It also appends included CSS styles in the <head> element of the page.

Required Components

Image Creative

Monetate inserts the uploaded creative on the page relative to the specified selector. This content gets wrapped in a container <div> with a unique identifier attribute (ID) that you can use for styling and targeting purposes. Add a #close click zone to the creative if you want to allow a customer to close the banner.

Interval Settings

These inputs set a cookie-based ID to distinguish this action from any other lightboxes or banners with the same ID. The banner with this ID is displayed to a customer based on the display frequency settings and can be dismissed after it has loaded or on interaction.

ID

Select the basic identifier number, which must be between 0 and 31, to distinguish this action's closable banner from any other lightboxes and banners their display frequencies.

Display Frequency

This input, which is based on the lightbox ID, controls the frequency that a lightbox displays for a particular customer or audience segment. Several frequency options are available:

  • Every page
  • Once per session
  • Once, ever
  • Once every X days

If you select Once every X days, then you must input a number into Days until expiration, which appears in the Optional Inputs section.

When Interval Should Be Applied

This input determines whether your banner persists until a customer interacts with it or if the display frequency should happen as soon as the action runs. This setting has two options to give you flexibility to control how persistent the banner should be and how a customer can interact with and close it:

  • After the banner is first loaded: The banner action has fired and content has loaded on the page. On the next page view, a customer sees the banner.
  • After the user closes the banner: The banner action has fired and content has loaded on the page. On the next page view, a customer sees the banner until they click the close button.

The When should the display interval be applied? setting does not apply if you select Every page from How often (per user) should this banner be shown? because the action is set to run with 100% frequency as long as other targeting criteria are met.

CSS3 Selector and Insert Function

Enter the element selector into Relative Element Selector to determine where the creative gets inserted. For additional information on selectors, refer to Element Selectors.

You can adjust where you want the HTML to appear in relation to the selected element using an option from Insert Method:

  • After the selected element
  • Before the selected element
  • Replace the selected element
  • First child of the selected element
  • Last child of the selected element
  • Take over the contents of the selected element

Banner Container Style

Monetate appends anything you add to Banner Div Inline Style as an inline style attribute of this action's container <div>.

Image Element Style

Monetate appends anything you input into Image Element Inline Style as an inline style attribute of the <img> element.

CSS

Monetate appends anything you add to the CSS editor to the DOM in a <style> or <link> element.

Select Multiple Elements

The Select multiple elements, if matched toggle allows you to apply the action to the first occurrence of the CSS3 selector or all occurrences of the selector, if multiple exist.

Selecting NO applies the action to the first occurrence. Selecting YES applies the action to all occurrences.

Re-Check for Elements

Use the Re-check for Elements toggle to enable or disable polling. If you enable polling, Monetate continues to check for the selected element even if it does not initially appear on the page. This option is good if you have certain elements that don't fire right when the page loads.

If you disable polling, Monetate only checks for the element once when your page loads.

CSS Action

The CSS action inserts CSS content into a <style> block to alter the styling properties of any elements on that page.

Monetate appends anything you add to the CSS editor to a stylesheet in the <head> portion of your site within a <style> block. These styles are available on this page for use with any page element.

Duplicate Element Action

The Duplicate Element action duplicates an element—and its children elements—and places it somewhere on a page. You can set the duplicated content to have a new unique ID attribute.

Keep any CSS styles from an ID or class and JavaScript bindings on elements you select intact within a Duplicate Element action. It doesn't, however, edit the content of the element you are duplicating.

For example, if you need to duplicate an element, such as a checkout button, and edit the text within that button, pair this action with an Insert HTML action to take over the button's inner HTML text.

Required Components

Element to Clone

Enter into Element To Clone the element selector for the element, including its children elements, that you want duplicated.

Relative Element Selector and Insert Function

Enter into Relative Element Selector where you want the duplicated content inserted. See Element Selectors for more information.

You can adjust where you want the duplicated content to appear in relation to the selected element with an option from Insert Method:

  • After the selected element
  • Before the selected element
  • Replace the selected element
  • First child of the selected element
  • Last child of the selected element
  • Take over the contents of the selected element

Optional Components

Cloned Element ID

You can add a new ID to the duplicated element in Cloned Element ID. A unique ID is useful if you need to style the duplicated element differently than the original element.

Wrap Cloned Element

Select YES to wrap the duplicated element in a <div> element. Select NO if you do not want the duplicated element wrapped in a <div> element.

Use jQuery for Cloning

The Use jQuery For Cloning option is useful if the element you want to duplicate has jQuery events attached to it. Select YES to duplicate these events and apply them to the duplicated element.

CSS Style

Monetate appends anything you add in the CSS editor to a stylesheet in the <head> portion of your site within a <style> block. These styles are available on this page for use with any page element.

Re-Check for Elements

Use the Re-check for Elements toggle to enable or disable polling. If you enable polling, Monetate continues to check for the selected element even if it does not initially appear on the page. This option is good if you have certain elements that don't fire right when the page loads.

If you disable polling, Monetate only checks for the element once when your page loads.

Image Action

The Image action inserts an uploaded image on to the page relative to a defined element selector. It also appends included CSS styles in the <head> of the page.

Required Components

Image Creative

Monetate inserts the uploaded creative on to the page relative to the specified selector. This content gets wrapped in a container <div> with a unique identifier attribute (ID) that you can use for styling and targeting purposes.

Relative Element Selector and Insert Function

Enter the element selector in the Relative Element Selector field. This selector determines where the image creative is inserted. For more information on element selectors, refer to Element Selectors.

You can adjust where you want the image to appear in relation to the selected element with an option from Insert Method:

  • After the selected element
  • Before the selected element
  • Replace the selected element
  • First child of the selected element
  • Last child of the selected element
  • Take over the contents of the selected element

Optional Components

Banner Div Inline Style

Monetate appends anything you add in the Banner Div Inline Style field as an inline style attribute of this action's container <div> element.

Image Element Inline Style

Monetate appends anything you add in the Image Element Inline Style field as an inline style attribute of the <img> element.

CSS Style Field

Monetate appends anything you add in the CSS code editor to a stylesheet in the <head> portion of your site within a <style> block. These styles are available on this page for use with any page element.

Select All Elements

The Select multiple elements, if matched? toggle allows you to apply the action to the first occurrence of the relative element selector or all occurrences of the selector, if multiple exist.

Selecting NO applies the action to the first occurrence. Selecting YES applies the action to all occurrences.

Re-Check for Elements

Use the Re-check for Elements toggle to enable or disable polling. If you enable polling, Monetate continues to check for the selected element even if it does not initially appear on the page. This optioin is good if you have certain elements that don't fire right when the page loads.

If you disable polling, Monetate only checks for the element once when the page loads.

JavaScript Action

A JavaScript action inserts JavaScript content onto a page and allows you to change or create dynamically generated elements, add or edit variables, or insert JavaScript functions for use by other page elements.

Required Component

JavaScript

Monetate appends anything you add in the JavaScript editor to your site. It's loaded in a <script> tag and executed when the action fires. Any variables or functions are available on this page for reference by other page elements or additional actions.

Optional Component

Run Once

The Only run once? toggle allows you to execute the JavaScript only on the first page track or on each page track.

Selecting YES runs the JavaScript on the first track only. Selecting NO runs the JavaScript on all subsequent retracks.

For more information, see AJAX Site Updates.

Related Articles

Table of Contents
    Related Articles