När du klickar på ett sidelement i Adobe Target Visual Experience Composer (VEC) visar en meny de alternativ som är tillgängliga för den elementtypen. 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 (VEC)-åtgärder grupperas i lämpliga menyalternativ för att göra jobbet snabbare och effektivare:
Vilka alternativ som är tillgängliga beror på vilken typ av aktivitet du skapar eller redigerar.
Följande alternativ är tillgängliga:
Ändra HTML-koden för elementet, till exempel texten för ett textområde, en knapp eller en länk.
Förutom HTML-kod kan du redigera och mata in 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 verksamhet. 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 den avancerade 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> |
Använd färgväljaren för att välja eller konfigurera en bakgrundsfärg. Du kan välja en färgruta och justera den med hjälp av RGB-värden eller färghexkoder. Det röda krysset i färgväljaren gör bakgrunden genomskinlig.
Obs! Det här alternativet är inte tillgängligt för ett element där en bakgrundsbild är inställd.
Använd Styles om du vill visa eller redigera värdet för det markerade elementets befintliga format. Du kan också lägga till ytterligare format.
Så här öppnar du Styles klickar du på ett sidelement i VEC och sedan på Edit > Styles.
The Styles visas till höger om VEC. Panelen innehåller en lista med format som du kan använda för att redigera eller lägga till i det markerade elementet. Med en CSS-redigerare i realtid kan du visa ändringar och lägga till format om du känner dig bekväm med att använda CSS (Cascading Style Sheets) eller om du tar emot kod från utvecklaren.
När du använder olika format kan du alltid återställa ändringarna genom att klicka på Revert ikon som visas i det övre högra hörnet av Styles när du har ändrat något avsnitt. Klicka på Revert ikonen återställer alla ändringar på panelen för det aktuella avsnittet.
Expandera varje avsnitt om du vill redigera eller lägga till format, vilket förklaras nedan. Spara ändringarna genom att klicka på Back ikonen längst upp på panelen för att gå tillbaka till panelens huvudskärm och klicka sedan på Save.
De blå punkterna på huvudpanelen och bredvid varje alternativ på de olika avsnittspanelerna anger att du har ändrat motsvarande format. Den här visuella indikatorn gör det enkelt för dig att granska ändringarna innan du klickar Save.
Snabbåtgärder för layoutändringar, bakgrundsfärg, storleksändring och flyttning finns också tillgängliga som separata åtgärder på VEC-menyn. Dessa alternativ kan användas som separata åtgärder eller så kan du använda menyn Format, vilket förklaras här.
Background
Ändra bakgrundsfärg och bild.
Typography
Ändra ett elements typografi. Det går snabbt och enkelt att redigera typografi.
Även om RTF-redigeraren (Redigera text/HTML) är tillgänglig för finjustering är snabbåtgärder för att ändra hela elementet tillgängliga med det här alternativet. Om du bara vill använda typografiska ändringar på en del av texten (inte på hela texten) använder du textredigerare.
Du kan redigera följande typografiska format:
Margin
Ändra marginalen för det markerade elementet. Du kan ändra marginalerna för vänster, höger, under och över.
Klicka på listruteikonen för varje marginal för att välja mellan följande alternativ:
Marginalen har stöd för positiva och negativa värden.
Target har också stöd för andra storleksenheter, som rem, pc, em. Mer information om dessa enheter finns i CSS-tips och -tricks för webbformatmallar.
Padding
Ändra utfyllnaden för det markerade elementet. Du kan ändra utfyllnaden för vänster, höger, nederkant och överkant.
Ange utfyllnaden genom att dra i skjutreglaget eller ange antalet pixlar för utfyllnaden.
Utfyllnaden stöder breddskalor från 0 och framåt.
Target har även stöd för andra storleksenheter, som rem, pc, em.
Border
Klicka på kantikonerna högst upp på panelen om du vill ändra det markerade elementets kantlinje.
Du kan redigera följande format för varje kantlinje (överkant, höger, nederkant och vänster):
Kantlinje har stöd för breddskalor från 0 och framåt.
Target har även stöd för andra storleksenheter, som rem, pc, em.
Position
Flytta det markerade elementet från dess aktuella position. Du kan ändra elementets övre, nedre, vänstra, högra och Z-index position.
Klicka på Static nedrullningsbar lista där du kan välja bland följande placeringsalternativ:
Klicka på listruteikonen för varje position för att välja bland följande alternativ:
Position stöder positiva och negativa värden.
Target har även stöd för andra storleksenheter, som rem, pc, em.
Size
Ändra det markerade elementets bredd och höjd.
Klicka på listruteikonen bredvid Width och Height för att välja bland följande alternativ:
Filter
Dra skjutreglaget för varje filteralternativ eller ange önskad procentsats:
CSS Editor
Med CSS Editor i realtid kan du visa ändringar och lägga till format om du känner dig bekväm med att använda CSS (Cascading Style Sheets) eller om du tar emot kod från utvecklaren.
CSS Editor visar alla ändringar som du gör på formatpanelen. Som framgår av bilden nedan har teckensnittsstorleken, den övre kanten och bildstorleken ändrats:
Lägg märke till de blå punkterna bredvid Typography, Borderoch Size i föregående bild. Dessa punkter indikerar att du har ändrat de här avsnitten. Om du öppnar de här avsnittspanelerna visas blå punkter bredvid de specifika alternativ som du har ändrat.
Du kan skriva egen kod om det önskade formatet inte är tillgängligt som standard i Styles.
CSS Editor visar endast information för den aktuella sessionen. Om du sparar ändringarna och sedan öppnar redigeraren igen visas inte information om den tidigare ändringen i redigeraren, även om du väljer samma element igen.
Du kan använda en bakgrundsbild med CSS Editor, men det kan orsaka flimmer. Testa ändringarna före driftsättningen.
Ange den fördefinierade CSS-klass som används för elementet. Om du har markerat flera element avgränsar du flera CSS-klasser med ett mellanslag.
Finns för A/B, Automated Personalizationoch Multivariate Test verksamhet.
Ändra URL-adressen i länken.
Använd Redigera länk för att uppdatera väljaren så att den pekar på samma bildelement. Det går dock inte att länka till ett annat bildelement. Om du vill länka till ett annat bildelement tar du bort den ursprungliga åtgärden från kodredigeraren och använder kommandot Visual Experience Composer om du vill använda åtgärden på det andra bildelementet.
Följande alternativ är tillgängliga:
Lägg till en erbjudande skapat i Adobe Journey Optimizer för att presentera det bästa erbjudandet och upplevelsen för era kunder med hjälp av offer decisioning.
Obs! Det här alternativet är tillgängligt när du redigerar eller skapar manuell A/B Test eller Experience Targeting (XT) endast aktiviteter. Det här alternativet är inte tillgängligt för andra aktivitetstyper.
Mer information finns i Använd offertbeslut.
Lägg till vilket element som helst på sidan förutom att ändra befintligt innehåll. Lägg till text, kod, listor med mera för att skapa helt olika upplevelser att testa.
Markera ett element på sidan och klicka sedan på Insert Before och välja om du vill infoga en bild, HTML eller text. Det infogade elementet visas före det markerade elementet.
Det infogade elementets beteende beror på sidans struktur, CSS och andra sidkonfigurationsalternativ. Du måste ange HTML för att sidan ska visas korrekt. Testa alltid sidan när du har infogat ett objekt för att se till att den visas som förväntat.
Recommendations supports Insert Before innehållet i DIV-, SECTION- och Article-taggarna.
Obs! Om du infogar en bild måste du Adobe Scene7 Publishing System är aktiverat så att du har tillgång till bildbiblioteket.
Inkludera rekommendationer i A/B-tester (inklusive Automatisk allokering och Automatiskt mål) och XT-aktiviteter (Experience Targeting). Mer information finns i Recommendations som erbjudande.
Infoga upplevelsefragment skapade i Adobe Experience Manager (AEM) in Target aktiviteter för att underlätta optimering eller personalisering. Mer information finns i AEM Experience Fragments.
Följande alternativ är tillgängliga:
Lägg till en erbjudande skapat i Adobe Journey Optimizer för att presentera det bästa erbjudandet och upplevelsen för era kunder med hjälp av offer decisioning.
Obs! Det här alternativet är tillgängligt när du redigerar eller skapar manuell A/B Test eller Experience Targeting (XT) endast aktiviteter. Det här alternativet är inte tillgängligt för andra aktivitetstyper.
Mer information finns i Använd offertbeslut.
Lägg till vilket element som helst på sidan förutom att ändra befintligt innehåll. Lägg till text, kod, listor med mera för att skapa helt olika upplevelser att testa.
Markera ett element på sidan och klicka sedan på Insert After och välja om du vill infoga en bild, HTML eller text. Det infogade elementet visas efter det markerade elementet.
Det infogade elementets beteende beror på sidans struktur, CSS och andra sidkonfigurationsalternativ. Du måste ange HTML för att sidan ska visas korrekt. Testa alltid sidan när du har infogat ett objekt för att se till att den visas som förväntat.
Recommendations supports Insert After innehållet i DIV-, SECTION- och Article-taggarna.
Obs! Om du infogar en bild måste du Adobe Scene7 Publishing System är aktiverat så att du har tillgång till bildbiblioteket.
Inkludera rekommendationer i A/B-tester (inklusive Automatisk allokering och Automatiskt mål) och XT-aktiviteter (Experience Targeting). Mer information finns i Recommendations som erbjudande.
Infoga upplevelsefragment skapade i Adobe Experience Manager (AEM) in Target aktiviteter för att underlätta optimering eller personalisering. Mer information finns i AEM Experience Fragments.
Följande alternativ är tillgängliga:
Lägg till en erbjudande skapat i Adobe Journey Optimizer för att presentera det bästa erbjudandet och upplevelsen för era kunder med hjälp av offer decisioning.
Obs! Det här alternativet är tillgängligt när du redigerar eller skapar manuell A/B Test eller Experience Targeting (XT) endast aktiviteter. Det här alternativet är inte tillgängligt för andra aktivitetstyper.
Mer information finns i Använd offertbeslut.
Välj en annan bild i innehållsbiblioteket. De bilder som är tillgängliga för växling omfattar de bilder som har överförts till resursmappen Experience Cloud eller som har överförts till innehållsbiblioteket i Target.
När den inledande aktiviteten skapas är den URL som visas inte den URL som används för leverans. Vid aktivitetssynkronisering uppdateras den URL:en till en Scene7-produktionswebbadress.
Den inledande URL:en kan till exempel se ut som i följande exempel:
https://test.marketing.adobe.com/content/dam/mac/scholasticinc/Aug_MBM.jpeg?ch_ck=1470774943867
Efter aktivitetssynkronisering kan leverans-URL:en se ut som i följande exempel:
http://s7d2.scene7.com/is/image/TargetTest/Aug_MBM?tm=1470768352933&fit=constrain&hei=173&wid=300
Recommendations stöder Ersätt med i DIV-, SECTION- och Article-taggar.
Obs! Du måste ha ett Adobe Scene7 Publishing System-konto för att kunna byta bilder.
Välj ett annat erbjudande på Content Library.
Obs! HTML-erbjudanden lagras på Target servrar.
Ett HTML-erbjudande kan vara upp till 256 kB.
Inkludera rekommendationer i A/B-tester (inklusive Automatisk allokering och Automatiskt mål) och XT-aktiviteter (Experience Targeting). Mer information finns i Recommendations som erbjudande.
Infoga upplevelsefragment skapade i Adobe Experience Manager (AEM) in Target aktiviteter för att underlätta optimering eller personalisering. Mer information finns i AEM Experience Fragments.
Följande alternativ är tillgängliga:
Dra elementet till en annan plats inuti samma överordnade element eller DIV. Andra element flyttas för att skapa utrymme för det omordnade elementet.
Anteckning: Klickspårning fungerar inte för omsorterade objekt.
För närvarande finns det vissa VEC-åtgärder, som Rearrange och Move, anta att elementen på samma nivå i det överordnade käll- och målelementet är helt inlästa. Om lat inläsningsbeteende inträffar under det överordnade DOM-elementet (källa eller mål) kan dessa VEC-åtgärder orsaka inkonsekvent beteende. Vi arbetar på en mer tillförlitlig strategi för att få VEC-åtgärder att fungera i lazy-fyllda DOM-element. Som tillfällig lösning kan du använda Custom Code i dessa scenarier för att återge era upplevelser.
Ändra storlek på ett element på sidan. När du väljer Resizevisas ett handtag längst ned till höger i elementet. Du kan dra i hörnet för att ändra storlek. Håll ned Skift om du vill behålla samma proportioner.
Obs! Det går inte att ändra storlek på infogade element.
Flytta element på sidan. Till skillnad från Rearrange option, Move flyttar inte andra element för att ge plats åt elementet som flyttas. Använd piltangenterna för att finjustera flyttningen. (Planerad förbättring: för att säkerställa att flyttade element inte döljs bakom andra element.)
I vissa situationer, t.ex. när en CSS-begränsning kräver att ett element ska finnas i det överordnade elementet, kan du inte flytta elementet utanför det överordnade elementet. Ett element kan inte flyttas utanför en behållare som har följande CSS-egenskap: overflow: hidden
.
Se Rearrange om du vill ha mer information om inkonsekvent beteende med Move och Rearrange åtgärder på grund av lat inläsande av DOM-element.
Dölj elementet. Det tomma utrymmet återstår, men innehållet tas bort.
Ta bort elementet. Det tomma utrymmet bakom bilden tas bort och det utrymme där elementet var komprimerat.
Obs! Det går inte att ta bort objekt i en klassisk mbox (en mbox som skapats i en Target Classic-kampanj) med det här alternativet.
Markera det överordnade elementet förutom det ursprungligen markerade elementet. När du markerar ett överordnat element markeras alla underordnade element automatiskt. Du kan expandera markeringen flera gånger.
Öppna länkens mål.
Ångra ändringar du gör i dina aktiviteter under en redigeringssession. Du kan också göra om ändringar som tidigare har ångrats.
VEC stöder Webbkomponenter så att ni kan skapa och testa personaliserade upplevelser och erbjudanden för anpassade element och element inuti anpassade element. Den här funktionen är tillgänglig i VEC för alla Target aktivitetstyper.
VEC-stöd för anpassade element stöds i at.js version 2.7.0 (or later){target=_blank}. Kontrollera att rätt version är distribuerad på webbplatsen. Om du använder Hjälptillägg för Visual Experience Composermåste den också ha den version av at.js som krävs distribuerad. De VEC-alternativ som beskrivs ovan är inte synliga och tillgängliga för användning med versioner av at.js som inte stöds.
VEC-stöd för anpassade element stöds för närvarande inte med Adobe Experience Platform Web SDK.
De flesta VEC-åtgärder stöds för anpassade händelser och i anpassade händelser, med följande undantag:
Följande åtgärder är inte tillgängliga för anpassade element:
Edit
Replace Content
Följande åtgärd är inte tillgänglig i anpassade element:
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.
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.
När du hovrar över DOM-banan markeras motsvarande element i VEC med en blå ruta. När du klickar på elementet markeras elementet med en orange ruta och VEC-alternativmenyn visas, vilket förklaras ovan.
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ärra/knip.