DokumentationJourney Optimizer B2BDokumentation zu Journey Optimizer B2B Edition

[Beta]{class="badge informative" title="Diese Funktion befindet sich derzeit in einer eingeschränkten Beta-Version"}

Web-Erlebnisdesign

Last update: Mon Jan 12 2026 00:00:00 GMT+0000 (Coordinated Universal Time)

Erstellt für:

  • Benutzende

Nachdem Sie ein Web-Erlebnis erstellt haben, definieren Sie im Bereich für das Inhalts-Design die Änderungen, die Sie auf Ihre Web-Seiten anwenden möchten.

recommendation-more-help

Voraussetzungen

Bevor Sie Web-Erlebnisse entwerfen können, stellen Sie sicher, dass die folgenden Anforderungen erfüllt sind:

  • Ein Produktadministrator hat einen oder mehrere Web-Kanäle konfiguriert, um die URLs (Seiten) zu definieren, die für ein Web-Erlebnis eingeschlossen werden sollen. Weitere Informationen finden Sie unter Webkanalkonfigurationen.

  • Auf Ihrer Website ist Adobe Experience Platform Web SDK (alloy.js) für die Besucheridentifizierung und Inhaltsbereitstellung implementiert. Adobe Experience Platform Web SDK Version 2.16 oder höher ist erforderlich.

  • Sie verfügen über die erforderlichen Berechtigungen um Web-Erlebnisse auf einer Journey zu erstellen und zu verwalten:

    • Kampagnen > Kampagnen verwalten - Erforderlich zum Hinzufügen oder Aktualisieren eines Web-Personalisierungsaktionsknotens.
    • Kampagnen > Kampagnen anzeigen - Erforderlich zum Anzeigen von Details für Web-Personalisierungsaktionsknoten.
style
shade-box
IMPORTANT
Bevor Sie ein Web-Erlebnis entwerfen, stellen Sie sicher, dass Sie die Browser-Erweiterung Adobe Experience Cloud Visual Editing Helper für Ihren Webbrowser installiert haben. Diese Erweiterung ist erforderlich, um Web-Seiten zuverlässig im Web-Erlebnis-Design-Bereich von Journey Optimizer B2B edition zu öffnen, zu erstellen und eine Vorschau davon anzuzeigen.
Google Chrome und Microsoft Edge sind derzeit die einzigen Browser, die die Erweiterungs- und Authoring-Web-Erlebnisse in Journey Optimizer B2B edition unterstützen. Weitere Informationen finden Sie unter Installieren der Visual Editing Helper-Erweiterung.

Web-Erlebnis-Editor

Journey Optimizer B2B edition bietet zwei Arten von Editoren zum Entwerfen von Web-Änderungen:

Editor
Beschreibung
Am besten geeignet für
Visual Editor
Ein WYSIWYG-Editor (What You See Is What You Get), der Ihre Website anzeigt und es Ihnen ermöglicht, Elemente direkt auszuwählen und zu ändern. Dazu ist die Erweiterung Visual Editing Helper in Google Chrome oder Microsoft Edge erforderlich.
Visuelle Änderungen an sichtbaren Seitenelementen wie Text, Bildern, Schaltflächen und Bannern.
Nicht visueller Editor
Ein Code-basierter Editor zum Anwenden von Änderungen, die nicht über den visuellen Editor vorgenommen werden können.
Targeting von Elementen, die visuell schwer auszuwählen sind, Anwenden erweiterter CSS-Änderungen oder Ändern von ausgeblendeten Elementen.

Verwenden Sie in den Web-Erlebniseigenschaften die Option Visual Editor, um den Editor-Typ zu bestimmen. Aktivieren Sie die Option, um den visuellen Editor zu verwenden, oder deaktivieren Sie sie, um den nicht visuellen Editor zu verwenden.

Visual Editor-Option aktiviert {width="400"}

Visueller Editor visual-editor

