Auf dieser Seite Erfahren Sie, wie Sie die Änderungen, die auf Ihre Web-Seite im Bereich Änderungen angewendet wurden, überprüfen, löschen und rückgängig machen können und wie Sie CSS-Selektor- und Seitenkopf-Änderungen direkt in Adobe Journey Optimizer hinzufügen.
Sie können mühelos alle Komponenten, Anpassungen und Stile verwalten, die Sie Ihrer Web-Seite hinzugefügt haben. Sie können Änderungen auch direkt über den dedizierten Bereich hinzufügen.
Arbeiten mit dem Bereich „Änderungen“ use-modifications-pane
-
Wählen Sie das Symbol Änderungen aus, um den entsprechenden Bereich auf der linken Seite anzuzeigen.
-
Sie können alle Änderungen überprüfen, die Sie an der Seite vorgenommen haben.
-
Wählen Sie eine unerwünschte Änderung aus, klicken Sie auf die Schaltfläche Mehr Aktionen und wählen Sie die Option Änderung löschen, um sie zu entfernen.
note caution CAUTION Gehen Sie beim Löschen einer Aktion vorsichtig vor, da sich dies auf nachfolgende Aktionen auswirken kann. -
Wenn Sie eine Einzelseitenanwendung erstellen, können Sie jede Änderung auf andere Ansichten anwenden. Weitere Informationen
-
Um mehrere Änderungen gleichzeitig zu löschen, klicken Sie auf die Schaltfläche Auswählen am oberen Rand des Bereichs Änderungen, überprüfen Sie dann die gewünschten Änderungen und klicken Sie anschließend auf das Symbol Löschen.
-
Verwenden Sie die Schaltfläche Mehr Aktionen oben im Bereich Änderungen, um alle Änderungen gleichzeitig zu löschen.
-
Sie können auch nur die ungültigen Änderungen löschen, d. h. die Änderungen, die durch andere Änderungen überschrieben wurden. Wenn Sie beispielsweise die Farbe eines Textes ändern und diesen Text dann löschen, wird die Farbänderung ungültig, da der Text nicht mehr vorhanden ist.
-
Sie können Aktionen auch mithilfe der Schaltfläche Rückgängig/Wiederholen rechts oben auf dem Bildschirm abbrechen und wiederholen.
Klicken Sie auf die Schaltfläche und halten Sie sie gedrückt, um zwischen den Optionen Rückgängig und Wiederholen zu wechseln. Klicken Sie dann auf die Schaltfläche selbst, um die gewünschte Aktion anzuwenden.
Hinzufügen von Änderungen über den dedizierten Bereich add-modifications
Bei der Bearbeitung einer Seite mit dem Web-Designer können Sie neue Änderungen direkt aus dem Bereich Änderungen in den Inhalt übernehmen, ohne dass eine Komponente ausgewählt und über die Web-Designer-Oberfläche bearbeitet werden muss. Gehen Sie wie folgt vor.
-
Klicken Sie im Bereich Änderungen auf die Schaltfläche Mehr Aktionen.
-
Wählen Sie Eine Änderung hinzufügen aus.
-
Wählen Sie den Änderungstyp aus:
- CSS-Auswahl – Weitere Informationen
- Seite
<Head>– Weitere Informationen
-
Geben Sie den Inhalt ein und Speichern Sie die Änderungen.
-
Klicken Sie auf die Schaltfläche Mehr Aktionen neben der Änderung und wählen Sie Info aus, um die Details anzuzeigen.
CSS-Auswahl css-selector
Um eine Typänderung der CSS-Auswahl hinzuzufügen, gehen Sie wie folgt vor.
-
Wählen Sie CSS-Auswahl als Änderungstyp aus.
-
Das Feld CSS-Element-Auswahl hilft dabei, die HTML-Elemente (oder Knoten in der DOM-Struktur) zu finden und auszuwählen, auf die Änderungen angewendet werden sollen.
-
Wählen Sie einen Aktionstyp aus (Inhalt festlegen oder Attribut festlegen) und geben Sie die erforderlichen Informationen/Inhalte ein.
-
Inhalt festlegen: Geben Sie den Inhalt an, der in das von dem Feld CSS-Element-Auswahl ermittelte Element eingefügt werden soll.
-
Attribut festlegen: Geben Sie ein Attribut an, das mit der aktuellen CSS-Auswahl verknüpft werden soll, damit diese Auswahl dann auch über dieses Attribut identifiziert werden kann. Geben Sie dazu 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.
-
Seite <head> page-head
Sie können benutzerdefinierten Code mithilfe des Änderungstyps 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.
Um eine Typänderung der Seite<head> hinzuzufügen,gehen Sie wie folgt vor.
-
Wählen Sie Seite
<head>als Änderungstyp.
-
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 von<div>-Tags und anderen Elementen kann dazu führen, dass die verbleibenden<head>-Elemente in den Abschnitt<body>springen. -
Klicken Sie auf die Schaltfläche Erweiterte Bearbeitungsoptionen. Der Personalisierungseditor wird geöffnet.
Sie können den Personalisierungseditor von Journey Optimizer mit allen Personalisierungs- und Bearbeitungsfunktionen nutzen. Weitere Informationen
Beispiele für benutzerdefinierten Code custom-code-examples
Sie können den Änderungstyp Seite<head> verwenden, um:
-
Inline-JavaScript zu verwenden oder eine Verknüpfung zu einer externen JavaScript-Datei herzustellen.
So ändern Sie beispielsweise die Farbe eines Elements:
code language-none <script type="text/javascript"> document.getElementById("element_id").style.color = "blue"; </script> -
Konfigurieren Sie einen Inline-Stil oder erstellen Sie eine Verknüpfung zu einem externen Stylesheet.
So definieren Sie beispielsweise eine Klasse für ein Überlagerungselement:
code language-none <style> .overlay { position: absolute; top:0; left: 0; right: 0; bottom: 0; background: red; } </style>
Best Practices für benutzerspezifischen Code custom-code-best-practices
Beispiel:
| code language-none |
|---|
|
Falls Änderungen erforderlich sind, nehmen Sie sie in diesem Container vor.
Wenn Sie den benutzerdefinierten Code nicht mehr benötigen, lassen Sie diesen Container einfach leer, entfernen Sie ihn jedoch nicht. Dadurch wird sichergestellt, dass andere Erlebnisänderungen nicht beeinflusst werden.
<head>für zwei Kampagnen verwenden, die Auswirkungen auf dieselbe URL haben.<head> für zwei Kampagnen verwenden, die Auswirkungen auf dieselbe URL haben, wird das JavaScript von beiden Kampagnen in die Seite eingefügt. Journey Optimizer bestimmt automatisch die Reihenfolge der bereitgestellten Inhalte. Stellen Sie sicher, dass der Code nicht von der Platzierung abhängig ist. Es obliegt Ihnen, sicherzustellen, dass keine Konflikte im Code vorhanden sind.This section contains structured knowledge intended to support interpretation, retrieval, and question answering related to this topic.
For complete understanding, this information should be combined with the documentation on this page. Neither source is intended to stand alone; the page describes the feature, while this section provides additional context that helps disambiguate terminology, intent, applicability, and constraints.
- TL;DR: This page explains how to review, delete, and undo changes applied to a web page from the Modifications pane, and how to add CSS selector and page head modifications directly in Journey Optimizer.
Intents:
- Review the changes made to a page from the Modifications pane
- Delete a single modification, multiple modifications, all modifications, or only invalid modifications
- Undo and redo actions using the Undo/Redo button
- Add a modification directly from the pane as a CSS Selector or Page
<head>type - Configure a CSS Selector modification with a Set Content or Set Attribute action
- Add custom JavaScript or CSS code through a Page
<head>modification
Glossary:
- Modifications pane: The pane used to navigate through and manage all components, adjustments, and styles added to a web page, and to add new modifications (product-specific)
- Invalid modifications: Changes that were overridden by other changes, for example a color modification whose target text was later deleted (product-specific)
- CSS Selector modification: A modification type that uses the CSS Element Selector field to identify HTML elements (DOM nodes) and apply a Set Content or Set Attribute action (product-specific)
- Page
<head>modification: A modification type for adding custom code to the<head>container, executed at the beginning of page load (product-specific) - Set Content: A CSS Selector action that specifies the content placed into the element identified by the CSS Element Selector (product-specific)
- Set Attribute: A CSS Selector action that associates an attribute (name and value) with the current CSS selector; an existing attribute’s value is updated, otherwise a new attribute is added (product-specific)
Guardrails:
- Proceed with care when deleting an action, as it may impact subsequent actions.
- You can only add
<script>and<style>elements to the<head>section; adding<div>tags and other elements might cause remaining<head>elements to pop into the<body>. - Do not perform document.write actions in custom code scripts, as scripts are executed asynchronously and this often causes document.write to appear in the wrong place.
- If you create an element and then modify it, do not delete the original element, because the modifying action would no longer have anything to modify and would stop working.
- If you use the Page
<head>modification type for two campaigns impacting the same URL, JavaScript is injected from both campaigns and Journey Optimizer automatically determines the order; make sure the code does not depend on placement and has no conflicts. - Always wrap custom code in one element; if the code is no longer needed, leave the container empty but do not remove it.
Terminology:
- Canonical name: Modifications pane — Acronym: n/a — variants: Modifications panel
- Synonyms: “CSS Element Selector” = “CSS selector field used to find and select HTML elements”
- Do not confuse: “Set Content” (specifies content placed into the selected element) ≠ “Set Attribute” (associates an attribute name and value with the CSS selector)
- Do not confuse: “Delete modification” (removes one modification) ≠ “Undo” (cancels an action, reversible with Redo)
- Do not confuse: “invalid modifications” (changes overridden by other changes) ≠ modifications you intentionally delete
FAQ:
- Q: How do I delete all modifications at once? — Use the More actions button on top of the Modifications pane to delete all modifications at once.
- Q: What are invalid modifications? — Changes that were overridden by other changes, such as a color modification whose target text was later deleted; you can delete only the invalid modifications.
- Q: What can I add in a Page
<head>modification? — Only<script>and<style>elements; adding<div>tags and other elements might cause remaining<head>elements to pop into the<body>. - Q: What is the difference between Set Content and Set Attribute? — Set Content specifies the content placed into the element identified by the CSS Element Selector; Set Attribute associates an attribute name and value with the CSS selector, updating it if it already exists.
- Q: Can I undo changes? — Yes, use the Undo/Redo button on the top right; click and hold to switch between Undo and Redo, then click to apply.