Visual Experience Composer (VEC)
Information about using the Visual Experience Composer (VEC).
The VEC is 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.
On the Target Setup > Preferences 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.
Certain browsers, such as Firefox, might block a page from displaying in the VEC if the page contains mixed content (for example, a non-secure page in a secure site). If your page does not display, click the icon next to the URL in the browser address bar and click Disable protection on this page. This issue does not affect the display of your pages to site visitors.
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.
Changes to the structure of a page that affect the locations used in an activity created on that page could cause issues with experience editing. If a location has been changed outside the VEC, Target might not be able to find the location where the content was changed.
As you move your mouse around the page, a context-sensitive box follows the cursor, highlighting the elements on the page.
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 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 # button.
Be aware that when custom code or any modifications are made, by choosing to cancel loading within the VEC, you must ensure that your coding or changes are done properly. Ensure that you perform proper QA to ensure that your custom code and any other modifications are delivered as expected.
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.
There is a current known issue with this feature that will be fixed in the next release. For more information, see "Cancel loading of a page within the VEC" on the Known issues and resolved issues page.
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