Der visuelle Editor lädt die Web-Seiten in einem iFrame, in dem Sie Elemente auswählen und Änderungen direkt in der Seitenvorschau anwenden können. Führen Sie die folgenden Schritte aus, um den visuellen Editor zum Entwerfen Ihres Web-Erlebnisses zu verwenden:

  1. Klicken Sie auf Registerkarte Inhalt“ auf der Seite mit den Web-Erlebnisdetails Web-Erlebnis bearbeiten im rechten Bereich.

    Der visuelle Editor lädt Ihre Website basierend auf der Konfiguration des Web-Kanals.

    Visual Web Experience Editor {width="800" modal="regular"}

  2. Klicken Sie bei Bedarf oben rechts auf Durchsuchen“ und verwenden Sie die Site-Navigationsleiste, um die spezifische Seite zu laden, die Sie ändern möchten.

    Sie können auch die Seiten-URL in das Feld oben eingeben.

    note note
    NOTE
    Stellen Sie sicher, dass die geladene Seite den in Ihrer Web-Kanal-Konfiguration definierten URL-Mustern entspricht. Klicken Sie oben rechts auf Konfigurationsdetails anzeigen“, um die URL- oder Seitenabgleichregeln für die ausgewählte Webkanal-Konfiguration anzuzeigen.

    Durchsuchen-Modus im visuellen Editor {width="700" modal="regular"}

    Klicken Sie oben auf „Design“, um die Seite in den Design-Bereich zu laden.

  3. Um zu definieren, wie die angezeigte Seite für das Web-Erlebnis geändert werden soll, können Sie:

  4. Wiederholen Sie Schritt 2, um andere Seiten zu laden, die Sie in das Web-Erlebnis einbeziehen möchten, und wiederholen Sie Schritt 3, um die Seitenänderungen zu definieren.

  5. Überprüfen Sie Ihre ​ und nehmen Sie die erforderlichen Anpassungen vor.

  6. Wenn Ihre Änderungen abgeschlossen sind, klicken Sie auf den linken Pfeil über dem Editor, um zu den Eigenschaften des Web-Erlebnisses zurückzukehren.

Elemente ändern

Klicken Sie auf ein Element auf der angezeigten Seite, um es auszuwählen. Ein blauer Rahmen zeigt das ausgewählte Element an, und eine kontextuelle Symbolleiste mit Änderungsoptionen wird angezeigt.

Element zum Ändern auswählen {width="700" modal="regular"}

Die Symbolleistenoptionen hängen vom ausgewählten Komponententyp ab:

Aktion
Beschreibung
Textoptionen
Ändern Sie die Klasse oder den Textstil des ausgewählten Elements.
Bild auswählen
Ersetzen Sie die Bildquelle oder fügen Sie dem Element ein Bild hinzu.
Link bearbeiten/Link hinzufügen
Ändern oder Hinzufügen einer Link-URL.
Anordnen
Verschiebt das ausgewählte Element innerhalb der Anzeige nach vorn oder hinten.
Hinzufügen von Personalisierung
Einfügen von Personalisierung.
Klick-Tracking-Element
Klick-Tracking für das Element hinzufügen.
Löschen
Das ausgewählte Element von der Seite entfernen.

Für ein ausgewähltes Element ändern sich die Eigenschaften im rechten Bereich, um die verfügbaren Stile und Aktionen widerzuspiegeln. Klicken Sie auf ein Aktionssymbol oben im Bedienfeld, um das ausgewählte Element zu duplizieren, zu verfolgen, zu löschen oder auszublenden.

Klicken Sie auf ein Aktionssymbol für das ausgewählte Element {width="300"}

Textelemente

  1. Ein Textelement auf der Seite auswählen.

  2. Geben Sie einen neuen Textinhalt ein, oder wählen Sie eine Textzeichenfolge aus und geben Sie den Ersatztext ein.

  3. (Optional) Verwenden Sie die Textformatierungsoptionen z. B. fett, kursiv und Ausrichtung.

  4. Klicken Sie auf eine Stelle außerhalb des Textelements, um die Änderung anzuwenden.

Weitere Informationen zu Textformatierungsoptionen für Textkomponenten finden Sie unter Inhaltskomponenten.

Bildelemente

  1. Wählen Sie ein Bildelement auf der Seite aus.

  2. Klicken Sie auf Symbol Bild auswählen“ in der kontextuellen Symbolleiste oder im rechten Bedienfeld.

  3. Suchen Sie ein Bild aus Ihrer Asset-Bibliothek und wählen Sie es aus.

  4. Verwenden Sie bei ​ die Optionen für ​ Bildstile im rechten Bedienfeld.

