Guides
VEC Workflow Guide
A step-by-step walkthrough of building an Adobe Target activity with the Visual Experience Composer, from opening a URL to activating.
End-to-end workflow
Run VEC Preflight
Before opening the VEC, use Experience Lab's VEC Preflight Checker to confirm your page loads in an iframe and has no CSP or X-Frame-Options blockers. Fix any issues before proceeding.
Create a new activity in Adobe Target
Log into Adobe Target → Activities → Create Activity → A/B Test, Experience Targeting, or Multivariate Test. Choose Visual Experience Composer. Enter your page URL and click Create.
All Activities
* Automated Personalization — AP's algorithm controls delivery, which conflicts with Experience Lab's trigger and frequency logic.
* Recommendations — Uses a dedicated criteria-based composer, not the VEC. Custom Code modifications don't apply.
Let the VEC load your page
Target opens your URL in an iframe inside the VEC. If the page fails to load, install the Adobe Experience Cloud Visual Editing Helper Chrome extension — it handles iframes, CSP headers, and cookie issues.
Add a Custom Code modification
In the VEC modifications panel, click the '+' button → Insert After (or Custom Code). This opens a code editor where you'll paste your Experience Lab script.
The code below will be injected in the HEAD section of the page.
* Edit Content — Opens a full-screen code editor. Use this rather than the inline Content box for Experience Lab scripts — the full editor handles long scripts without truncation.
* Modification type defaults to CSS Selector — You must change it to Custom code to unlock the HEAD injection option and the script content area.
Generate your script in Experience Lab
Configure your modal, banner, or countdown in Experience Lab, then copy the generated script from the code output panel.
Saved Presets
* Generate first, paste second — Always configure and copy your script in Experience Lab before switching back to the VEC tab. The clipboard persists, so you can paste immediately into the Custom Code editor without losing your work.
Paste the script into VEC Custom Code
Paste the copied script into the VEC Custom Code editor. Click Save. The preview panel should update to show your experience overlaid on the page.
* Two saves required — The first Save closes the code editor and returns you to the Edit modification form. The second Save commits the modification to the VEC activity. Skipping the second Save means your script won't be part of the activity.
Set targeting and goals
In the Experiences tab, you can click the audience label beneath each experience (defaults to All Visitors) to open the audience picker and assign a specific audience. You can also refine this in the Targeting step — set traffic allocation and define success metrics (typically a click goal or a conversion page view).
For production targeting, create a custom audience in the picker using your Adobe Experience Cloud ECID (Experience Cloud ID). In the Add Audiences dialog, search your Audience Library for an ECID-based segment, or click Create Audience to build one from scratch — this lets you target specific visitor profiles without touching All Visitors traffic.
QA the activity
Use Target's QA links to preview each experience in your browser without affecting live traffic. Check both desktop and mobile. Verify the script fires correctly.
QA URLs let you view an activity's content at any time. You will stay in the experience as you browse to other pages on the site. Install Target's bookmark to exit Activity QA.
Activate
Once QA passes, click Activate. Your activity is live. Monitor the Results tab — Target needs roughly 200 conversions per experience before results reach statistical significance.
Measured by: Page Views
Common pitfalls
Anatomy of a generated script
Every Experience Lab script follows the same structure, regardless of which tool generated it:
<script> (function() { // 1. waitForBody — polls until document.body exists // Ensures safe execution regardless of at.js timing function waitForBody(cb) { if (document.body) return cb(); var t = setInterval(function() { if (document.body) { clearInterval(t); cb(); } }, 50); } // 2. Frequency check — reads/writes localStorage // Returns early if the visitor has already seen this experience function checkFrequency() { /* ... */ } // 3. Main render — injects the DOM element function render() { var el = document.createElement('div'); el.id = 'el-modal-xxxx'; // ... styles and content applied here document.body.appendChild(el); } // 4. Trigger logic — decides when to call render() // Could be immediate, timed, scroll-based, or exit-intent waitForBody(function() { if (!checkFrequency()) return; setTimeout(render, 3000); // example: 3s delay trigger }); })(); </script>
🎯 Need help building your first VEC activity?
Experience Lab can help you set up A/B tests, configure audiences, and write the custom code that goes into your VEC activities — from scratch or on top of an existing implementation.