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).
• 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, then specify the cookie name and domain.

   

   The following links provide additional information:

   • 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 cookie name is “mbox” and the cookie domain is the second and top levels of the domains from which you serve the mbox. Because it is served from your company’s domain, the cookie is a first party cookie. Example: mycompany.com. For more information, see Adobe Target Cookies in the Experience Cloud Interface User Guide.

Notes

• Your implementation must use the Target at.js library. You cannot use an mbox.js implementation with the extension.

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