Visual Experience Composer (VEC)
- Topics:
- Visual Experience Composer (VEC)
Information about using the Visual Experience Composer (VEC) in Adobe Target.
The VEC is a WYSIWYG user interface that lets you easily create and test personalized experiences and offers in the site context. You can create experiences and offers for Target activities by dragging and dropping, swapping, and modifying the layout and content of a web page (or offer) or mobile web page.
The VEC is one of the main features of Adobe Target. The VEC lets marketers and designers create and change content using a visual interface. Many design choices can be made without requiring direct editing of the code. Editing HTML and JavaScript is also possible using the editing options available in the composer.
On the Target Administration > Visual Experience Composer tab, you can enter the Default Visual Experience Composer URL.
This URL determines where you start when you open the VEC. If you do not enter a default, then you start with a blank page when you open the editor, and specify a URL at that time.
Content inside an iframe on the page can’t be modified in the VEC. To edit content within an iframe, ensure that the iframe document is Target-enabled, then load that iframe URL in the VEC.
You can use the drop-down menus across the top of the page to view your page as it would appear to different audiences or with different experiences. You can provide a name for each experience in the second drop-down list. For example, if you are testing the location of the Home link in your nav bar, you might name an experience where the Home link appears first something like, “Home link” to make it easier to identify the experiences in the list.
As you move your mouse around the page, a context-sensitive box follows the cursor, highlighting the elements on the page.
Click the Overlays icon to change the way the highlight displays. For example, you can choose to highlight only images, links, regional mboxes, modifications, or JavaScript. You can change the color of the highlight. You can also specify a highlight color and type of fill used to highlight different element types.
Click a highlighted element for a menu of options available for that element type For example, you can click on an image and select Edit > Text/HTML to change the text, or click a button and change the background color. You can use the buttons at the top left of the page to toggle the overlays on and off.
You can also click Browse, then navigate to a page that is available from the primary page, such as a shipping page or shopping cart, and test changes on that page. You can also access page elements that are available when you hover, such as flyout menus and mini-carts. When you are finished browsing to the page, click Compose to edit the experience. For example, you might want to change the design of a shopping cart drop-down or a carousel of images.
For information about the options available in the VEC, see Visual Experience Composer Options.
You can perform some modifications on a page while the page is loading (or after the page fails to load), or you can cancel page loading in the VEC. For more information, see:
Edit a page while the page is loading or after the page fails to load
You can perform many actions before the page loads in the VEC, or even if the page fails to load altogether (for example, custom code is no longer operational).
Some reasons why you might want to access or make edits to a page while it is loading within the VEC or after it fails to load:
- You want to make a simple modification to a page, such as to add custom code or change an experience’s name
- You want to copy existing custom code from a page that is no longer accessible
- You know that a page will not load within the VEC, but you want to make simple edits anyway
While the page loads (or after it fails to load), the Experiences panel, Modifications panel, and the settings at the top of the experience (Overlays, Modifications, Configure, and so forth) are all accessible.
The following illustration shows that you can insert custom code or perform other actions while the page is still loading:
Cancel loading of a page within the VEC
You can cancel the loading of a page within the VEC to unlock editing of the activity without waiting for the page to load. This feature saves time and helps you make simple edits or insert custom code more efficiently without waiting for the page to load within the VEC.
Some reasons why you might want to cancel page loading within the VEC include:
- You want to make minor edits to existing modifications
- You want to delete one or more existing modifications
- You want to insert or edit custom code
- You mistakenly entered the wrong URL for the page
- You want to enable or disable JavaScript before loading the page in the VEC
- You want to add more template testing rules to the Page Delivery criteria
- You want to override the global Enhanced Experience Composer (EEC) toggle when loading a page via the EEC or iframe-only might depend might vary page to page
After you cancel page loading in the VEC you can switch between experiences in the activity without waiting for the page to load. To see the page within the VEC again, you must click the Reload button.
To cancel loading of a page within the VEC, click the Cancel Loading button while the page is loading. The page will not load in the VEC for this activity during the current editing session.
To continue managing experiences in the current activity or to add new modifications, you must click the Reload button.
Training videos
The following videos contain more information about the concepts discussed in this article.
Visual Experience Composer (1 of 2) (7:17)
- Change the content of a page
- Change the layout of a page
Visual Experience Composer (2 of 2) (7:29)
- Rename and duplicate an experience
- Create a redirect experience
- Target an activity to a single URL or a group of URLs
- Create a multi-page activity
- Preview and build experience for responsive websites
- Use overlays to highlight types of elements
Office hours: Visual Experience Composer
This video is a recording of " Office Hours," an initiative led by the Adobe Customer Care team.
- How the VEC works
- How to avoid common issues with the VEC
- Work-around practices you can use with the VEC