Visual Experience Composer aanbevolen procedures en beperkingen

Als u Enhanced Experience Composer op accountniveau wilt inschakelen, klikt u op Administration > Visual Experience Composer en schakelt u de Enable Enhanced Experience Composer -schakelaar in op de Aan-positie.

Als u Enhanced Experience Composer op activiteitsniveau wilt inschakelen terwijl u een activiteit maakt in de Visual Experience Composer , klikt u op Configure > Page Delivery en schakelt u vervolgens de Enable Enhanced Experience Composer -schakelaar in op de Aan-positie.

Problemen bij het laden van de Enhanced Experience Composer kunnen worden opgelost door de volgende IP-adressen te voegend op lijst van gewenste personen. Deze IP-adressen zijn bedoeld voor Adobe -servers die worden gebruikt voor de Enhanced Experience Composer -proxy. Ze zijn alleen vereist voor het bewerken van activiteiten. Bezoekers van uw site hebben deze op de lijst met gewenste personen staan IP-adressen niet nodig.

Voor meer informatie, zie EEG geen interne QA URL laden die niet op openbare IPin kwesties van het Oplossen van problemen met betrekking tot de Verbeterde Composer van de Ervaring toegankelijk is.

Om het even welk onmiddellijk binnen het lichaamselement zou een unieke identiteitskaart moeten hebben. Als er nieuwe elementen in het lichaam worden geïnjecteerd en de code zich verplaatst, kunnen de bovenliggende elementen op zijn minst gemakkelijker worden herkend.

Target vereist geen id's, maar het gebruik van id's verhoogt de betrouwbaarheid van ervaringen die met de ervaringscomposer zijn gemaakt. Target gebruikt CSS-kiezers om uw inhoud te wijzigen wanneer de ervaring wordt opgeleverd. Wanneer u een ervaring bewerkt, verankert Visual Experience Composer de kiezer aan de dichtstbijzijnde voorouder met een niet-null-id-kenmerk voor het HTML-element dat wordt gewijzigd. Het is daarom niet aan te raden een mechanisme te gebruiken, waaronder JavaScript-bibliotheken, waarmee HTML-id-kenmerken worden ingesteld of gewijzigd. Hoewel deze id's beschikbaar kunnen zijn voor de Target Experience-composer voor het maken van activiteiten, is de id die werd gebruikt toen de ervaring werd gemaakt mogelijk niet beschikbaar wanneer JavaScript id's wijzigt. Als er geen id beschikbaar is, mislukt de kiezer die aan de id is verankerd.

Wanneer u CSS-klassen bewerkt in de Visual Experience Composer , is het handig om de klassen eenvoudig te identificeren door beschrijvende klassennamen te gebruiken. Zo kunt u ervoor zorgen dat u de juiste CSS-klassen bewerkt en dat de pagina's er naar behoren uitzien.

Gebruik de CSS-eigenschap !important niet wanneer u elementen verbergt of verwijdert.

Als de CSS-eigenschap !important aanwezig is, worden wijzigingen die door target.js tijdens de levering worden aangebracht, overschreven door de CSS-regels van de site.

<a>Anchor Text</a>

OF

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

Als u bijvoorbeeld twee handelingen hebt uitgevoerd:

• Een klasse toegevoegd aan Element 1
• HTML for Element 1 bewerkt

Elke verandering leidt tot een nieuw element in VEC. Omdat de tweede actie Element 1 wijzigt, als u Element 1 schrapt, heeft de tweede actie niet meer om het even wat te wijzigen, zodat werkt de verandering niet meer.

Met andere woorden, als u een element met tekst toevoegt, dan in een afzonderlijke actie bewerkt u dat element met verschillende tekst, toont de code redacteur beide acties als afzonderlijke elementen. Wanneer u het element hebt bewerkt, hebt u een nieuw element gemaakt dat het oorspronkelijke element wijzigt dat u hebt gemaakt en dat de bewerkte tekst bevat. Als u vervolgens het oorspronkelijke element verwijdert, kan de bewerkte tekst het bewerkte element niet vinden en wordt deze niet weergegeven. Het tweede element blijft in de lijst met elementen, maar heeft geen invloed op de pagina omdat het element dat wordt gewijzigd, niet meer bestaat.

Zie die Selectors van het Element in Visual Experience Composer worden gebruikt.

• Gebruik <b> in plaats van <strong> voor vette tekst.
• Gebruik <i> in plaats van <em> voor cursieve tekst.

<strong> - en <em> -tags kunnen leiden tot onverwachte resultaten.

Wanneer een handeling (HTML bewerken) wordt uitgevoerd op paginacomponenten (zoals schuifregelaars, carrousels enzovoort), kan de aflevering verbroken lijken. VEC voert de actie uit nadat de paginacomponent door JavaScript is geconcretiseerd.

