Visual Experience Composer Best Practices und Einschränkungen

Um die Enhanced Experience Composer auf Kontoebene zu aktivieren, klicken Sie auf Administration > Visual Experience Composer und schalten Sie den Enable Enhanced Experience Composer auf Ein um.

Um die Enhanced Experience Composer auf Aktivitätsebene zu aktivieren, während Sie eine Aktivität im Visual Experience Composer erstellen, klicken Sie auf Configure > Page Delivery und schalten Sie den Enable Enhanced Experience Composer auf Ein um.

Probleme beim Laden des Enhanced Experience Composer können durch die Zulassungsauflistung der folgenden IP-Adressen behoben werden. Diese IP-Adressen sind für Adobe Server bestimmt, die für den Enhanced Experience Composer-Proxy verwendet werden. Sie werden nur für die Bearbeitung der Aktivitäten benötigt. Auf die Zulassungsliste setzen Besucherinnen und Besucher Ihrer Site benötigen diese IP-Adressen nicht.

Weitere Informationen finden Sie unter The EEC will not load an internal QA URL that is not accessible on public IP in Fehlerbehebung bei Problemen mit Enhanced Experience Composer.

Alles, was sich unmittelbar innerhalb des Body-Elements befindet, muss über eine eindeutige ID verfügen. Wenn neue Elemente in den Body aufgenommen werden und Code verschoben wird, verfügen wenigstens die übergeordneten Elemente über eine einfachere Erkennungsmethode.

Target erfordert keine IDs, aber die Verwendung von IDs erhöht die Zuverlässigkeit von Erlebnissen, die mit Experience Composer erstellt werden. Target verwendet CSS-Selektoren, um Ihren Inhalt zu ändern, wenn das Erlebnis bereitgestellt wird. Wenn Sie ein Erlebnis bearbeiten, verankert die Visual Experience Composer den Selektor am nächsten Vorgänger mit einem ID-Attribut ungleich null im geänderten HTML-Element. Es wird daher nicht empfohlen, einen Mechanismus zu verwenden, der HTML-ID-Attribute festlegt oder ändert, einschließlich JavaScript-Bibliotheken. Obwohl diese IDs dem Target Experience Composer möglicherweise für die Aktivitätserstellung zur Verfügung stehen, ist die ID, die bei der Erstellung des Erlebnisses verwendet wurde, möglicherweise bei der Ausführung des Erlebnisses nicht verfügbar, wenn JavaScript die ID ändert. Ist eine ID nicht verfügbar, tritt bei dem mit der ID verankerten Selector ein Fehler auf.

Beim Bearbeiten von CSS-Klassen in der Visual Experience Composer ist es hilfreich, die Klassen mithilfe beschreibender Klassennamen einfach zu identifizieren. Dadurch wird sichergestellt, dass Sie die richtigen CSS-Klassen bearbeiten und Ihre Seiten wie erwartet angezeigt werden.

Verwenden Sie nicht die CSS-Eigenschaft !important, wenn Sie Elemente ausblenden oder entfernen.

Wenn die !important CSS-Eigenschaft vorhanden ist, werden von target.js während des Versands vorgenommene Änderungen von den CSS-Regeln der Site überschrieben.

<a>Anchor Text</a>

ODER-

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

Wenn Sie beispielsweise zwei Aktionen durchgeführt haben:

• Hinzufügen einer Klasse zu Element 1
• Bearbeiten des HTML für Element 1

Jede Änderung erstellt ein neues Element in VEC. Da die zweite Aktion Element 1 bearbeitet, kann in der zweiten Aktion nichts mehr geändert werden, wenn Sie Element 1 löschen. Daher funktioniert die Änderung nicht mehr.

Mit anderen Worten: Wenn Sie ein Element mit Text hinzufügen und dieses Element in einer anderen Aktion mit einem anderen Text bearbeiten, dann zeigt der Code-Editor beide Aktionen als separate Elemente. Bei der Bearbeitung des Elements haben Sie ein neues Element erstellt, das das ursprünglich von Ihnen erstellte Element ändert und den bearbeiteten Text enthält. Wenn Sie dann das ursprüngliche Element löschen, kann der bearbeitete Text das Element nicht finden, das bearbeitet wurde, und wird folglich nicht angezeigt. Das zweite Element bleibt in der Liste der Elemente erhalten, doch es hat keine Auswirkung auf die Seite, weil das Element, das es ändert, nicht mehr vorhanden ist.

Siehe Element-Selektoren, die im Visual Experience Composer verwendet werden.

• Für fett gedruckten Text verwenden Sie <b> anstelle von <strong>.
• Für kursiv gedruckten Text verwenden Sie <i> anstelle von <em>.

Die Tags <strong> und <em> können zu unerwarteten Ergebnissen führen.

Wenn eine Aktion (HTML bearbeiten) für Seitenkomponenten (wie Schieberegler, Karussells usw.) ausgeführt wird, kann der Versand fehlerhaft aussehen. Der VEC führt die Aktion durch, nachdem die Seitenkomponente von JavaScript instanziiert wurde.

