The Adobe Target Visual Experience Composer (VEC) Helper browser extension for Google Chrome lets you load websites reliably within the VEC to rapidly author and QA web experiences.
The VEC Helper browser is a Chrome extension. This extension is not necessary when using Mozilla Firefox.
A SW is a web technology that can be used to intercept requests for the domain they are installed on by a web page. The SW survives the page visit and activates itself on subsequent visits. The SW decides which requests go through and which ones are intercepted and served from a cache instead.
The SW can control the caching; can cache the web page itself, static resources like JS, CSS, IMG, AJAX requests, their contents, and their response headers, including the ones that our Target VEC Helper extension tries to remove, like X-Frame-Options: SAMEORIGIN, CSP (Content-Security-Policy), or Set-Cookie.
Unfortunately, the Chrome extension APIs that intercept web requests don’t receive the requests that were intercepted and handled by a SW. Therefore, the extension can’t fix the headers and the cookies if the web page request was served from a cache by a SW because the web page won’t load inside the VEC because of the X-Frame-Options or CSP headers that were also cached.
As a potential workaround, you can disable Service Workers from the Chrome Developer Tools > Application tab, then to enable the “Bypass for network” checkbox under the Service Workers section.
The VEC Helper browser extension for Chrome solves site-loading issues for which customers now rely on the Target Enhanced Experience Composer or third-party extensions, such as Requestly.
All iframe busting headers, such as X-Frame-Options and Content-Security-Policy, are implicitly removed from the website. There is no more need to create complicated Requestly rules.
Note that using the Enhanced Experience Composer (EEC), the extension does not inject at.js, but the SameSite Cookie functionality is still present. To inject at.js on the webpage, turn off the EEC.
Mobile viewports are supported even without the Enhanced Experience Composer (EEC).
Customers new to Target can use the extension to experiment with Target even if their IT developers have not yet implemented Target on their websites.
Partners servicing multiple customers’ websites and Target accounts now have one simple mechanism to support VEC loading, instead of managing multiple rules in third-party tools.
Navigate to the Adobe Target VEC Helper browser extension in the Chrome Web Store.
Click Add to Chrome > Add Extension.
Open the VEC in Target.
To use the extension, click the VEC Helper browser extension icon ( ) in your Chrome browser’s toolbar while in the VEC or QA Mode.
The following illustration shows the VEC Helper with the Inject Target Libraries setting enabled:
The following illustration shows the VEC Helper asking you whether you want it to inject Target libraries in the page to enable authoring:
(Conditional) Slide the Cookies toggle to the “on” position to automatically add the
SameSite=None attribute browser fix.
For more information on the
SameSite=None attribute browser fix, see “How do the recently announced Google Chrome SameSite cookie enforcement policies impact the VEC and EEC?” in Troubleshooting Issues Related to the Visual Experience Composer and Enhanced Experience Composer.
The Inject Target libraries flag in the extension is OFF by default. You can enable this flag if you want to use the VEC on a site that has not yet been implemented for Target.
This flag is a global setting. The flag is enabled or disabled for all websites opened in the VEC. So, for example, if you set this flag to “on” and open a website that is already implemented with at.js, you receive a message informing you that at.js is already loaded. Adobe anticipates that most customers already have at.js implemented on their pages and use the default setting of “off.”
The extension loads the latest version of at.js that is available from the Target UI in Administration > Implementation.
When using the extension to inject at.js while in QA Mode, you must have another Chrome tab open. This Chrome tab must be authenticated to the same Adobe Experience Cloud Organization in which you created the activity.
The following messages help keep you informed: