Adobe

Enabling Target Visual Experience Composer in AEM

Target Setup

Adobe Target’s Visual Experience Composer(VEC) is a powerful editor for Digital Marketing Teams to easily create and test personalized experiences in the site context. This tool can be used by teams who are not interested in using the Target in AEM integration either due to business processes or team preferences.
Visual Experience Composer makes creating offers as easy as clicking on an element and selecting the desired action:
 
Editing Offers to Adobe Target Visual Experience Composer
 
However, getting Visual Experience Composer integrated into a website can pose some particular challenges. In the simplest use cases, integrating Adobe Target’s Visual Experience Composer can be as simple as setting up an AEM Cloud Configuration, but depending on your AEM setup, more configuration may be required.
 

The Challenge with Visual Experience Composer

 
Similar to AEM’s TouchUI, Visual Experience Composer uses an iframe to frame in the webpage being edited and then draws the editing controls over the top.
 
The Structure of the Adobe Target Visual Experience Composer
The red area within the VEC is the iframe of the web page.
This is an issue as most AEM websites (and in websites general) use the X-Frame-Options header to prevent an attack vector called clickjacking. In this technique, an attacker will iframe in a copy of your site and overlay a transparent element over top to capture the user’s interactions. This could include passwords, credit cards or any personal information.
When Adobe Target’s Visual Experience Composer attempts to load against a site with the X-Frame-Options header, the browser will block the request just as if it were coming from an attacker and you’ll see an error like this one:
 
Error Message when the Visual Experience Composer is Blocked
Error: Your website domain (ISP) is blocking the Enhanced Experience Composer. You can whitelist the Enhanced Experience Composer's IP addresses or turn off Enhanced Experience Composer in Configure > Page Delivery menu.
 
Note – Adobe’s recommendation to whitelist the VEC, this applies if you are trying to use Target in a non-public site. If your site is behind a VPN or in a private network, you will need to whitelist Target through the VPN, but if you see this error on a public site, the X-Frame-Options header is the likely culprit.
 

Enabling Visual Experience Composer’s Frames

 
To enable VEC to use its frames but still keep the clickjacking protections of the X-Frame-Options header, add the following directive into your Dispatcher’s Apache conf file. Ideally, you will want to do this in a single vhost as to not affect other sites.
 

Header append X-Frame-Options "ALLOW-FROM https://[AMC_ID].marketing.adobe.com/"

 
The value for [AMC_ID] is your company’s Adobe Marketing Cloud Company ID. You can retrieve this from the URL you use to access Adobe Target, so if you use https://mycompany.marketing.adobe.com/target, the [AMC_ID] would be mycompany.
To test if the headers are correct, open a URL on your site and add the query string:
 

?mboxEdit=1&mboxDisable=1

 
Then open up your browser developer tools and inspect the headers on the network response to make sure the X-Frame-Options header is set correctly to ALLOW-FROM https://[AMC_ID].marketing.adobe.com/.
Assuming the header is set correctly, you should now be able to load any page on the site using VEC.
 

Still Not Working?

 
If it still doesn’t work and you are using Adobe Managed Services or have a somewhat paranoid sysadmin, you may find that no matter what changes you make in Apache, the URLs used by VEC may still have the X-Frame-Options header set to SAMEORIGIN.
If you see this behavior, Sling may be setting this header. To check, log into the publish server and open the OSGi console to http://[server:port]/system/console/configMgr/org.apache.sling.engine.impl.SlingMainServlet, this should open the configuration for the Apache Sling Main Servlet.
 
The Sling Main Servlet OSGi Config
 
If you see a configuration like the one above, update the value to:
 

X-Frame-Options=ALLOW-FROM https://[AMC_ID].marketing.adobe.com/

 
As soon as you save this setting, the publisher should no longer send the incorrect heading and VEC should start working.
Hopefully, these steps help you get Adobe Target integrated with AEM so you can leverage the full power of the Adobe Marketing Cloud. Please leave a comment if you have any other integration tips or questions.
 

About the Author

Dan is a certified Adobe Digital Marketing Technologist, Architect, and Advisor, having led multiple successful digital marketing programs on the Adobe Experience Cloud. He's passionate about solving complex problems and building innovative digital marketing solutions. Dan is a PMC Member of the Apache Sling project, frequent Adobe Beta participant and committer to ACS AEM Commons, allowing a unique insight into the cutting edge of the Adobe Experience Cloud platform.

More from this Author

Thoughts on “Enabling Target Visual Experience Composer in AEM”

  1. Daniel,
    Interesting, I generally rely on MDN as well, but we’re using this successfully with Google Chrome… I wonder if it’s just supported in a newer version of Chrome.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Subscribe to the Weekly Blog Digest:

Sign Up