Wird der Seiteninhalt jedoch für Besucher bereitgestellt, wird die Aktion vor Initialisierung der Komponente durchgeführt. Somit kann die Funktion der Komponente zum Zeitpunkt der Bereitstellung beschädigt oder in Ordnung sein. Die Funktion der Komponente hängt mit dem auf der Seite verwendeten Skript zusammen, das die Komponente definiert.

Sollten Sie die Bereitstellung prüfen und feststellen, dass sie beim ersten Versuch einwandfrei funktioniert, ist dies keine Garantie dafür, dass sie das auch weiterhin tut. Es besteht möglicherweise eine Gleichzeitigkeitsbedingung.

• Wenn eine Wettlaufsituation vorliegt, funktioniert die Bereitstellung gelegentlich.
• Wenn keine Wettlaufbedingung vorliegt, funktioniert die Lieferung immer.

Prüfen Sie Ihre Seite mehrmals, um sicherzustellen, dass die Bereitstellung wie erwartet funktioniert.

Beispielsweise können Sie im VEC nicht auf Einkaufswagen-Text zielen, wenn Ihr Code wie folgt aussieht:

<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 diesem Beispiel wird das gesamte Ankerelement im VEC ausgewählt, was sich bei der Zielgruppenbestimmung negativ auf andere Elemente auswirkt.

Um beispielsweise www.abc.com zu öffnen, werden die folgenden URL-Parameter verwendet:

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

Diese Parameter ermöglichen die Bearbeitung in einem iframe.

Stellen Sie sicher, dass die Webseite wie erwartet lädt, nachdem solche Parameter hinzugefügt wurden.

Deaktivieren Sie iframe-Busting-Techniken auf Ihrer Website und überprüfen Sie, ob die Website wie erwartet innerhalb eines iframe auf einer Dummy-Seite geöffnet wird. Beispiel:

<!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>

Wenn ein für Klick-Tracking gekennzeichnetes Element neu angeordnet wird, ändern sich die Pfade der neu angeordneten Elemente. Infolgedessen ist das Element an dem Ort, an dem sich das Originalelement vor der Neuanordnung befunden hat, das Element, dessen Klicks verfolgt werden.

Dies passiert, weil sowohl der Code zur Bereitstellung des Aktivitäteninhalts als auch der Code für das Klick-Tracking in einem einzigen Code enthalten ist, der für die Seite bereitgestellt wird. Wenn Sie zu einer anderen Seite navigieren und Klick-Tracking einrichten, dann werden der Aktivitätsinhalts-Code und der Klick-Trackingcode für diese Seite bereitgestellt. Wenn die Klick-Tracking-Seite eine ähnliche Struktur aufweist wie die Seite, auf der der Test ausgeführt wird, dann kann der Testinhalt auch auf der Klick-Tracking-Seite erscheinen.

Wenn Ihre Seite zum Beispiel Folgendes enthält:

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

Das äußere div-Element sollte in einem Erlebnis nicht ausgewählt werden, da die auf der Seite hartcodierte Mbox weiterhin einen Aufruf an Target ausführt und eine Antwort erhält. Diese Antwort beeinträchtigt die für das größere Seitenelement vorgesehene Antwort.

Aufgrund aktualisierter V3-Manifestrichtlinien in Google Chrome können Erweiterungen das ursprüngliche DOM nicht mehr ändern, bevor es vom Browser geparst wird. Daher können bestimmte Sicherheitsskripte - z. B. iframe-busting-Implementierungen - das Laden von Seiten im VEC blockieren.

Um die Kompatibilität zu gewährleisten, sollten diese Skripte bedingt deaktiviert werden, wenn die Seite innerhalb des Target iFrames geladen wird. Dieser Vorgang kann sicher durchgeführt werden, indem überprüft wird, ob das window.adobeVecExtension Objekt vorhanden ist, das während des Ladevorgangs des VEC von Target injiziert wird.

Die folgenden Code-Snippets sind Beispiele für iframe-Busting-Code, der dazu führen kann, dass Web-Seiten im VEC nicht geladen werden:

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

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

Mit einer einfachen Prüfung kann überprüft werden, ob eine Web-Seite in Target eingebettet ist. Ein Code-Snippet sollte wie folgt aussehen:

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

Wenn Ihre Seite beispielsweise ein Karussell mit sechs Bildern enthält und Sie ein Bild mit dem zweiten Bild des Karussells austauschen möchten, funktioniert die Change Image nicht.

Um dieses Problem zu umgehen, wählen Sie den übergeordneten Container aus und bearbeiten Sie mit der Aktion Edit HTML die HTML des Karussells, um die Bildquelle des gewünschten Bildes zu aktualisieren.

Das Skript wird im Rahmen von target.js ausgeführt, nachdem die Seite geladen wurde. Somit kann auf lokal angegebene Variablen oder Funktionen von außen nicht zugegriffen werden.

Falsch:

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

Richtig:

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

Fügen Sie ein Ankerelement innerhalb des div „customHeaderMessage“ sowie Platzhaltertext ein:

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

Wählen Sie dieses div mit der Aktion Insert Element aus, um ein Bild als gleichrangiges Element dieses Platzhalter-Text-div einzufügen.

Nach Einfügen des Bilds sollte es wie folgt aussehen:

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

Löschen Sie den Platzhaltertext.