Visual Experience Composer-Optionen
Mit der Adobe Target Standard/Premium-Version 25.2.1 (17. Februar 2015) wird eine aktualisierte Visual Experience Composer (VEC) eingeführt. In diesem Artikel werden die aktualisierte Benutzeroberfläche und ihre Optionen erläutert.
Der VEC wird angezeigt, wenn Sie eine vorhandene Aktivität erstellen oder bearbeiten.
Übersicht über die VEC-Benutzeroberfläche
In den folgenden Abschnitten werden die im aktualisierten VEC verfügbaren Optionen für eine A/B Test Aktivität erläutert. Die Optionen variieren je nach Aktivitätstyp.
Experiences
Das Bedienfeld Experiences wird in der linken Leiste des VEC angezeigt.
Sie können Erlebnisse über das Bedienfeld "Experiences" anzeigen, erstellen, umbenennen oder entfernen.
Die folgenden Optionen sind im Bedienfeld Experiences verfügbar:
- Erlebnis anzeigen: Um ein Erlebnis anzuzeigen, klicken Sie auf das gewünschte Erlebnis, um es auf der Design-Arbeitsfläche anzuzeigen.
- Erlebnis hinzufügen: Klicken Sie auf das Add (
- Erlebnis umbenennen: Klicken Sie auf das Symbol "Rename" (
- Erlebnis duplizieren, löschen oder umleiten: Klicken Sie auf das More Actions (
Aktivitätseinstellungen/-konfiguration
Klicken Sie auf das Configure (
Die folgenden Optionen sind verfügbar:
- Properties: Weisen Sie der Aktivität Eigenschaften zu oder entfernen Sie Eigenschaften aus der Aktivität. Properties ist eine (Target Premium Funktion. Weitere Informationen finden Sie unter Enterprise-Benutzerberechtigungen.
- Page Delivery: Gleiches Erlebnis auf ähnlichen Seiten Ihrer Site. Verwenden Sie eine Seitenvorlage, um Ihren Seiten eine Struktur zu verleihen, oder wenn Ihre Seiten ähnliche Elemente enthalten, um Variationen in ähnlich strukturierten Seitenelementen oder in Ihrer gesamten Domain zu testen. Weitere Informationen finden Sie unter Gleiches Erlebnis auf ähnlichen Seiten.
- Site Preferences: Konfigurieren Sie Ihre Site-Voreinstellungen, um festzulegen, wie Target CSS-Selektoren generiert. Weitere Informationen finden Sie unter CSS-Selektoren in Konfigurieren der Visual Experience Composer.
- Zusätzliche Seiten hinzufügen: Fügen Sie der Aktivität zusätzliche Seiten hinzu, um eine mehrseitige Aktivität zu erstellen, mit der Sie eine Story über mehrere Seiten hinweg erstellen können. Das Design ist für jede Seite spezifisch. Weitere Informationen finden Sie unter Mehrseitige Aktivität.
- Einzelne Zielgruppe: Verwenden Sie eine einzelne Zielgruppe für die Aktivität.
- Mehrere Zielgruppen: Weisen Sie der Aktivität mehrere Zielgruppen zu. Klicken Sie auf das Symbol Zielgruppen hinzufügen
Design-/Browse
Verwenden Sie die Design/Browse Umschalter, die oben auf der Design-Arbeitsfläche angezeigt werden, um zwischen Design- und Durchsuchen-Modus zu wechseln.
Verwenden Sie den Browse , um auf Ihrer Site zu navigieren und die Ansicht oder Seite auszuwählen, die Sie aktualisieren möchten. Wechseln Sie zurück in den Design, um Ihre Änderungen hinzuzufügen oder zu bearbeiten.
Undo/Redo
Sie können die vorgenommenen Änderungen rückgängig machen, indem Sie auf das Undo klicken (
Um eine Aktion wiederherzustellen, erweitern Sie die Rückgängig/Redo-Schaltflächengruppe und wählen Sie Redo aus.
Components
Sie können Ihrer Web-Seite eine Reihe von Komponenten hinzufügen und diese nach Bedarf bearbeiten, indem Sie das neue Components verwenden.
So fügen Sie einem Erlebnis eine neue Komponente hinzu:
-
Klicken Sie auf die gewünschte Komponente, die Sie hinzufügen möchten, um sie zu markieren.
Die verfügbaren Komponenten werden in logischen Containern gruppiert:
-
Basic
- Divider
- HTML
- Image
-
Text
- Heading
- Paragraph
- Link
-
Dynamic
-
-
Ziehen Sie die Komponente auf ein vorhandenes Seitenelement auf der Design Arbeitsfläche.
-
Wählen Sie diese Option, um die Komponente vor oder nach dem ausgewählten Element einzufügen.
Im Vergleich zur vorherigen VEC-Version können Sie ein ausgewähltes Element nicht durch eine Komponente ersetzen.
Modifications
Um das Bedienfeld Modifications zu öffnen, klicken Sie auf das Symbol Show Modifications (
Im Bedienfeld Modifications werden alle Änderungen angezeigt, die an Ihrer Seite im Visual Experience Composer (VEC) vorgenommen wurden, und Sie können zusätzliche Änderungen vornehmen (z. B. CSS-Auswahl, Mbox und benutzerdefinierter Code).
Klicken Sie in der Kopfzeile des Bedienfelds auf das More Options-Symbol
Klicken Sie auf das More Options-Symbol (
Design Arbeitsfläche
Auf der Design Arbeitsfläche können Sie Viewports auswählen, einschließlich „An Bildschirm anpassen“, Desktop, Tablet, Mobile Landscape und Mobile Portrait. Standardmäßig passt die Arbeitsfläche die Seite zusammen mit den im Abschnitt „Administration“ definierten Darstellungsfeldern den Bildschirm.
Sie können auch ein- oder auszoomen, indem Sie auf das entsprechende Symbol klicken
Wenn Sie auf ein Seitenelement auf der Arbeitsfläche Design klicken, werden in einem Menü die Optionen angezeigt, die für diesen Elementtyp verfügbar sind. Darüber hinaus wird am unteren Rand der Seite ein DOM-Pfad angezeigt, mit dem Sie einfach durch die Seitenstruktur navigieren können.
Die verschiedenen Visual Experience Composer (VEC)-Aktionen sind in entsprechenden Menüoptionen gruppiert, um Ihren Auftrag schneller und effizienter zu gestalten:
Properties
Im Bedienfeld Properties können Sie die Eigenschaften ausgewählter Seitenelemente ändern, unabhängig davon, ob es sich um HTML-Elemente oder Target-spezifische Objekte wie Empfehlungen oder Angebote handelt.
Klicken Sie auf die Symbole oben im Bedienfeld, um HTML-Code zu bearbeiten oder Elemente zu löschen, zu duplizieren oder auszublenden. Änderungen werden im Modifications angezeigt.
Das Properties Bedienfeld ist in der rechten Leiste ausblendbar. Klicken Sie auf das Show/Hide Properties-Symbol
Bearbeiten von Elementen mithilfe der Design Arbeitsfläche design
Die folgenden Abschnitte zeigen Ihnen, wie Sie Bilder und Text auf der Design-Arbeitsfläche bearbeiten. Die Arbeitsfläche „Design“ sowie die Bedienfelder „Komponenten“, „Änderungen“ und „Eigenschaften“ bieten Ihnen leistungsstarke Tools, mit denen Sie mühelos Erlebnisse für Ihre Aktivitäten erstellen können.
Bildoptionen
Wenn Sie in einer A/B Test Aktivität auf ein Bild klicken, sieht der VEC in etwa wie in der folgenden Abbildung aus:
Wählen Sie aus dem Components auf der linken Seite Komponenten aus, um die folgenden Elemente einzufügen:
- Einfach (Unterteilung, HTML, Bild).
- Text (Überschrift, Absatz, Link).
- Dynamisch (Empfehlung, Experience Fragment, HTML-Angebot).
Im Menü oben im Bild können Sie Folgendes tun:
- Fügen Sie einen Link ein (
- Ändern Sie das Bild (
- Personalisierung hinzufügen (
- Löschen Sie das Bild (
Im Properties Bereich auf der rechten Seite können Sie die Eigenschaften des Bildes weiter konfigurieren.
Über die Symbole oben im Frame können Sie Folgendes tun:
- Bearbeiten Sie die HTML (
- Duplizieren Sie das Bild (
- Löschen Sie das Bild (
- Bild ausblenden (
Mit den Optionen im rechten Rahmen können Sie Folgendes tun:
- Bearbeiten Sie die CSS-Klasse.
- Konfigurieren Sie die Eigenschaften des Bildes (Quelle, Titel, Alternativtext).
- Link-URL bearbeiten.
- Konfigurieren Sie die Größe des Bildes (Höhe und Breite). Klicken Sie auf Show Advanced Options , um die minimale und maximale Größe, Breite, Höhe, Überlauf und Objektanpassung des Bildes zu konfigurieren.
- Konfigurieren Sie die Position des Bildes auf Ihrer Seite (absolut, fest, relativ, statisch oder fixierbar).
- Konfigurieren Sie den Abstand des Elements, einschließlich Rand und Abstand.
- Konfigurieren Sie die Effekte des Elements (Deckkraft). Klicken Sie auf Show Advanced Options, um die Werte für Sepia, Graustufen, Kontrast, Helligkeit und Weichzeichnung des Bildes zu konfigurieren. Sie können das Bild auch invertieren oder drehen.
- Konfigurieren Sie die Inline-Stile des Bildes.
Textoptionen
Wenn Sie auf Text in einer A/B Test Aktivität klicken, sieht der VEC in etwa wie in der folgenden Abbildung aus:
Wählen Sie aus dem Components auf der linken Seite Komponenten aus, um die folgenden Elemente einzufügen:
- Einfach (Unterteilung, HTML, Bild).
- Text (Überschrift, Absatz, Link).
- Dynamisch (Empfehlung, Experience Fragment, HTML-Angebot).
Klicken Sie auf das Show Modifications (
Das Menü oben im Textelement bietet folgende Möglichkeiten:
- Konfigurieren Sie die Eigenschaften des Textes (Überschriftenebene, Absatz, Blockzitat oder Monospace)
- Wählen Sie die Farbe des Textes aus (
- Konfigurieren Sie die Attribute des Texts (fett, kursiv, unterstrichen oder durchgestrichen) (
- Konfigurieren Sie die Ausrichtung des Textes (links, zentriert, rechts, Blocksatz) (
- Fügen Sie einen Link ein (
- Ersetzen Sie den Inhalt durch ein HTML-Angebot „Experience Fragment oder Recommendation.
- Bearbeiten Sie die HTML (
- Personalisierung hinzufügen (
- Löschen Sie das Bild (
Im Properties auf der rechten Seite können Sie die Eigenschaften des Textes weiter konfigurieren.
Über die Symbole oben im Frame können Sie Folgendes tun:
- Bearbeiten Sie die HTML (
- Duplizieren Sie den Text (
- Löschen Sie den Text (
- Blendet den Text aus (
Mit den Optionen im rechten Rahmen können Sie Folgendes tun:
- Bearbeiten Sie die CSS-Klasse.
- Konfigurieren Sie die Hintergrundfarbe und das Bild des Textes.
- Konfigurieren Sie die Typografie des Textes (Überschriftenstil, Schriftgröße, Schriftstärke, Zeilenhöhe, Ausrichtung, Textfarbe, Textstil (fett, kursiv, unterstrichen oder durchgestrichen)).
- Konfigurieren von Listen, einschließlich Aufzählungszeichen, nummerierten Listen oder A, B, C.
- Wählen Sie die Rahmenfarbe.
- Konfigurieren der Größe des Textfelds (Höhe und Breite). Klicken Sie auf Show Advanced Options , um die minimale und maximale Größe, Breite, Höhe, Überlauf und Objektanpassung des Textfelds zu konfigurieren.
- Konfigurieren Sie die Position des Textfelds auf Ihrer Seite (absolut, fest, relativ, statisch oder fixiert) und legen Sie die Anzahl der Pixel von oben, rechts, unten und links fest.
- Konfigurieren Sie den Abstand des Elements, einschließlich Rand und Abstand.
- Konfigurieren Sie die Effekte des Elements (Deckkraft). Klicken Sie auf Show Advanced Options, um die Werte für Sepia, Graustufen, Kontrast, Helligkeit und Weichzeichnung des Bildes zu konfigurieren. Sie können den Text auch invertieren oder drehen.
- Konfigurieren Sie die Inline-Stile.
HTML bearbeiten
Neben HTML-Code können Sie auch benutzerdefiniertes JavaScript bearbeiten und einfügen.
Beim Bearbeiten von Text und HTML für A/B- und Experience Targeting-Aktivitäten stehen verschiedene Rich-Text-Formatierungsoptionen zur Verfügung. Sie können eine Schriftart und einen Schriftstil auswählen, die Textausrichtung ändern und andere Standardformatierungsoptionen für Texte anwenden. Beim Ändern von HTML können Sie zwischen der Code-Ansicht und der Rich-Editing-Ansicht von HTML wechseln.
Die folgenden HTML 5-Tags können verschachtelt sein:
<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>Navigieren in Elementen mithilfe des DOM-Pfads dom-path
Wenn Sie auf ein Element auf der Seite klicken, wird das VEC-Optionsmenü angezeigt. Zusätzlich wird, wenn Sie auf ein Element klicken, der entsprechende DOM-Pfad unten auf der Seite angezeigt.
Wenn der DOM-Pfad nicht angezeigt wird, klicken Sie auf das Show DOM (
Sie können den DOM-Pfad verwenden, um Informationen über das ausgewählte Element (Typ, ID und Klasse) schnell anzuzeigen und den DOM-Pfad nach oben oder unten verschieben, um das gewünschte Element auszuwählen.
Mithilfe des DOM-Pfades können Sie mühelos zu jedem übergeordneten, parallelen oder untergeordneten Element innerhalb des VEC navigieren.
Die DOM-Pfad-Funktion ist auch verfügbar, wenn Sie das Klick-Tracking einrichten.