ÃÛ¶¹ÊÓƵ

To enable the Enhanced Experience Composer at the account level, click Administration > Visual Experience Composer, then toggle the Enable Enhanced Experience Composer switch to the On position.

To enable the Enhanced Experience Composer at the activity level while creating an activity in the Visual Experience Composer, click Configure > Page Delivery, then toggle the Enable Enhanced Experience Composer switch to the On position.

Problems loading the Enhanced Experience Composer can be resolved by allowlisting the following IP addresses. These IP addresses are for ÃÛ¶¹ÊÓƵ servers used for the Enhanced Experience Composer proxy. They are only required for activity editing. Visitors to your site do not need these IP addresses allowlisted.

For more information, see The EEC won’t load an internal QA URL that is not accessible on public IP in Troubleshooting issues related to the Enhanced Experience Composer.

Anything immediately inside the body element should have a unique ID. If new elements are injected into the body and code moves around, at least the parent elements have an easier way to be recognized.

Target does not require IDs, but using IDs increases the reliability of experiences created with the experience composer. Target uses CSS selectors to modify your content when the experience is delivered. When you edit an experience, the Visual Experience Composer anchors the selector to the closest ancestor with a non-null ID attribute to the HTML element being modified. It is, therefore, not advisable to use any mechanism, including JavaScript libraries, that sets or modifies HTML ID attributes. Although those IDs might be available to the Target experience composer for activity creation, if JavaScript modifies IDs, the ID that was used when the experience was created might not be available when the experience runs. If an ID is not available, the selector anchored to the ID fails.

When editing CSS classes in the Visual Experience Composer, it is helpful to make the classes easy to identify by using descriptive class names. This helps to ensure that you edit the right CSS classes, and your pages appear as expected.

Don’t use the !important CSS property when hiding or removing elements.

If the !important CSS property is present, changes made by target.js during delivery is overridden by the site’s CSS rules.

<a>Anchor Text</a>

OR

<a href="/"> <img src=""> </img> </a>

For example, if you have taken two actions:

• Added a class to Element 1
• Edited the HTML for Element 1

Each change creates a new element in the VEC. Because the second action modifies Element 1, if you delete Element 1, the second action no longer has anything to modify, so the change no longer works.

In other words, if you add an element with text, then in a separate action you edit that element with different text, the code editor shows both actions as separate elements. When you edited the element, you created a new element that modifies the original one you created, containing the edited text. If you then delete the original element, the edited text won’t be able to find the element that was edited, and will not display. The second element remains in the list of elements, but it does not affect the page because the element it changes no longer exists.

See Element Selectors Used in the Visual Experience Composer.

• For bold text, use <b> rather than <strong>.
• For italic text, use <i> rather than <em>.

<strong> and <em> tags might cause unexpected results.

When an action (Edit HTML) is performed on page components (such as sliders, carousels, and so on), delivery might appear broken. The VEC performs the action after the page component has been instantiated by JavaScript.

However, when the content of the page is delivered to visitors, the action is applied before instantiation of the component. Because of this, this component’s functionality may or may not break at the time of delivery. Functionality depends on the nature of the script used on his page to define the component.

If you test for delivery and it works the first time, it is not guaranteed that it will continue working. There may (or may not) be a race condition.

• If there is a race condition, delivery works intermittently.
• If there is no race condition, delivery always works.

Test your page multiple times to make sure delivery works as expected.

For example, you cannot target Shopping Cart text in the VEC if your code is like the following:

<a href="https://www.botanicchoice.com/shop.axd/Cart">
   <img alt="Shopping Cart"src="/images/ico-cart.gif"></img>
   Shopping Cart:
   <span id="HeaderCartQtyTotal">
      0
  </span>
  Items
  <span id="HeaderCartPriceTotal"></span>
</a>

In this example, the entire anchor element is selected in the VEC, which adversely affects other elements if targeting is performed.

For example, to open www.abc.com, the following URL parameters are used:

www.abc.com?mboxEdit=1&mboxDisable=1

These parameters enable editing in an iframe.

Make sure your website loads as expected after adding parameters like these.

Turn OFF iframe busting techniques on your website and check whether the website opens as expected within an iframe on a dummy page. For example:

<!DOCTYPE
<html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <iframe src="https://www.homedepot.com"</iframe>
</body>
</html>

If an element marked for click tracking is rearranged, the paths of the rearranged elements are changed. As a result, the element in the location where the original element was before it was rearranged is the one whose clicks are tracked.

This occurs because both the code to deliver the activity content and the code to track clicks is included in one piece of code that is delivered to the page. If you browse to a different page and set up click tracking, then the activity content code and the click tracking code are delivered to that page. If the click-tracking page has a similar page structure to the page where the test is run, then the test content might also appear on the click-tracking page.

For example, if your page contains:

<div>
  <div class="mboxDefault" >
  </div>
  <script>mboxCreate('myMbox');
</div>`

The outer div should not be selected in an experience because the mbox hardcoded in the page still makes a call to Target and receives a response. This response interferes with the response intended for the larger page element.

Due to updated , extensions can no longer modify the original DOM before it is parsed by the browser. As a result, certain security scripts—such as iframe-busting implementations—might block pages from loading in the VEC.

To ensure compatibility, these scripts should be conditionally disabled when the page is loaded inside the Target iframe. This process can be safely done by checking for the presence of the window.adobeVecExtension object, which is injected by Target during VEC loading.

The following code snippets are examples of iframe-busting code that can lead to web page not loading in the VEC:

window.top.location = window.self.location;

top.location.href = self.location.href;

A simple check can be used to verify when a web page is embedded inside Target. A code snippet should look like this:

if(!window.adobeVecExtension) {
    // additional security logic
}

If, for example, your page contains a carousel with six images and you want to swap an image with the second image of the carousel, the Change Image action does not work.

The workaround is to select the parent container and use the Edit HTML action to edit the HTML of the carousel to update the image source of the desired image.

The script is executed within the scope of target.js after the page loads. Therefore, any variable or function that is declared locally is not accessible from outside the script block.

Incorrect:

<script>
  var myVar = 123;
  function myFunc() {
    //
  }
</script>`

Correct:

<script>
  window.myVar = 123;
  window.myFunc = function() {
    //
  };
</script>

Add an anchor element inside the ‘customHeaderMessage’ div with some dummy text:

<a href="#">
<span> Dummy text </span>
</a>

Select this div using the Insert Element action to insert a image as a sibling of this dummy text div.

After image insertion, it looks like:

<a href="#">
<span> Dummy text </span>
<img src=""> This is inserted Image. </img>
</a>

Remove the dummy text span.