Schaltflächen-Elemente

  1. Wählen Sie ein Schaltflächenelement auf der Seite aus.

  2. (Optional) Geben Sie einen neuen Text für die Schaltfläche ein, oder wählen Sie die Textzeichenfolge aus und geben Sie den Ersatztext ein.

    Sie können die Personalisierung verwenden, um den Schaltflächentext mithilfe von Daten aus Konto- oder Personenprofilen zu ändern.

  3. Verwenden Sie bei ​ die ​ im rechten Bedienfeld.

Container-Elemente

  1. Wählen Sie ein Container-Element auf der Seite aus.

  2. Verwenden Sie Container-Stiloptionen im rechten Bedienfeld, sofern erforderlich.

Neue Komponenten einfügen

Wenn Sie im linken Navigationsbereich für den visuellen Editor im Design auf das Symbol + klicken, können Sie die folgenden Komponententypen zur Seite hinzufügen, um das Web-Erlebnis zu ändern:

  • Trennlinie - Verwenden Sie diese Komponente, um das Layout und den Inhalt Ihrer E-Mail durch eine Trennlinie zu strukturieren. Sie können Stilattribute wie Zeilenfarbe, Stil und Höhe in den Eigenschaften im rechten Bereich anpassen. Weitere Informationen finden ​ unter ​ in Inhaltskomponenten.
  • HTML - Verwenden Sie diese Komponente, um HTML-Code zu kopieren und in die vorhandene Struktur einzufügen. Damit können Sie kostenlose modulare HTML-Komponenten erstellen, um externe Inhalte wiederzuverwenden. HTML Weitere Informationen finden Sie unter {}in ​Inhaltskomponenten .
  • Bild - Verwenden Sie diese Komponente, um eine Bilddatei in die Seite einzufügen. Sie können Stilattribute wie Breite und Höhe in den Eigenschaften im rechten Bereich anpassen. Weitere Informationen finden ​ unter ​ in Inhaltskomponenten.
  • Überschrift - Verwenden Sie diese Komponente, um Text für die Überschriftenklasse einzufügen. Sie können Stilattribute wie Textfarbe, Stil, Schriftart und Größe in den Eigenschaften im rechten Bereich anpassen. Weitere Informationen finden ​ unter ​ in Inhaltskomponenten.
  • Absatz - Verwenden Sie diese Komponente, um ein standardmäßiges Textelement einzufügen. Sie können Stilattribute wie Textfarbe, Stil, Schriftart und Größe in den Eigenschaften im rechten Bereich anpassen. Weitere Informationen finden ​ unter ​ in Inhaltskomponenten.
  • Link - Verwenden Sie diese Komponente, um einen freistehenden Text-Link zu einer angegebenen URL einzufügen. Sie können Stilattribute wie Textfarbe, Stil, Ausrichtung und Größe in den Eigenschaften im rechten Bereich anpassen.

Wählen Sie links einen Komponententyp aus und bewegen Sie dann den Mauszeiger über ein Element, das an der Stelle angrenzt, an der Sie es hinzufügen möchten.

Visual Editor-Benutzeroberfläche - neue Komponente {width="800" modal="regular"}

Klicken Sie auf eine der angezeigten Schaltflächen, um die Komponente zu platzieren:

  • *Einfügen vor - Einfügen der Komponente vor dem ausgewählten Element.
  • *Einfügen nach - Einfügen der Komponente nach dem ausgewählten Element.

Um die Auswahl eines Komponententyps für das Einfügen aufzuheben, klicken Sie auf ESC in dem kontextuellen blauen Banner, das oben auf der Seite angezeigt wird.

Nicht visueller Editor non-visual-editor