Wanneer de inhoud van de pagina echter aan bezoekers wordt afgeleverd, wordt de actie toegepast voordat de component wordt geïnstantieerd. Hierdoor kan de functionaliteit van deze component op het moment van levering al dan niet worden onderbroken. Functionaliteit is afhankelijk van de aard van het script dat op deze pagina wordt gebruikt om de component te definiëren.

Als u op levering test en het de eerste keer werkt, is het niet gewaarborgd dat het zal blijven werken. Er kan (of niet) een rasvoorwaarde zijn.

• Als er een rasvoorwaarde is, werkt de levering periodiek.
• Als er geen rasvoorwaarde is, werkt de levering altijd.

Test de pagina meerdere keren om te controleren of de levering naar behoren werkt.

U kunt de tekst Winkelwagentje bijvoorbeeld niet als doel instellen in de VEC als de code er als volgt uitziet:

<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 dit voorbeeld wordt het gehele ankerelement geselecteerd in de VEC, wat andere elementen nadelig beïnvloedt als het richten wordt uitgevoerd.

Als u bijvoorbeeld www.abc.com wilt openen, worden de volgende URL-parameters gebruikt:

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

Deze parameters maken het bewerken in een iframe mogelijk.

Zorg ervoor dat uw website naar behoren wordt geladen nadat u dergelijke parameters hebt toegevoegd.

Schakel iframe-opbouwtechnieken op uw website uit en controleer of de website wordt geopend zoals u had verwacht in een iframe op een dummypagina. Bijvoorbeeld:

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

Als een element dat is gemarkeerd voor klikken bijhouden opnieuw wordt gerangschikt, worden de paden van de opnieuw gerangschikte elementen gewijzigd. Het resultaat is dat het element op de locatie waar het oorspronkelijke element zich bevond voordat het werd herschikt, het element is waarvan de klikken worden bijgehouden.

Dit komt voor omdat zowel de code om de activiteiteninhoud te leveren als de code om kliks te volgen in één stuk van code inbegrepen is die aan de pagina wordt geleverd. Als u naar een andere pagina bladert en instelt klikt op bijhouden, worden de code voor de activiteiteninhoud en de code voor het bijhouden van klikken naar die pagina verzonden. Als de pagina voor het bijhouden van klikken een vergelijkbare paginastructuur heeft als de pagina waarop de test wordt uitgevoerd, wordt de testinhoud mogelijk ook weergegeven op de pagina voor het bijhouden van klikken.

Als uw pagina bijvoorbeeld het volgende bevat:

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

De buitenste div moet tijdens een bewerking niet worden geselecteerd omdat de in de pagina gecodeerde mbox nog steeds een aanroep naar Target maakt en een reactie ontvangt. Deze reactie beïnvloedt de reactie voorgenomen voor het grotere paginaelement.

Wegens bijgewerkt V3 Manifest beleid in Google Chrome, kunnen de uitbreidingen originele DOM niet meer wijzigen alvorens het door browser wordt ontleed. Dientengevolge, zouden bepaalde veiligheidsmanuscripten-zoals iframe-het bouwen implementaties-pagina's van het laden in VEC kunnen blokkeren.

Om de compatibiliteit te garanderen, moeten deze scripts voorwaardelijk worden uitgeschakeld wanneer de pagina in het iframe Target wordt geladen. Dit proces kan veilig worden uitgevoerd door te controleren op de aanwezigheid van het window.adobeVecExtension -object, dat door Target tijdens het laden met VEC wordt geïnjecteerd.

De volgende codefragmenten zijn voorbeelden van iFrame-bosting code die tot Web-pagina kan leiden die niet in VEC laadt:

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

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

Met een eenvoudige controle kunt u controleren of een webpagina is ingesloten in Target . Een codefragment moet er als volgt uitzien:

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

Als uw pagina bijvoorbeeld een carrousel met zes afbeeldingen bevat en u een afbeelding wilt omwisselen met de tweede afbeelding van de carrousel, werkt de handeling Change Image niet.

Als tussenoplossing kunt u de bovenliggende container selecteren en de handeling Edit HTML gebruiken om de HTML van de carrousel te bewerken en de afbeeldingsbron van de gewenste afbeelding bij te werken.

Het script wordt uitgevoerd binnen het bereik van target.js nadat de pagina is geladen. Daarom is elke variabele of functie die lokaal is gedeclareerd, niet toegankelijk van buiten het scriptblok.

Onjuist:

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

Correct:

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

Voeg een ankerelement in het div 'customHeaderMessage' met een dummytekst toe:

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

Selecteer dit div-element met de handeling Insert Element om een afbeelding in te voegen als een sibling van dit dummy-tekstdiv.

Na het invoegen van de afbeelding ziet het er als volgt uit:

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

Verwijder het dummytekstbereik.