Visual Experience Composer bästa praxis och begränsningar

Om du vill aktivera Enhanced Experience Composer på kontonivån klickar du på Administration > Visual Experience Composer och växlar sedan Enable Enhanced Experience Composer till På-positionen.

Om du vill aktivera Enhanced Experience Composer på aktivitetsnivå när du skapar en aktivitet i Visual Experience Composer klickar du på Configure > Page Delivery och växlar sedan Enable Enhanced Experience Composer till På-position.

Problem med att läsa in Enhanced Experience Composer kan åtgärdas genom att du tillåtslista följande IP-adresser. Dessa IP-adresser är för Adobe servrar som används för proxyn Enhanced Experience Composer. De behövs bara för aktivitetsredigering. Besökare på webbplatsen behöver inte tillåtslista dessa IP-adresser.

Mer information finns i EEG läser inte in en intern QA-URL som inte är tillgänglig på offentlig IP i Felsökning av problem med Förbättrad Experience Composer.

Allt som finns omedelbart inuti body-elementet ska ha ett unikt ID. Om nya element infogas i brödtexten och koden flyttas runt, är det lättare att identifiera åtminstone de överordnade elementen.

Target behöver inga ID, men om du använder ID:n blir upplevelserna som skapas med upplevelsedispositionen mer tillförlitliga. Target använder CSS-väljare för att ändra ditt innehåll när upplevelsen levereras. När du redigerar en upplevelse kopplar Visual Experience Composer väljaren till det närmaste överordnade objektet med ett ID-attribut som inte är null till det HTML-element som ändras. Därför är det inte tillrådligt att använda någon mekanism, inklusive JavaScript-bibliotek, som ställer in eller ändrar HTML ID-attribut. Även om dessa ID:n kan vara tillgängliga för Target Experience Composer för att skapa aktiviteter, kanske ID:n som användes när upplevelsen skapades inte är tillgängliga när upplevelsen körs om JavaScript ändrar ID:n. Om ett ID inte är tillgängligt misslyckas väljaren som är förankrad till ID:t.

När du redigerar CSS-klasser i Visual Experience Composer kan det vara bra att göra det enkelt att identifiera klasserna med hjälp av beskrivande klassnamn. Detta säkerställer att du redigerar rätt CSS-klasser och att sidorna visas som förväntat.

Använd inte CSS-egenskapen !important när du döljer eller tar bort element.

Om CSS-egenskapen !important finns med åsidosätts de ändringar som görs av target.js under leveransen av webbplatsens CSS-regler.

<a>Anchor Text</a>

ELLER

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

Om du till exempel har vidtagit två åtgärder:

• En klass har lagts till i Element 1
• Redigerade HTML för Element 1

Varje ändring skapar ett nytt element i VEC. Eftersom den andra åtgärden ändrar element 1 har den andra åtgärden inte längre något att ändra om du tar bort element 1, så ändringen fungerar inte längre.

Om du lägger till ett element med text och sedan redigerar elementet med annan text i en separat åtgärd, visas båda åtgärderna som separata element i kodredigeraren. När du redigerade elementet skapade du ett nytt element som ändrar det ursprungliga elementet som du skapade och som innehåller den redigerade texten. Om du sedan tar bort det ursprungliga elementet kommer den redigerade texten inte att kunna hitta det element som redigerades och kommer inte att visas. Det andra elementet finns kvar i listan med element, men det påverkar inte sidan eftersom elementet det ändras inte längre finns.

Se Elementväljare i Visual Experience Composer.

• Använd <b> i stället för <strong> för fetstil.
• Använd <i> i stället för <em> för kursiv text.

<strong>- och <em>-taggar kan ge oväntade resultat.

När en åtgärd (Redigera HTML) utförs på sidkomponenter (t.ex. skjutreglage, karuseller) kan leveransen visas som bruten. VEC utför åtgärden efter att sidkomponenten har instansierats av JavaScript.

