Visual Experience Composer helper extension

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.

Reasons why some websites might not open reliably in the VEC

• The website has strict security policies.
• The website is in an iframe.
• The at.js library is not yet implemented on the website.
• The customer’s QA and/or stage site is not available to the outside world (the site is internal).
• There are some current limitations when trying to use the VEC to open a website that is using Service Workers (SW).

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.

• You are using Google Chrome 80+ with enhanced SameSite cookie enforcement policies. For more information, see How do the recently announced Google Chrome SameSite cookie enforcement policies impact the VEC and EEC?

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.

Benefits of using the VEC Helper extension

• 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.

• If a webpage does not yet contain the Target at.js JavaScript library, you can use the extension to inject the library so you can author experiences for the website. You can then create activities and QA them using preview links.

  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.

Obtain and install the VEC Helper browser extension

1. Navigate to the Adobe Target VEC Helper browser extension in the Chrome Web Store.

2. Click Add to Chrome > Add Extension.

3. Open the VEC in Target.

4. To use the extension, click the VEC Helper browser extension icon ( ) in your Chrome browser’s toolbar while in the VEC or QA Mode.

5. (Conditional) Slide the Inject Target Libraries toggle to the “on” position if the webpage does not yet contain the Target at.js JavaScript library.

   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:

   

6. (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.

Notes

• 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:

  • If you attempt to load a website using the VEC that fails to load, a message displays suggesting that you install the VEC Helper browser extension.
  • If at.js is not yet implemented on the website, a message displays in the VEC suggesting that you install the extension.
  • If the extension is enabled and is powering the loading, messages display when the extension injects the at.js library (if necessary) or helps open the website reliably within the VEC.