Alternativ för Visual Experience Composer

Version Adobe Target Standard/Premium 25.2.1 (17 februari 2015) innehåller en uppdaterad version av Visual Experience Composer (VEC). I den här artikeln förklaras det uppdaterade användargränssnittet och dess alternativ.

IMPORTANT
Det uppdaterade Visual Editing Composer kräver Adobe Experience Cloud Visual Editing Helper-tilläggetsom är tillgängligt på Chrome Web Store.

VEC visas när du skapar eller redigerar en befintlig aktivitet.

Visual Experience Composer (VEC)

Översikt över VEC-gränssnittet

I följande avsnitt beskrivs de alternativ som är tillgängliga i den uppdaterade VEC för en A/B Test-aktivitet. Alternativen varierar beroende på aktivitetstypen.

Panelen Experiences

Panelen Experiences visas i den vänstra listen i VEC.

Panelen Erfarenheter

Du kan visa, skapa, byta namn på eller ta bort upplevelser med panelen Experiences.

Följande alternativ är tillgängliga på panelen Experiences:

  • Visa en upplevelse: Om du vill visa en upplevelse klickar du på önskad upplevelse för att visa den på arbetsytan i Design.
  • Lägg till en upplevelse: Klicka på ikonen Add ( Lägg till ikon ) för att lägga till en ny upplevelse. Konfigurera den nya upplevelsen efter behov.
  • Byt namn på en upplevelse: Klicka på ikonen Rename ( Byt namn ) för att visa dialogrutan Rename Experience. Ange det nya namnet och klicka sedan på Save.
  • Duplicera, ta bort eller omdirigera en upplevelse: Klicka på ikonen More Actions ( ikonen Fler åtgärder ) och välj sedan Duplicate, Delete eller Redirect to URL.

Aktivitetsinställningar/konfiguration

Klicka på ikonen Configure ( ikonen Konfigurera ) som visas ovanpå arbetsytan i Design för att visa aktivitetsegenskapsmenyn.

Alternativ för aktivitetskonfigurationer

Följande alternativ är tillgängliga:

  • Properties: Tilldela egenskaper till aktiviteten eller ta bort egenskaper från aktiviteten. Properties är en (Target Premium) funktion. Mer information finns i Företagsanvändarbehörigheter.
  • Page Delivery: Inkludera samma upplevelse på liknande sidor på din webbplats. Använd en sidmall för att strukturera sidorna, eller om sidorna innehåller liknande element, för att testa variationer i liknande strukturerade sidelement eller i hela domänen. Mer information finns i Inkludera samma upplevelse på liknande sidor.
  • Site Preferences: Konfigurera platsinställningarna för att ange hur CSS-väljare ska genereras i Target. Mer information finns i CSS-väljare i Konfigurera Visual Experience Composer.
  • Lägg till ytterligare sidor: Lägg till ytterligare sidor i aktiviteten för att skapa en flersidig aktivitet som gör att du kan skapa en artikel över flera sidor, med en design som är specifik för varje sida. Mer information finns i Flersidig aktivitet.
  • En målgrupp: Använd en målgrupp för aktiviteten.
  • Flera målgrupper: Tilldela flera målgrupper till aktiviteten. Klicka på ikonen Lägg till målgrupper ( ikonen Lägg till ) och välj en eller flera målgrupper i listan. Du kan också kombinera målgrupper eller skapa en ny målgrupp från dialogrutan Add Audiences.

Design/Browse lägen

Använd de Design/Browse-reglage som visas ovanpå arbetsytan för att växla mellan design- och bläddringsläge.

Designa och bläddra bland växlar

Använd läget Browse för att navigera på webbplatsen och för att välja den vy eller sida som du vill uppdatera. Växla tillbaka till läget Design om du vill lägga till eller redigera dina ändringar.

Undo/Redo

Du kan ångra ändringar som gjorts genom att klicka på ikonen Undo ( Ångra-ikonen ).

Ångra-ikonen i VEC

Om du vill göra om en åtgärd expanderar du knappgruppen Ångra/Redo och väljer Redo.

Panelen Components

Du kan lägga till ett antal komponenter på webbsidan och redigera dem efter behov med den nya Components-panelen.

Panelen Komponenter

NOTE
Om panelen Modifications visas i det här området i stället för panelen Components klickar du på ikonen Show Components ( Visa komponentikonen ). Ikonen Show Components ( Visa komponentikonen ) och ikonen Show Modifications ( Visa ändringspanel ) fungerar som växlar för att visa lämpliga alternativ.

Så här lägger du till en ny komponent i en upplevelse:

  1. Klicka på den komponent som du vill lägga till för att markera den.

    De tillgängliga komponenterna grupperas i logiska behållare:

  2. Dra komponenten över ett befintligt sidelement på arbetsytan Design.

  3. Välj att infoga komponenten före eller efter det markerade elementet.

    Jämfört med den tidigare VEC-versionen kan du inte ersätta ett markerat element med en komponent.

