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.

IMPORTANT
Für die aktualisierte Visual Editing Composer ist die Adobe Experience Cloud Visual Editing Helper-Erweiterung erforderlich die im Chrome Web Store verfügbar ist.

Der VEC wird angezeigt, wenn Sie eine vorhandene Aktivität erstellen oder bearbeiten.

Visual Experience Composer (VEC)

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

Bedienfeld Erlebnisse

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 ( Symbol hinzufügen ), um ein neues Erlebnis hinzuzufügen. Konfigurieren Sie das neue Erlebnis nach Bedarf.
  • Erlebnis umbenennen: Klicken Sie auf das Symbol "Rename" ( Symbol „Umbenennen ), um das Dialogfeld "Rename Experience" anzuzeigen. Geben Sie den neuen Namen an und klicken Sie dann auf Save.
  • Erlebnis duplizieren, löschen oder umleiten: Klicken Sie auf das More Actions ( Mehr Aktionen- ) und wählen Sie dann Duplicate, Delete oder Redirect to URL aus.

Aktivitätseinstellungen/-konfiguration

Klicken Sie auf das Configure ( Symbol konfigurieren ), das über der Arbeitsfläche Design angezeigt wird, um das Menü mit den Eigenschaften der Aktivität anzuzeigen.

Konfigurationsoptionen für Aktivitäten

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 Symbol hinzufügen und wählen Sie dann eine oder mehrere Zielgruppen aus der Liste aus. Sie können Dialogfeld Add Audiences auchZielgruppen kombinieren oderneue Zielgruppe erstellen.

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.

Umschalter zum Entwerfen und Durchsuchen

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 ( Rückgängig-Symbol ).

Symbol „Rückgängig“ in VEC

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.

Bedienfeld „Komponenten

NOTE
Wenn in diesem Bereich der Modifications statt des Components Bereichs angezeigt wird, klicken Sie auf das Show Components ( Symbol „Komponenten anzeigen ). Das Show Components ( Symbol „Komponenten anzeigen ) und das Show Modifications ( Bedienfeld „Änderungen anzeigen ) dienen als Umschalter zum Anzeigen der entsprechenden Optionen.

So fügen Sie einem Erlebnis eine neue Komponente hinzu:

  1. 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:

  2. Ziehen Sie die Komponente auf ein vorhandenes Seitenelement auf der Design Arbeitsfläche.

  3. 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 ( Bedienfeld Änderungen anzeigen ) im Components.

Bedienfeld für Änderungen

NOTE
Das Show Components ( Symbol „Komponenten anzeigen ) und das Show Modifications ( Bedienfeld „Änderungen anzeigen ) dienen als Umschalter zum Anzeigen der entsprechenden Optionen.

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 Mehr Aktionen ), um eine Änderung hinzuzufügen, alle Änderungen zu löschen oder alle ungültigen Änderungen zu löschen. Klicken Sie auf Select , um Massenvorgänge durchzuführen: Apply to All Pages oder Delete.

Klicken Sie auf das More Options-Symbol ( Mehr Aktionen- ) neben jeder Änderung, um die zugehörigen Informationen anzuzeigen, die Änderung zu löschen oder die Änderung auf weitere Ansichten anzuwenden.

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.

Viewport-Optionen

Sie können auch ein- oder auszoomen, indem Sie auf das entsprechende Symbol klicken Zoom-Symbol oder Zoom-Symbol ).

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:

VEC-Optionen-Menü

NOTE
Die verfügbaren Optionen hängen vom Aktivitätstyp und vom Element ab, das Sie erstellen oder bearbeiten. Weitere Informationen zum Bearbeiten von Bildern und Angeboten in einer A/B Test Aktivität finden Sie Elemente über die Design Arbeitsfläche bearbeiten unten.

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.

Bedienfeld „Eigenschaften“

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 Eigenschaftensymbol ) rechts neben dem Bedienfeld, um es zu reduzieren oder Properties Bedienfeld anzuzeigen.

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:

VEC mit ausgewähltem Bild

Wählen Sie aus dem Components auf der linken Seite Komponenten aus, um die folgenden Elemente einzufügen:

Im Menü oben im Bild können Sie Folgendes tun:

  • Fügen Sie einen Link ein ( Symbol „Link einfügen ).
  • Ändern Sie das Bild ( Symbol „Bild auswählen ).
  • Personalisierung hinzufügen ( Symbol Personalization hinzufügen ).
  • Löschen Sie das Bild ( Löschsymbol ).

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 ( Symbol HTML einfügen ). HTML Weitere Informationen finden unter " bearbeiten“.
  • Duplizieren Sie das Bild ( Duplikatsymbol ).
  • Löschen Sie das Bild ( Löschsymbol ).
  • Bild ausblenden ( Symbol 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:

VEC mit ausgewähltem Text

Wählen Sie aus dem Components auf der linken Seite Komponenten aus, um die folgenden Elemente einzufügen:

Klicken Sie auf das Show Modifications ( Symbol Änderungen anzeigen ), um die Änderungen am Erlebnis anzuzeigen.

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 ( Textfarbsymbol )
  • Konfigurieren Sie die Attribute des Texts (fett, kursiv, unterstrichen oder durchgestrichen) ( Symbol „Textattribute auswählen“ ).
  • Konfigurieren Sie die Ausrichtung des Textes (links, zentriert, rechts, Blocksatz) ( Symbol für Textausrichtung ).
  • Fügen Sie einen Link ein ( Symbol „Link einfügen ).
  • Ersetzen Sie den Inhalt durch ein HTML-Angebot „Experience Fragment oder Recommendation.
  • Bearbeiten Sie die HTML ( Symbol HTML einfügen ).
  • Personalisierung hinzufügen ( Symbol Personalization hinzufügen ).
  • Löschen Sie das Bild ( Löschsymbol ).

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 ( Symbol HTML einfügen ). HTML Weitere Informationen finden unter " bearbeiten“.
  • Duplizieren Sie den Text ( Duplikatsymbol ).
  • Löschen Sie den Text ( Löschsymbol ).
  • Blendet den Text aus ( Symbol ausblenden ).

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:

Tag
Zulässige verschachtelte Tags
<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>

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.

DOM-Pfad

Wenn der DOM-Pfad nicht angezeigt wird, klicken Sie auf das Show DOM ( DOM-Symbol anzeigen ).

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.

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