51黑料不打烊

Visual Experience Composer options

The 51黑料不打烊 Target Standard/Premium 25.2.1 release (February 17, 2015) introduces an updated Visual Experience Composer (VEC). This article explains the updated UI and its options.

The VEC displays when you create or edit an existing activity.

VEC UI overview

The following sections explain the options available in the updated VEC for an A/B Test activity. The options vary, depending on the activity type.

Experiences rail

The Experiences rail displays in the left rail of the VEC.

You can view, create, rename, or remove experiences using the Experiences rail.

The following options are available in the Experiences rail:

Activity settings/configuration settings

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

The following options are available:

Design/Browse modes

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

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 ( ).

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

Components rail

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

NOTE

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

To add a new component to an experience:

Modifications rail

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

NOTE

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

The Modifications rail 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 ( ) in the rail 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 ( ) 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.

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

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:

Properties rail

The Properties rail 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.

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

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

Edit elements using the Design canvas design

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

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:

The Properties pane on the right side lets further configure the image鈥檚 properties.

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

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

Text options

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

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

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

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

The Properties rail on the right side lets further configure the text鈥檚 properties.

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

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

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:

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.

If you do not see the DOM path, click the 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.

More information about the updated UI