Panelen Modifications

Om du vill öppna panelen Modifications klickar du på ikonen Show Modifications ( Visa ändringspanelen ) på panelen Components .

Panelen Ändringar

NOTE
Ikonen Show Components ( Visa komponentikonen ) och ikonen Show Modifications ( Visa ändringspanel ) fungerar som växlar för att visa lämpliga alternativ.

Panelen Modifications visar alla ändringar som har gjorts på sidan i Visual Experience Composer (VEC) och gör att du kan göra ytterligare ändringar (till exempel CSS-väljare, Mbox och anpassad kod).

Klicka på ikonen More Options ( ikonen Fler åtgärder ) i panelhuvudet om du vill lägga till en ändring, ta bort alla ändringar eller ta bort alla ogiltiga ändringar. Klicka på Select om du vill utföra gruppåtgärder: Apply to All Pages eller Delete.

Klicka på ikonen More Options ( Fler åtgärder-ikon ) bredvid varje ändring för att visa dess information, ta bort ändringen eller tillämpa ändringen på fler vyer.

Design arbetsyta

På arbetsytan i Design kan du välja visningsrutor, inklusive anpassa till skärmen, Desktop, Tablet, Mobile Landscape och Mobile Portrait. Som standard passar arbetsytan sidan på skärmen tillsammans med de visningsrutor som definieras i avsnittet Administration .

Alternativ för visningsruta

Du kan också zooma in eller ut genom att klicka på lämplig ikon ( ikonen Zooma in eller ikonen Zooma ut ).

När du klickar på ett sidelement på arbetsytan i Design visas de alternativ som är tillgängliga för den elementtypen på en meny. Dessutom visas en DOM-sökväg längst ned på sidan, så att du enkelt kan navigera i sidstrukturen.

De olika Visual Experience Composer-åtgärderna (VEC) grupperas i lämpliga menyalternativ för att göra jobbet snabbare och effektivare:

VEC-alternativmenyn

NOTE
Vilka alternativ som är tillgängliga beror på vilken aktivitetstyp och vilket element du skapar eller redigerar. Mer information om hur du redigerar bilder och erbjudanden i en A/B Test-aktivitet finns i Redigera element med arbetsytan i Designnedan.

Panelen Properties

På panelen Properties kan du ändra egenskaper för markerade element på sidan, oavsett om dessa element är HTML-element eller objekt som är specifika för Target, till exempel rekommendationer eller erbjudanden.

Egenskapspanelen

Klicka på ikonerna överst på panelen för att redigera HTML-kod eller ta bort, duplicera eller dölja element. Ändringarna visas på panelen Modifications.

Panelen Properties kan komprimeras i den högra listen. Klicka på ikonen Show/Hide Properties ( egenskapsikonen ) till höger om panelen för att komprimera eller visa panelen Properties.

Redigera element med arbetsytan Design design

I följande avsnitt visas hur du redigerar bilder och text på arbetsytan i Design. Designarbetsytan och panelerna Komponenter, Ändringar och Egenskaper innehåller kraftfulla verktyg som du kan använda för att enkelt skapa upplevelser för dina aktiviteter.

Bildalternativ

Om du klickar på en bild i en A/B Test-aktivitet ser VEC ut så här:

VEC med bild markerad

Välj komponenter i bildrutan Components till vänster om du vill infoga följande element:

Med menyn längst upp i bilden kan du göra följande:

  • Infoga en länk ( Infoga länkikon ).
  • Ändra bilden ( Välj bildikon ).
  • Lägg till personalisering ( Lägg till Personalization-ikon ).
  • Ta bort bilden ( ikonen Ta bort ).

I rutan Properties till höger kan du konfigurera bildens egenskaper ytterligare.

Med ikonerna längst upp i bildrutan kan du göra följande:

  • Redigera HTML ( Infoga HTML-ikon ). Mer information finns i Redigera HTML nedan.
  • Duplicera bilden ( Duplicera ikon ).
  • Ta bort bilden ( ikonen Ta bort ).
  • Dölj bilden ( Dölj ikon ).

Med alternativen i den högra ramen kan du göra följande:

  • Redigera CSS-klassen.
  • Konfigurera bildens egenskaper (källa, rubrik, alt-text).
  • Redigera länkens URL.
  • Konfigurera bildens storlek (höjd och bredd). Klicka på Show Advanced Options om du vill konfigurera bildens minsta och största storlek, bredd, höjd, spill och objektpassning.
  • Konfigurera bildens position på sidan (absolut, fast, relativ, statisk eller klisterkänslig).
  • Konfigurera elementets avstånd, inklusive marginal och utfyllnad.
  • Konfigurera elementets effekter (opacitet). Klicka på Show Advanced Options om du vill konfigurera värdena för sepia, gråskala, kontrast, intensitet och oskärpa i bilden. Du kan också invertera eller rotera bilden.
  • Konfigurera bildens textbundna format.

