Visual Experience Composer options

When you click a page element in the Adobe Target Visual Experience Composer (VEC), a menu shows the options that are available for that element type. In addition, a DOM path displays at the bottom of the page that lets you easily navigate through the page structure.

The various Visual Experience Composer (VEC) actions are grouped in appropriate menu options to make your job quicker and more efficient:

Edit

The following options are available:

Text/HTML edit-text-html

Change the HTML code for the element, such as the text for a text area, button, or link.

In addition to HTML code, you can edit and inject custom JavaScript.

Several rich text formatting options are available when editing text and HTML for A/B and Experience Targeting activities. You can choose a font, select a font style, change text alignment, and other standard text formatting options. When modifying HTML, you can toggle between the code view and rich-editing view of the HTML.

The following HTML5 tags can be nested:

Background Color

Use the color picker to select or configure a background color. You can select a color swatch, and adjust it using RGB values or color hex codes. The red x in the color picker makes the background transparent.

Note: This option is not available for an element where a background image is set.

Styles styles

Use the Styles panel to view or edit the value of existing styles for the selected element. You can also add additional styling.

To access the Styles panel, click a page element from within the VEC, then click Edit > Styles.

The Styles panel displays on the right side of the VEC. The panel contains a list of styles that lets you edit or add to the selected element. A real-time CSS Editor lets you view changes and add styles if you are comfortable using Cascading Style Sheets (CSS) or if you receive code from your developer.

As you apply different styles, you can always revert your changes by clicking the Revert icon that displays at the top-right corner of the Styles panel after you change any section. Clicking the Revert icon reverts all changes on the current section’s panel.

Expand each section to edit or add styles, as explained below. To save your changes, click the Back icon at the top of the panel to return to the panel’s main display, then click Save.

Blue dots on the main panel and next to each option on the various section panels indicate that you have changed the corresponding styles. This visual indicator makes it easy for you to review your changes before clicking Save.

CSS Class

Specify the predefined CSS class used for the element. If more than one element is selected, separate multiple CSS classes with a space.

Available for A/B, Automated Personalization, and Multivariate Test activities.

Link

Change the URL in the link.

Use Edit Link to update the selector to point to the same image element. However, linking to a different image element is not supported. To link to a different image element, delete the original action from the code editor and use the Visual Experience Composer to apply the action on the other image element.

Insert Before

The following options are available:

Offer Decision

Add an offer created in Adobe Journey Optimizer to present the best offer and experience to your customers using offer decisioning.

Note: This option is available when editing or creating manual A/B Test or Experience Targeting (XT) activities only. This option is not available for other activity types.

For more information, see Use offer decisions.

Image, HTML, and Text

Add any kind of element to your page in addition to modifying existing content. Add text, code, lists, and more to create entirely different experiences to test.

Select an element on the page, then click Insert Before and choose whether you want to insert an image, HTML, or text. The inserted element appears before the selected element.

The behavior of the inserted element depends on the structure of your page, your CSS, and other page configuration options. Valid HTML is required to make your page appear correctly. Always test your page after inserting an item to make sure it appears as expected.

Recommendations supports Insert Before the contents of DIV, SECTION, and ARTICLE tags.

Note: Inserting an image requires that Adobe Scene7 Publishing System is enabled so you have access to the image library.

Recommendation

Include recommendations inside A/B Test (including Auto-Allocate and Auto-Target) and Experience Targeting (XT) activities. For more information, see Recommendations as an offer.

Experience Fragment

Insert experience fragments created in Adobe Experience Manager (AEM) in Target activities to aid optimization or personalization. For more information, see AEM Experience Fragments.

Insert After

The following options are available:

Offer Decision

Add an offer created in Adobe Journey Optimizer to present the best offer and experience to your customers using offer decisioning.

Note: This option is available when editing or creating manual A/B Test or Experience Targeting (XT) activities only. This option is not available for other activity types.

For more information, see Use offer decisions.

Image, HTML, and Text

Add any kind of element to your page in addition to modifying existing content. Add text, code, lists, and more to create entirely different experiences to test.

Select an element on the page, then click Insert After and choose whether you want to insert an image, HTML, or text. The inserted element appears after the selected element.

The behavior of the inserted element depends on the structure of your page, your CSS, and other page configuration options. Valid HTML is required to make your page appear correctly. Always test your page after inserting an item to make sure it appears as expected.

Recommendations supports Insert After the contents of DIV, SECTION, and ARTICLE tags.

Note: Inserting an image requires that Adobe Scene7 Publishing System is enabled so you have access to the image library.

Recommendation