Verwenden Sie den nicht visuellen Editor, wenn Sie Änderungen vornehmen müssen, die im visuellen Editor nicht einfach zu erledigen sind. Dieser Code-basierte Ansatz bietet Ihnen präzise Kontrolle über das Targeting und die Änderung von Elementen. Führen Sie die folgenden Schritte aus, um den nicht visuellen Editor zum Entwerfen Ihres Web-Erlebnisses zu verwenden:

  1. Klicken Sie auf der „Inhalt auf der Seite mit den Web-Erlebnisdetails Bereich auf​Änderung hinzufügen“.

    Der nicht visuelle Editor lädt eine Seite basierend auf der Konfiguration des Web-Kanals.

    Nicht visuelle Editor-Benutzeroberfläche {width="800" modal="regular"}

  2. Definieren Sie die erste Änderung, die Sie vornehmen möchten.

    Im linken Seitenbereich wird eine Liste der vorhandenen Änderungen angezeigt (sofern vorhanden). Klicken Sie Hinzufügen, um eine neue Änderung zu definieren. Wenn keine Änderungen definiert sind, werden im Bedienfeld standardmäßig die Optionen Änderung hinzufügen verwendet.

    • Wählen Sie den Modifizierungstyp:

      table 0-row-2 1-row-2 2-row-2
      Typ Beschreibung
      CSS-Auswahl Targeting von Elementen mithilfe einer CSS-Auswahlzeichenfolge.
      Seite Fügen Sie benutzerdefinierte HTML, CSS oder JavaScript in Elemente auf Seitenebene ein, z. B. <head> oder <body>.

    • Konfigurieren Sie die Änderungsparameter entsprechend dem Typ:

      • CSS-Selektor - Geben Sie einen gültigen CSS-Selektor ein, um bestimmte Elemente auszuwählen.
      • Aktionstyp - Wählen Sie die auszuführende Aktion aus (Bearbeiten, Ausblenden, Löschen, Einfügen, Ersetzen).
      • Inhalt - Geben Sie den Inhalt oder die Formatierung an, die angewendet werden soll.

  3. Klicken Sie Speichern, um die Änderung anzuwenden.

Änderungen an CSS-Selektor

Änderungen an CSS-Selektoren ermöglichen es Ihnen, Elemente mithilfe der standardmäßigen CSS-Selektorsyntax präzise anzusprechen.

  1. Wählen Sie CSS Auswahl als Änderungstyp aus.

  2. Geben Sie den Selektor in das Feld CSS Elementauswahl“ ein.

**Beispielselektoren:**

| Selektor | Zielgruppen |
| -------- | ------- |
| `#hero-banner` | Element mit der ID „hero-banner“ |
| &quot;.cta-button“ | Alle Elemente mit Klasse „cta-button“ |
| `nav-Kopfzeile` | Links innerhalb der Navigation, innerhalb der Kopfzeile |
| &quot;[data-offer=„premium“]&quot; | Elemente mit einem bestimmten Datenattribut |

  1. Wählen Sie einen Aktionstyp und geben Sie die erforderlichen Informationen/Inhalte an.

    • Inhalt festlegen - Geben Sie den Text in das Feld Inhalt für das Element ein, das durch den CSS- identifiziert wird.

    • Attribut festlegen - Geben Sie ein Attribut an, das mit der aktuellen CSS-Auswahl verknüpft werden soll, damit das Element durch dieses Attribut identifiziert werden kann. Geben Sie einen Namen in das Feld Attributname und einen Wert in das Feld Inhalt ein. Wenn das Attribut bereits vorhanden ist, wird der Wert aktualisiert. Andernfalls wird ein neues Attribut mit dem angegebenen Namen und Wert hinzugefügt.

    Änderung der CSS-Auswahl eines nicht visuellen Editors {width="800" modal="regular"}

  2. (Optional) Klicken Sie auf Personalisierung hinzufügen und verwenden Sie den Personalisierungseditor, um eine benutzerdefinierte Personalisierung für den Inhalt zu erstellen.

Seitenänderungen

Sie können benutzerdefinierten Code mit dem Änderungstyp Seite <head> hinzufügen. Das <head>-Element ist ein Container für Metadaten (Daten über Daten) und wird zwischen dem <html>-Tag und dem <body>-Tag platziert. In diesem Fall wartet der Code nicht darauf, dass der Hauptteil oder die Seite geladen wird, sondern er wird zu Beginn des Seitenladevorgangs ausgeführt.

Das <head>-Element wird häufig verwendet, um oben auf der Seite JavaScript- oder CSS-Code hinzuzufügen. Die Auswahlen für nachfolgende visuelle Aktionen hängen von den auf dieser Registerkarte hinzugefügten HTML-Elementen ab.

NOTE
Benutzerdefinierter Code wird im Browser des Besuchers ausgeführt. Stellen Sie sicher, dass Ihr Code sicher und getestet ist und sich nicht negativ auf die Seitenleistung oder das Benutzererlebnis auswirkt.

  1. Wählen als Änderungstyp „Seite<head>" aus.

  2. Fügen Sie Ihren benutzerspezifischen Code im Feld Inhalt hinzu.

    note caution
    CAUTION
    Sie können nur <script>- und <style>-Elemente zum Abschnitt <head> hinzufügen. Das Hinzufügen <div> Tags und anderer Elemente kann dazu führen, dass die verbleibenden <head> Elemente innerhalb des <body> befüllt werden.

    Seitenkopfänderung im nicht visuellen Editor {width="800" modal="regular"}

  3. (Optional) Klicken Sie auf Personalisierung hinzufügen und verwenden Sie den Personalisierungseditor, um eine benutzerdefinierte Personalisierung für den Inhalt zu erstellen.

