Activity settings/configuration

Click the Configure icon ( Configure icon ) displayed on top of the Design canvas to display the activity properties menu.

Activity configurations options

The following options are available:

  • Properties: Assign properties to the activity or remove properties from the activity. Properties is a (Target Premium feature. For more information, see Enterprise user permissions.
  • Page Delivery: Include the same experience on similar pages on your site. Use a page template to provide structure to your pages, or if your pages contain similar elements, to test variations in similarly structured page elements or across your entire domain. For more information, see Include the same experience on similar pages.
  • Site Preferences: Configure your site preferences to specify how Target generates CSS selectors. For more information, see CSS selectors in Configure the Visual Experience Composer.
  • Add Additional Pages: Add additional pages to the activity to create a multipage activity that lets you create a story over multiple pages, with a design that is specific to each page. For more information, see Multipage activity.
  • Single Audience: Use a single audience for the activity.
  • Multiple Audiences: Assign multiple audiences to the activity. Click the Add Audiences icon ( Add icon ), then select one or more audiences from the list. You can also combine audiences or create a new audience from the Add Audiences dialog box.

Design/Browse modes

Use the Design/Browse toggles displayed on top of the design canvas to switch between design and browse mode.

Design and browse toggles

Use the Browse mode to navigate your site and to pick the view or page you want to update. Switch back to Design mode to add or edit your changes.

Undo/Redo

You can undo changes made by clicking the Undo icon ( Undo icon ).

Undo icon in VEC

To redo an action, expand the Undo/Redo button group and choose Redo.

Components panel

You can add a number of components to your web page and edit them as needed by using the new Components panel.

Components panel

NOTE
If you see the Modifications panel in this area instead of the Components panel, click the Show Components icon ( Show Components icon ). The Show Components icon ( Show Components icon ) and the Show Modifications icon ( Show Modifications panel ) act as toggles to show the appropriate options.

To add a new component to an experience:

  1. Click the desired component that you want to add to highlight it.

    The available components are grouped into logic containers:

  2. Drag the component over an existing page element in the Design canvas.

  3. Choose to insert the component before of after the selected element.

    As compared to the previous VEC version, you cannot replace a selected element with a component.

Modifications panel

To open the Modifications panel, click the Show Modifications icon ( Show Modifications panel ) in the Components panel.

Modifications panel

NOTE
The Show Components icon ( Show Components icon ) and the Show Modifications icon ( Show Modifications panel ) act as toggles to show the appropriate options.

The Modifications panel shows all changes that have been made to your page in the Visual Experience Composer (VEC) and lets you make additional changes (such as CSS Selector, Mbox, and Custom Code).

Click the More Options icon ( More Actions icon ) in the panel header to add a modification, delete all modifications, or delete all invalid modifications. Click Select to perform bulk operations: Apply to All Pages or Delete.

Click the More Options icon ( More Actions icon ) next to each modification to view its information, delete the modification, or to apply the modification to more views.

Design canvas

The Design canvas lets you select viewports, including fit-to screen, Desktop, Tablet, Mobile Landscape, and Mobile Portrait. By default, the canvas fits the page to the screen along with the viewports defined in the Administration section.

Viewport options

You can also zoom in or zoom out by clicking the appropriate icon ( Zoom In icon or Zoom Out icon ).

When you click a page element in the Design canvas, 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:

VEC options menu

NOTE
The available options depend on the activity type and element that you are creating or editing. For more information about editing images and offers in an A/B Test activity, see Edit elements using the Design canvas below.

Properties panel

The Properties panel lets you change properties of selected elements on the page, whether these elements are HTML elements or objects specific to Target, such as recommendations or offers.

Properties panel

Click the icons on top of the panel to edit HTML code or delete, duplicate, or hide elements. Changes appear in the Modifications panel.

The Properties panel is collapsible in the right rail. Click the Show/Hide Properties icon ( Properties icon ) to the right of the panel to collapse or display the Properties panel.

Edit elements using the Design canvas

The following sections show you how to edit images and text in the Design canvas. The Design canvas, along with the Components, Modifications, and Properties panels provide you with powerful tools to let you easily create experiences for your activities.

Image options

If you click an image in an A/B Test activity, the VEC looks like similar to the following illustration:

VEC with image selected

Select components from the Components frame on the left side to insert the following elements:

The menu at the top of the image lets you do the following:

  • Insert a link ( Insert Link icon ).
  • Change the image ( Choose Image icon ).
  • Add personalization ( Add Personalization icon ).
  • Delete the image ( Delete icon ).

The Properties pane on the right side lets further configure the image’s properties.

The icons at the top of the frame let you do the following:

  • Edit the HTML ( Insert HTML icon ). See Edit HTML below for more information.
  • Duplicate the image ( Duplicate icon ).
  • Delete the image ( Delete icon ).
  • Hide the image ( Hide icon ).

The options in the right frame let you do the following:

  • Edit the CSS class.
  • Configure the image’s properties (source, title, alt text).
  • Edit the link URL.
  • Configure the image’s size (height and width). Click Show Advanced Options to configure the image’s minimum and maximum size, width, height, overflow, and object fit.
  • Configure the image’s position on your page (absolute, fixed, relative, static, or sticky.)
  • Configure the element’s spacing, including margin and padding.
  • Configure the element’s effects (opacity). Click Show Advanced Options to configure the image’s sepia, grayscale, contrast, brightness, and blur values. You can also invert or rotate the image.
  • Configure the image’s inline styles.

Text options

If you click text in an A/B Test activity, the VEC looks like similar to the following illustration:

VEC with text selected

Select components from the Components frame on the left side to insert the following elements:

Click the Show Modifications icon ( Show Modifications icon ) to display the modifications to the experience.

The menu at the top of the text element lets you do the following:

  • Configure the text’s properties (heading level, paragraph, block quote, or monospace)
  • Select the text’s color ( Text Color icon )
  • Configure the text’s attributes (bold, italic, underline, or strike through) ( Choose text Attributes icon ).
  • Configure the text’s alignment (left, center, right, justify) ( Text Alignment icon ).
  • Insert a link ( Insert Link icon ).
  • Replace the content with an HTML offer, Experience Fragment, or Recommendation.
  • Edit the HTML ( Insert HTML icon ).
  • Add personalization ( Add Personalization icon ).
  • Delete the image ( Delete icon ).

The Properties panel on the right side lets further configure the text’s properties.

The icons at the top of the frame let you do the following:

  • Edit the HTML ( Insert HTML icon ). See Edit HTML below for more information.
  • Duplicate the text ( Duplicate icon ).
  • Delete the text ( Delete icon ).
  • Hide the text ( Hide icon ).

The options in the right frame let you do the following:

  • Edit the CSS class.
  • Configure the text’s background color and image.
  • Configure the text’s typography (heading style, font size, font weight, line height, alignment, text color, text style (bold, italic, underlined, or strike through)).
  • Configure lists, including bulleted, numbered, or A,B,C.
  • Choose the border color.
  • Configure the text box’s size (height and width). Click Show Advanced Options to configure the text box’s minimum and maximum size, width, height, overflow, and object fit.
  • Configure the text box’s position on your page (absolute, fixed, relative, static, or sticky) and set the number of pixels from the top, right, bottom, and left.
  • Configure the element’s spacing, including margin and padding.
  • Configure the element’s effects (opacity). Click Show Advanced Options to configure the image’s sepia, grayscale, contrast, brightness, and blur values. You can also invert or rotate the text.
  • Configure the inline styles.

Edit HTML

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 the rich-editing view of the HTML.

The following HTML5 tags can be nested:

TagAllowed Nested Tags
<a><h1-h6>, <p>, <ul>, <ol>, <menu>, <div>, <figure>, <figcaption>
<ins><h1-h6>, <p>, <ul>, <ol>, <menu>
<del><ul>, <ol>, <menu>, <h1-h6>, <p>
<label><p>

Navigate elements using the 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.

DOM path

If you do not see the DOM path, click the Show DOM icon ( Show DOM icon ).

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.

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.

Target


Adobe Target Maturity Webinar Series

Adobe Customer Success Webinars

Tuesday, Feb 4, 4:00 PM UTC

Adobe Target innovations, including GenAI, and best practices on AI-powered personalization and experimentation at scale.

Register