Textalternativ

Om du klickar på text i en A/B Test-aktivitet ser VEC ut så här:

VEC med markerad text

Välj komponenter i bildrutan Components till vänster om du vill infoga följande element:

Klicka på ikonen Show Modifications ( ikonen Visa ändringar ) för att visa ändringarna av upplevelsen.

Med menyn längst upp i textelementet kan du göra följande:

  • Konfigurera textens egenskaper (rubriknivå, stycke, blockcitat eller fast teckenbredd)
  • Markera textens färg ( ikonen Textfärg )
  • Konfigurera textens attribut (fet, kursiv, understruken eller genomstruken) ( Välj ikonen för textattribut ).
  • Konfigurera textens justering (vänster, mitten, höger, justera) ( Textjusteringsikon ).
  • Infoga en länk ( Infoga länkikon ).
  • Ersätt innehållet med ett HTML-erbjudande, Experience Fragment eller Rekommendation.
  • Redigera HTML ( Infoga HTML-ikon ).
  • Lägg till personalisering ( Lägg till Personalization-ikon ).
  • Ta bort bilden ( ikonen Ta bort ).

På panelen Properties till höger kan du konfigurera textegenskaperna ytterligare.

Med ikonerna längst upp i bildrutan kan du göra följande:

  • Redigera HTML ( Infoga HTML-ikon ). Mer information finns i Redigera HTML nedan.
  • Duplicera texten ( Duplicera ikon ).
  • Ta bort texten ( ikonen Ta bort ).
  • Dölj texten ( Dölj ikon ).

Med alternativen i den högra ramen kan du göra följande:

  • Redigera CSS-klassen.
  • Konfigurera textens bakgrundsfärg och bild.
  • Konfigurera textens typografi (rubrikformat, teckenstorlek, teckenbredd, radhöjd, justering, textfärg, textformat (fet, kursiv, understruken eller genomstruken)).
  • Konfigurera listor, inklusive punktlistor, numrerade listor eller A,B,C.
  • Välj kantfärg.
  • Konfigurera textrutans storlek (höjd och bredd). Klicka på Show Advanced Options om du vill konfigurera textrutans minsta och största storlek, bredd, höjd, spill och objektpassning.
  • Konfigurera textrutans position på sidan (absolut, fast, relativ, statisk eller klisterkänslig) och ange antalet pixlar uppifrån, till höger, nedåt och till vänster.
  • Konfigurera elementets avstånd, inklusive marginal och utfyllnad.
  • Konfigurera elementets effekter (opacitet). Klicka på Show Advanced Options om du vill konfigurera värdena för sepia, gråskala, kontrast, intensitet och oskärpa i bilden. Du kan också invertera eller rotera texten.
  • Konfigurera textbundna format.

Redigera HTML

Förutom HTML-kod kan du redigera och injicera anpassad JavaScript.

Flera formateringsalternativ för formaterad text är tillgängliga när du redigerar text och HTML för A/B- och Experience Targeting-aktiviteter. Du kan välja ett teckensnitt, välja ett teckensnittsformat, ändra textjustering och andra standardalternativ för textformatering. När du ändrar HTML kan du växla mellan kodvyn och redigeringsvyn för HTML.

Följande HTML5-taggar kan kapslas:

Tagg
Tillåtna kapslade taggar
<a>
<h1-h6>, <p>, <ul>, <ol>, <menu>, <div>, <figure>, <figcaption>
<ins>
<h1-h6>, <p>, <ul>, <ol>, <menu>
<del>
<ul>, <ol>, <menu>, <h1-h6>, <p>
<label>
<p>

När du klickar på ett element på sidan visas VEC-alternativmenyn. När du klickar på ett element visas dessutom motsvarande DOM-sökväg längst ned på sidan.

DOM-sökväg

Om du inte ser DOM-sökvägen klickar du på ikonen Show DOM ( Visa DOM-ikon ).

Du kan använda DOM-sökvägen för att snabbt visa information om det markerade elementet (typ, ID och klass) och flytta upp eller ned DOM-sökvägen för att markera det önskade elementet.

Du kan enkelt navigera till alla överordnade, jämställda eller underordnade element inom VEC med DOM-sökvägen.

DOM-sökvägsfunktionen är också tillgänglig när du konfigurerar klickspårning.

recommendation-more-help
3d9ad939-5908-4b30-aac1-a4ad253cd654