Verwalten von Änderungen manage-modifications

Alle von Ihnen erstellten Änderungen werden verfolgt und können über das Bedienfeld Änderungen sowohl des visuellen Editors als auch des nicht visuellen Editors verwaltet werden. Klicken Sie auf Änderungen in linken Symbolleiste, um alle Änderungen anzuzeigen.

Jeder Änderungsdatensatz enthält:

  • Das Zielelement oder die Auswahl
  • Der Änderungstyp (z. B. Bearbeiten, Ausblenden oder Einfügen)
  • Eine Vorschau der Änderung

Bedienfeld Änderungen {width="500" modal="regular"}

Bearbeiten einer Änderung

  1. Suchen Sie in Liste​Änderungen“ die Änderung, die Sie bearbeiten möchten.

  2. Klicken Sie auf das Mehr Menü ( … ) und wählen Sie Bearbeiten.

  3. Aktualisieren Sie die Änderungseigenschaften nach Bedarf.

  4. Klicken Sie Speichern, um Ihre Änderungen zu speichern.

Löschen einer Änderung

  1. Suchen Sie in Liste​Änderungen“ die Änderung, die Sie entfernen möchten.

  2. Klicken Sie auf das Mehr Menü ( … ) und wählen Sie Änderung löschen.

  3. Bestätigen Sie die Entfernung, wenn Sie dazu aufgefordert werden.

Vorschau der Änderungen

Zeigen Sie vor dem Veröffentlichen eine Vorschau des Erscheinungsbilds Ihrer Änderungen für Besucher an.

Verwenden Sie die Optionen für die Gerätevorschau oben im visuellen Editor, um Ihre Änderungen in anzuzeigen:

  • Desktop
  • Tablet
  • Mobile

Ändern der Gerätegröße für die Vorschau {width="550" modal="regular"}

Die Vorschau wird aktualisiert, um zu zeigen, wie Änderungen auf den einzelnen Gerätegrößen gerendert werden.

Verwenden Sie die URL-Leiste, um zu verschiedenen Seiten innerhalb Ihrer Web-Kanal-Konfiguration zu navigieren. Überprüfen Sie dann, ob die Änderungen basierend auf Ihren URL-Abgleichregeln korrekt auf die Zielseiten angewendet werden.

Klick-Tracking für Web-Erlebnisse web-click-tracking

Benutzerinteraktionen mit Elementen verfolgen, um die Interaktion zu messen und Erkenntnisse zu gewinnen. Die Klick-Tracking-Daten stehen in Ihren Interaktionsberichten zur Verfügung und können verwendet werden, um die Effektivität Ihrer Änderungen am Web-Erlebnis zu messen.

Wenn Ihr Web-Erlebnis aktiviert ist (live), können Sie Berichte auch mit der Adobe Customer Journey Analytics erstellen (hierfür ist ein Produktabonnement erforderlich). Um die Überwachung Ihres Web-Erlebnisses zu verbessern, können Sie auch die Klicks auf beliebige Elemente Ihrer Website verfolgen. Mit dem Tracking können Sie die Anzahl der Klicks für dieses Element in den Web-Berichten anzeigen.

Weitere Informationen zu Customer Journey Analytics und zum Erstellen von Web-Berichten finden Sie in der Customer Journey Analytics-Dokumentation.

  1. Wählen Sie ein Element im Web-Erlebnis-Editor aus, z. B. ein Bild oder einen Link.

  2. Klicken Sie in den Elementeigenschaften oder in der kontextuellen Symbolleiste auf das Symbol Element nachverfolgen.

    Klick-Tracking für Web-Erlebniselemente aktivieren {width="600" modal="regular"}

  3. Öffnen Sie die Klick-Tracking-Liste im linken Bereich und ändern Sie den Wert Nachverfolgte Aktionen, um diese Interaktion in Ihren Berichten zu identifizieren.

    Festlegen der Klick-Tracking-Kennung für das Web-Erlebnis {width="600" modal="regular"}

6ef00091-a233-4243-8773-0da8461f7ef0