Include recommendations inside A/B Test (including Auto-Allocate and Auto-Target) and Experience Targeting (XT) activities. For more information, see Recommendations as an offer.

Experience Fragment

Insert experience fragments created in Adobe Experience Manager (AEM) in Target activities to aid optimization or personalization. For more information, see AEM Experience Fragments.

Replace Content

The following options are available:

Offer Decision

Add an offer created in Adobe Journey Optimizer to present the best offer and experience to your customers using offer decisioning.

Note: This option is available when editing or creating manual A/B Test or Experience Targeting (XT) activities only. This option is not available for other activity types.

For more information, see Use offer decisions.

Image

Select a different image from the Content Library. The images available for swapping include the images uploaded to the Experience Cloud assets folder or uploaded in the Content Library in Target.

During initial activity creation, the URL displayed is not the URL used for delivery. Upon activity synching, that URL is updated to a production Scene7 URL.

For example, the initial URL might look like the following example:

https://test.marketing.adobe.com/content/dam/mac/scholasticinc/Aug_MBM.jpeg?ch_ck=1470774943867

After activity syncing, the delivery URL might look like the following example:

http://s7d2.scene7.com/is/image/TargetTest/Aug_MBM?tm=1470768352933&fit=constrain&hei=173&wid=300

Recommendations supports Replace With in DIV, SECTION, and ARTICLE tags.

Note: Swapping images requires an Adobe Scene7 Publishing System Account.

HTML Offer

Select a different offer from the Content Library.

Note: HTML Offers are stored on Target servers.

An HTML offer can be up to 256 KB.

Recommendation

Include recommendations inside A/B Test (including Auto-Allocate and Auto-Target) and Experience Targeting (XT) activities. For more information, see Recommendations as an offer.

Experience Fragment

Insert experience fragments created in Adobe Experience Manager (AEM) in Target activities to aid optimization or personalization. For more information, see AEM Experience Fragments.

Layout

The following options are available:

Rearrange

Drag the element to another location inside the same parent element or DIV. Other elements shift location to make space for the rearranged element.

Note: Click-tracking does not work on rearranged items.

Currently, certain VEC actions, such as Rearrange and Move, assume that the sibling elements of the source and destination parent elements are completely loaded. If lazy loading occurs under the parent DOM elements (source or destination), these VEC actions can cause inconsistent behavior. We are working on a more reliable approach to make VEC actions work in lazy-loaded DOM elements. As a temporary workaround, you can use Custom Code in these scenarios to render your experiences.

Resize

Resize an element on your page. When you select Resize, a handle appears in the bottom-right corner of the element that lets you drag that corner to resize. Hold the Shift key to retain the same aspect ratio.

Note: Inline elements cannot be resized.

Move move

Move elements on your page. Unlike the Rearrange option, Move does not shift other elements to make room for the element being moved. Use the arrow keys to fine tune the move. (Planned enhancement: support to ensure moved elements are not hidden behind other elements.)

In certain situations, such as when a CSS restriction requires an element to remain inside its parent element, you cannot move the element outside its parent. An element cannot be moved outside of a container that has following CSS property: overflow: hidden.

See Rearrange above for more information about inconsistent behavior with the Move and Rearrange actions due to lazy loading of DOM elements.

Hide

Hide the element. The white space remains, but the content is removed.

Remove

Remove the element. The white space behind the image is removed and the space where the element was is collapsed.

Note: Items within a “classic” mbox (an mbox created within a Target Classic campaign) cannot be removed using this option.

Expand Section

Select the parent element in addition to the originally selected element. When you select any parent element, all children of that element are automatically selected. You can expand the selection multiple times.

Navigate to Link

Open the destination of the link.

Undo/Redo

Undo changes you make to your activities during an editing session. You can also redo changes that have been previously undone.

Considerations considerations

Custom element support custom

The VEC supports Web Components to let you create and test personalized experiences and offers on custom elements and on elements inside custom elements. This functionality is available in the VEC for all Target activity types.

Most VEC actions are supported on custom events and inside custom events, with the following exceptions:

The following actions are not available on custom elements:

The following action is not available inside custom elements:

Navigate elements using the DOM path dom-path

When you click an element on the page, the VEC options menu displays. In addition, when you click an element, the corresponding DOM path displays at the bottom of the page.

You can use the DOM path to quickly see information about the selected element (type, ID, and class) and move up or down the DOM path to select the desired element.

When you hover over the DOM path, a blue box highlights the corresponding element in the VEC. When you click the element, an orange box highlights the element and the VEC options menu displays, as explained above.

You can easily navigate to any parent, sibling, or child element within the VEC using the DOM path.

The DOM path feature is also available when setting up click tracking.