När sidans innehåll levereras till besökare tillämpas åtgärden innan komponenten instansieras. På grund av detta kan den här komponentens funktionalitet sluta fungera vid leveranstillfället. Funktionaliteten beror på vilken typ av skript som används på den här sidan för att definiera komponenten.

Om du testar leveransen och den fungerar första gången är det inte säkert att den kommer att fortsätta fungera. Det kan finnas (eller inte vara) ett konkurrenstillstånd.

• Om det finns ett tävlingsvillkor fungerar leveransen ibland.
• Om det inte finns något tävlingsvillkor fungerar alltid leveransen.

Testa sidan flera gånger för att säkerställa att leveransen fungerar som förväntat.

Du kan t.ex. inte ange text i kundvagnen som mål i VEC om koden är som följer:

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

I det här exemplet är hela ankarelementet markerat i VEC, vilket påverkar andra element negativt om mål utförs.

Om du till exempel vill öppna www.abc.com används följande URL-parametrar:

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

Med de här parametrarna kan du redigera i en iframe.

Kontrollera att webbplatsen läses in som förväntat när du har lagt till parametrar som dessa.

Stäng av felsökningstekniker för iframe på din webbplats och kontrollera om webbplatsen öppnas som förväntat i en iframe på en dummy-sida. Exempel:

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

Om ett element som är markerat för klickspårning ordnas om ändras sökvägarna för de omordnade elementen. Det innebär att elementet på den plats där det ursprungliga elementet fanns innan det sorterades om är det vars klick spåras.

Detta beror på att både koden för att leverera aktivitetsinnehållet och koden för att spåra klickningar ingår i en del kod som levereras till sidan. Om du bläddrar till en annan sida och ställer in klickspårning skickas aktivitetsinnehållskoden och klickspårningskoden till den sidan. Om klickspårningssidan har en liknande sidstruktur som den sida där testet körs, kan testinnehållet också visas på klickspårningssidan.

Om sidan innehåller:

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

Den yttre diven ska inte väljas i en upplevelse eftersom mbox som är hårdkodad på sidan fortfarande anropar Target och får ett svar. Detta svar stör det svar som är avsett för det större sidelementet.

På grund av uppdaterade V3-manifestprinciper i Google Chrome kan tillägg inte längre ändra den ursprungliga DOM-filen innan den tolkas av webbläsaren. Därför kan vissa säkerhetsskript, som implementeringar av iframe-busting, blockera sidor från att läsas in i VEC.

För att säkerställa kompatibilitet bör dessa skript inaktiveras villkorligt när sidan läses in inuti iframe Target. Den här processen kan utföras på ett säkert sätt genom att kontrollera om objektet window.adobeVecExtension finns, vilket injiceras av Target under VEC-inläsning.

Följande kodfragment är exempel på iframe-busting-kod som kan leda till att webbsidan inte läses in i VEC:

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

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

En enkel kontroll kan användas för att verifiera när en webbsida är inbäddad i Target. Ett kodfragment ska se ut så här:

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

Om sidan till exempel innehåller en karusell med sex bilder och du vill byta ut en bild mot den andra bilden i karusellen, fungerar inte åtgärden Change Image.

Du kan lösa problemet genom att välja den överordnade behållaren och använda åtgärden Edit HTML för att redigera HTML för karusellen för att uppdatera bildkällan för den önskade bilden.

Skriptet körs inom omfånget target.js efter att sidan har lästs in. Därför går det inte att komma åt variabeln eller funktionen som deklarerats lokalt utanför skriptblocket.

Felaktigt:

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

Korrekt:

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

Lägg till ett ankarpunktselement i diven customHeaderMessage med lite dummy-text:

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

Välj den här diven med åtgärden Insert Element om du vill infoga en bild som en jämställd bild i den här dummy-texten div.

När bilden har infogats ser den ut så här:

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

Ta bort det tomma textintervallet.