Änderungen

Informationen über Änderungen Seite in Adobe Target , mit dem Sie Änderungen an Ihrer Seite anzeigen und zusätzliche Änderungen hinzufügen können (CSS-Selektor, Mbox und benutzerspezifischer Code).

Die Änderungen zeigt alle Änderungen an, die im Visual Experience Composer (VEC) an Ihrer Seite vorgenommen wurden, und ermöglicht es Ihnen, zusätzliche Änderungen vorzunehmen, indem Sie auf jedes Element auf der Seite klicken und Auswählen einer Aktion. Jede vorgenommene Änderung erscheint in der Liste Änderungen als separate Aktion oder separates Element. Sie können auch Änderungen hinzufügen, einschließlich folgender Änderungstypen: CSS-Selektor, Mbox und benutzerspezifischer Code.

Änderungen – Überblick section_EE27E7572AA74397BBDED563B2B3D509

Auf der Seite Änderungen werden alle Änderungen angezeigt, die im VEC an Ihrer Seite vorgenommen wurden. Jede vorgenommene Änderung erscheint in der Liste Änderungen als separate Aktion oder separates Element.

Bild codeeditor_page_mods

Auf der Seite „Änderungen“ können Sie kleine Änderungen an dem Selektor vornehmen, den Target auswählt, wenn Sie über den VEC konfigurieren, wie Inhalte bereitgestellt werden. Sie können entweder den Inhalt oder ein HTML-Attribut ändern. Sie können auch den Code bearbeiten, um die Entsprechung zu einem HTML-Angebot in einer Mbox zu erstellen.

Auf der Seite „Änderungen“ können Sie folgende Aktionen durchführen:

  • Anzeigen einer Aktion, die im Visual Composer durchgeführt wurde.

    codeeditor_viewchange-Bild

  • Bearbeiten einer vorhandenen Aktion. Halten Sie den Mauszeiger über die gewünschte Änderung und klicken Sie auf das Bearbeitungssymbol.

    codeeditor_edit image

    Vornehmen der gewünschten Änderungen.

    codeeditor_change1-Bild

  • Löschen einer vorhandenen Aktion. Halten Sie den Mauszeiger über die gewünschte Umgebung und klicken Sie auf das Löschsymbol.

    codeditor_delete-Bild

  • Hinzufügen einer neuen Änderung. Klicken Sie auf Änderung hinzufügen oder das Plus-Symbol (+) und geben Sie Ihre Änderungen wie unten beschrieben an.

    codeeditor_new image

    Beachten Sie, dass Target nach Erstellen einer Änderung anstelle der Schaltfläche „Änderung hinzufügen“ unten im Fenster ein Plus-Symbol (+) oben im Bereich „Änderungen“ anzeigt.

  • Docken Sie das Bedienfeld „Änderungen“ vertikal an der Seite oder horizontal an der Unterseite der Target-Benutzeroberfläche an. Klicken Sie auf das Andocksymbol, um zwischen den beiden Einstellungen zu wechseln.

    codeditor_dock-Bild

    Die folgende Abbildung zeigt das Bedienfeld „Änderungen“, angedockt an der Unterseite des Bildschirms:

    codeeditor_dock_bottom image

Änderungen hinzufügen section_C7ABCD5731A048CB8F90EDC31A32EDF9

  1. Um die Seite Änderungen für ein ausgewähltes Erlebnis anzuzeigen, klicken Sie im VEC auf das Symbol Änderungen </>.

    codeeditor_icon_big image

    note note
    NOTE
    Um den Bereich „Änderungen“ im formularbasierten Experience Composer zu öffnen, erstellen oder bearbeiten Sie ein HTML-Angebot. Weitere Informationen finden Sie unter Form-Based Experience Composer.

    Die Seite „Änderungen“ wird geöffnet und unterteilt den Bildschirm in den visuellen Modus auf der linken und den Bereich „Änderungen“ auf der rechten Seite. Klicken Sie auf das Andocksymbol, um das Bedienfeld „Änderungen“ vertikal an der Seite oder horizontal an der Unterseite der Target-Benutzeroberfläche anzudocken. Beachten Sie, dass Erlebnis A in der folgenden Abbildung keine vorangegangenen Änderungen aufweist.

    Codeeditor_page-Bild

    Erlebnis B enthält vorangegangene Änderungen im Bereich Änderungen auf der rechten Seite.

    Bild codeeditor_page_mods

  2. So fügen Sie eine Änderung hinzu:

    • Wenn keine vorangegangenen Änderungen für das Erlebnis vorhanden sind, klicken Sie auf die Schaltfläche Änderung hinzufügen, die sich unten im Bereich Änderungen auf der rechten Seite befindet.
    • Wenn vorangegangene Änderungen für das Erlebnis vorhanden sind, klicken Sie auf das Plus-Symbol, das sich oben im Bereich Änderungen auf der rechten Seite befindet.

    Der Bereich „Änderungen“ zeigt Folgendes an:

    codeeditor_page_mods_add image

  3. Wählen Sie in der Dropdownliste Änderungstyp den gewünschten Typ aus:

    table 0-row-2 1-row-2 2-row-2 3-row-2
    Änderungstyp Details
    CSS-Selektor Geben Sie im Feld „CSS-Elementselektor“ das gewünschte CSS-Element an, das Sie ändern möchten, wählen Sie einen Aktionstyp aus (Inhalt festlegen oder Attribut festlegen) und geben Sie anschließend die gewünschten Informationen und den gewünschten Inhalt ein.
    mbox

    Geben Sie den Mbox-Namen und den gewünschten Inhalt an.

    Hinweis: Mboxes werden im VEC auf Seiten, die at.js 2 verwenden, nicht mehr unterstützt.x.

    Als Problemumgehungen:

    • Bei Verwendung von at.js 2.x, fügen Sie anstelle einer Mbox-Änderung eine CSS-Selektor-Änderung hinzu und fügen Sie den Inhalt in den Selektor ein, den Ihre Mbox verwendet hat.
    • Verwenden formularbasierter Aktivitäten (funktioniert mit Mboxes und at.js 1.x und at.js 2.x).
    • Verwenden Sie at.js 1.x im VEC.
    Benutzerspezifischer Code

    Geben Sie einen optionalen Namen ein, aktivieren Sie ggf. das Kontrollkästchen Code zum Bereich <HEAD> hinzufügen und fügen Sie dann Ihren benutzerspezifischen Code hinzu.

    Wenn Sie Code zum Bereich <HEAD> hinzufügen aktivieren, wird der benutzerspezifische Code zum Bereich <head> hinzugefügt, damit er bereits vor <body>- und Seitenlade-Ereignissen ausgeführt werden kann. Fügen Sie ausschließlich Elemente der Typen <script> und <style> hinzu. Das Hinzufügen von <div>-Tags und anderen Elementen kann dazu führen, dass die verbleibenden <head>-Elemente in den Abschnitt <body> springen. Wenn Sie at.js verwenden, werden alle Angebote asynchron bereitgestellt.

    Wenn Sie Code zum Bereich <HEAD> hinzufügen deaktivieren, wird der benutzerspezifische Code umgehend nach dem Tag <body> ausgeführt. Schließen Sie den gesamten Code in einen einzelnen <div>-Container ein, um die DOM-Struktur beizubehalten. Wenn Sie at.js verwenden, werden alle Angebote asynchron bereitgestellt.

    Wenn HTML für <BODY> contains <SCRIPT> und <DIV>, dann <DIV> an <BODY> und <SCRIPT> ausgeführt in <HEAD>. Außerdem <SCRIPT> , das eine externe Datei lädt, wird an <HEAD>.

    Hinweis: Skripts werden asynchron ausgeführt. Das bedeutet, dass Sie beispielsweise nicht document.write oder ähnliche Skriptmethoden verwenden können.

    Benutzerspezifischer Code bietet eine nicht visuelle Schnittstelle zum Anzeigen, Bearbeiten und Hinzufügen neuer Aktionen im VEC, im formularbasierten Experience Composer und im HTML-Angebotseditor. Der Bereich bietet eine Codeansicht für Erlebnisse, mit der Sie komplexere Erlebnisse erstellen, vorhandene Erlebnisse fein abstimmen und Probleme beheben können.

    Benutzerspezifischer Code sollte nur von fortgeschrittenen Benutzern verwendet werden, die sich mit HTML, JavaScript und CSS auskennen. Die Codeansicht kann Ihnen dabei helfen, Änderungen zu optimieren oder fein abzustimmen oder Selektorprobleme zu beheben. Sie kann auch zum Hinzufügen von neuem benutzerdefiniertem Code und neuen Aktionen verwendet werden. Sie können mehr als einen benutzerspezifischen Code hinzufügen und optional jeden Code individuell benennen.

    Hinweis: Benutzerspezifischer Code ist aktuell nur für A/B- und XT-(Erlebnis-Targeting-)Aktivitäten verfügbar. Benutzerspezifischer Code ist für Overlays sowie bei Anwendung eines Umleitungsangebots deaktiviert.

    Benutzerspezifischer Code unterstützt die folgenden Anwendungsfälle:

    • Hinzufügen von benutzerdefiniertem JavaScript, HTML oder CSS zur Ausführung oben auf der Seite
    • Anzeigen oder Bearbeiten des Codes, der von VEC nach Änderungen generiert wurde
    • Festlegen von HTML-Inhalten für einen Selektor (nur CSS-Selektoren)
    • Festlegen eines Attributs zu einem HTML-Element
    • Hinzufügen von Angebotsinhalten, die in regionalen Mboxes übergeben werden sollen
    • Wechsel zu DOM-bereit anhand von jQuery
    • Wechsel zu DOM-bereit, ohne jQuery (Internet Explorer 8 wird nicht unterstützt)
    • Tausch mit DOM-Analyse über das Plug-in „elementOnLoad“
    • Benutzerdefinierte Umleitung

    Benutzerspezifischer Code bietet Folgendes:

    • Zeilennummerierung für bessere Nutzbarkeit.
    • Syntaxhervorhebung zum Vermeiden einer falschen Syntax für HTML-Angebote.
    • Möglichkeit, mehrere benutzerspezifische Codes zu erstellen und sie optional individuell zu benennen. Erstellen mehrerer benutzerspezifischer Codes zur Vereinfachung des Debuggings. Statt nur einen benutzerspezifischen Code zu erstellen, um verschiedene Änderungen zu erreichen, können Sie beispielsweise einen separaten benutzerspezifischen Code für jede Änderung erstellen und die Codes eindeutig benennen. Mit separaten benutzerspezifischen Codes sind Ihre Änderungen modularer und leichter verwaltbar. Beachten Sie, dass die Ausführung mehrerer benutzerspezifischer Codes in einer Aktivität nicht zwingend in der Reihenfolge erfolgt, in der sie erstellt wurden.

    Der Bereich „Änderungen“ unterteilt den Bildschirm in den visuellen und den Codemodus. Beide Modi bleiben synchronisiert. Jede visuell vorgenommene Änderung hat eine entsprechende Zeile in der Codeansicht. Und jede Änderung am Code wird auch im visuellen Erlebnis angezeigt. Durch Klicken auf eine Zeile in der Codeansicht wird das entsprechende Element auf der visuellen Seite ausgewählt.

    Benutzerspezifischer Code unterstützt HTML, Skripte und Styles. Jeder gültige HTML-Code und jedes gültige Skript kann hinzugefügt oder bearbeitet werden.

  4. Fügen Sie ggf. zusätzliche Änderungen hinzu.

Anwendungsfälle für benutzerspezifischen Code section_26CB3360097D400FB02E20AE5FDBA352

Der Bereich Benutzerspezifischer Code enthält den Code, der zu Beginn des Ladevorgangs der Seite ausgeführt wird.

Sie können den JavaScript-Code im Tag <head> ausführen. Es wird bei der Ausführung des Codes nicht abgewartet, bis das Tag <body> im DOM vorhanden ist.

Selektoren für nachfolgende visuelle Aktionen hängen von den HTML-Elementen ab, die auf dieser Registerkarte hinzugefügt wurden.

Der Bereich „Benutzerspezifischer Code“ wird normalerweise verwendet, um JavaScript oder CSS oben auf der Seite hinzuzufügen.

codeeditor_custom image

Auf der Registerkarte Benutzerspezifischer Code können Sie Folgendes tun:

  • Verwenden von Inline-JavaScript oder Verlinken auf eine externe JavaScript-Datei

    So ändern Sie beispielsweise die Farbe eines Elements:

    code language-javascript
    <script type="text/javascript">
    document.getElementById("element_id").style.color = "blue";
    </script>
    
  • Konfigurieren eines Inline-Styles oder Verlinken zu einem externen Stylesheet,

    beispielsweise zur Definition einer Klasse für ein Überlagerungselement:

    code language-html
    <style>
    .overlay
    { position: absolute; top:0; left: 0; right: 0; bottom: 0; background: red; }
    </style>
    
  • Hinzufügen von HTML-Snippets zur Definition von neuen Elementen

    Verwenden Sie beispielsweise das folgende HTML-Snippet, um eine Überlagerung <div> anhand der oben definierten CSS-Klasse zu erstellen:

    code language-html
    <div class="overlay"></div>
    
  • Wechsel zu DOM-bereit anhand von jQuery

    Im folgenden Beispiel wird bei Verwendung von JQuery davon ausgegangen, dass auf der Website des Kunden jQuery auf der Seite verfügbar ist, wenn Target führt die Angebote aus.

    code language-javascript
    <style>#default_content {visibility:hidden;}</style>
    <script>
    jQuery( document ).ready(function() {
        jQuery("#default_content").html( "<span style='color:red'>Hello <strong>Again</strong></span>" );
        jQuery("#default_content").css("visibility","visible");
    });
    </script>
    
  • Wechsel zu DOM-bereit, ohne jQuery (Internet Explorer 8 wird nicht unterstützt)

    code language-javascript
    <style>#default_content {visibility:hidden;}</style>
    <script>
    document.addEventListener("DOMContentLoaded", function(event) {
        document.getElementById("default_content").innerHTML = "<span style='color:red'>Hello <strong>Again</strong></span>";
        document.getElementById("default_content").style.visibility="visible";
    });
    </script>
    
  • Benutzerdefinierte Umleitung zur Übergabe von vorhandenen Parametern, s_tnt-Parameter (für die Integration von Legacy in Analytics), Parametern für Referrer und Mbox-Sitzung

    code language-javascript
    <style type="text/css">body{display:none!important;}</style>
    <script type="text/javascript">
     var qs='';window.location.search?qs=window.location.search+'&':qs='?';
     window.location.replace('//www.mywebsite.com/'+qs+'s_tnt=${campaign.id}:${campaign.recipe.id}:${campaign.recipe.trafficType}&s_tntref='+encodeURIComponent(document.referrer)+'&mboxSession='+mboxFactoryDefault.getSessionId().getId()+''+window.location.hash+'');
    </script>
    
  • Fügen Sie Adobe Target-Erlebnisvorlagen für die Verwendung in benutzerspezifischem Code hinzu. Target-Erlebnisvorlagen sind vorkonfigurierte Codebeispiele mit konfigurierbaren Eingaben, die für beliebte Marketing-Anwendungsfälle eingesetzt werden können. Diese Erlebnisvorlagen stehen Entwicklern und Marketing-Experten kostenlos zur Verfügung und bilden die Basis für beliebte Anwendungsfälle – entweder über den VEC oder den formularbasierten Experience Composer. Zu den Anwendungsfällen zählen Lightboxes, Karussells, Countdowns und mehr.

    Weitere Informationen finden Sie unter Erlebnisvorlagen.

Best Practices für benutzerspezifischen Code section_10DFFD9FB92A43C1BB444A45E0272B28

Schließen Sie den benutzerspezifischen Code immer in ein Element ein.

Beispiel:

<div id="custom-code">
// My Code goes here
</div>

Falls Änderungen erforderlich sind, nehmen Sie sie in diesem Container vor.

Wenn Sie den benutzerspezifischen Code nicht mehr benötigen, lassen Sie den Container einfach leer, doch entfernen Sie ihn nicht. Dadurch wird sichergestellt, dass andere Erlebnisänderungen nicht betroffen sind.

Verwenden Sie nicht die Element-ID „CDQID“ für Änderungen an der Seite, die im Code-Editor vorgenommen wurden.

Target wendet eine neue Element-ID mit dem Wert „CDQID“ auf alle Elemente der Seite an, die von Target geändert wird. Da diese ID von Target angewendet wird, sollte sie nicht für weitere Änderungen oder Anpassungen im Code-Editor verwendet werden.

Führen Sie keine document.write-Aktionen in Skripts mit benutzerspezifischem Code durch.

Skripts werden asynchron ausgeführt. Dies verursacht oft, dass document.write-Aktionen an der falschen Stelle einer Seite erscheinen. Die Verwendung von document.write in Skripten, die in benutzerspezifischem Code erstellt wurden, ist nicht zu empfehlen.

Wenn Sie ein Element erstellen und es dann ändern, löschen Sie das ursprüngliche Element nicht.

Jede Änderung erstellt ein neues Element im Bereich „Änderungen“. Da die zweite Aktion Element 1 bearbeitet, kann in dieser Aktion nichts mehr geändert werden, wenn Sie Element 1 löschen. Daher funktioniert die Änderung nicht mehr. Weitere Informationen finden Sie im folgenden Abschnitt zur Fehlerbehebung.

Gehen Sie vorsichtig vor, wenn Sie die Funktion für benutzerspezifischen Code für zwei Aktivitäten verwenden, die dieselbe URL als Ziel auswählen.

Wenn Sie die Funktion für benutzerspezifischen Code für zwei Aktivitäten verwenden, die dieselbe URL als Ziel auswählen, wird JavaScript von beiden Aktivitäten in die Seite eingefügt. Target legt automatisch die Reihenfolge der bereitgestellten Inhalte fest. Stellen Sie sicher, dass der Code nicht von der Platzierung abhängt. Sie sind selbst dafür verantwortlich, dass es keine Konflikte im Code gibt.

Fehlerbehebung Benutzerspezifischer Code section_6C965CBC31C348D7AA5B57B63DAB9E7F

Benutzerspezifischer Code wird bei Verwendung von triggerView.

Angebote mit benutzerdefiniertem Code in VEC werden nicht erneut gerendert, wenn triggerView() mit {page: false} als Option aufgerufen wird.

Ich habe eine Warnung mit dem Hinweis erhalten, dass eine Aktion aufgrund von strukturellen Änderungen auf einer Seite nicht ausgeführt werden kann. Was bedeutet das?

Die Nachricht gibt an, dass sich die Struktur Ihrer Seite seit dem letzten Speichern der Aktivität geändert hat.

Die fehlenden Auswahlelemente können möglicherweise über den Durchsuchen-Modus erreicht werden. Es wird empfohlen, die einzelnen Erlebnisse zu löschen und anschließend neu zu erstellen, um zu gewährleisten, dass der Inhalt erwartungsgemäß dargestellt wird, wie in der Warnmeldung angegeben.

Bild code_editor_2

Wenn ich ein Element lösche, sehe ich die Warnung: „Das Löschen dieser Aktion kann sich auf darauffolgende Aktionen auswirken.“ Was bedeutet das?

Wenn Sie beispielsweise zwei Aktionen durchgeführt haben:

  • Hinzufügen einer Klasse zu Element 1
  • Bearbeiten des HTML für Element 1

Jede Änderung erstellt ein neues Element im Bereich „Änderungen“. Da die zweite Aktion Element 1 bearbeitet, kann in der zweiten Aktion nichts mehr geändert werden, wenn Sie Element 1 löschen. Daher funktioniert die Änderung nicht mehr.

Mit anderen Worten: Wenn Sie ein Element mit Text hinzufügen und dieses Element in einer anderen Aktion mit anderem Text bearbeiten, dann zeigt der Bereich „Änderungen“ beide Aktionen als separate Elemente an. Bei der Bearbeitung des Elements haben Sie ein neues Element erstellt, das das ursprünglich von Ihnen erstellte Element ändert und den bearbeiteten Text enthält. Wenn Sie dann das ursprüngliche Element löschen, kann der bearbeitete Text das Element nicht finden, das bearbeitet wurde, und wird folglich nicht angezeigt. Das zweite Element bleibt in der Liste der Elemente erhalten, doch es hat keine Auswirkung auf die Seite, weil das Element, das es ändert, nicht mehr vorhanden ist.

Ein Element, das ich mit document.write in einem Skript erstellt habe, erscheint nicht dort, wo ich es erwarte.

Skripts werden asynchron ausgeführt. Dies verursacht oft, dass document.write-Aktionen an der falschen Stelle einer Seite erscheinen. Die Verwendung von document.write in Skripten, die in benutzerspezifischem Code erstellt wurden, wird von Adobe nicht empfohlen.

Mein JavaScript zeigt Fehler im benutzerspezifischen Code an.

Jedes Inline-JavaScript, das kein gültiges JavaScript ist, zeigt Fehler im benutzerspezifischen Code.

Ich kann eine Änderung im benutzerspezifischen Code nicht rückgängig machen.

Derzeit wird das Rückgängigmachen für Bearbeitungs- und Löschaktionen im Bereich „Änderungen“ und in benutzerspezifischem Code nicht unterstützt. Wenn einer dieser Vorgänge rückgängig gemacht wird, stimmt das Erlebnis im VEC möglicherweise nicht mehr mit den im benutzerspezifischen Code sichtbaren tatsächlichen Aktionen überein. Die Aktionen im benutzerspezifischen Code sind jedoch korrekt und es gibt keine negativen Auswirkungen auf die Bereitstellung. Es handelt sich dabei um ein Problem der Benutzeroberfläche. Zur Aktualisierung des Erlebnisses müssen Sie das Erlebnis speichern und erneut öffnen oder zum nächsten Schritt gehen und zurückkehren. Diese Aktionen laden das Erlebnis neu; es erscheint daraufhin wie erwartet und ist mit den Aktionen im Bereich „Änderungen“ konsistent.

Benutzerdefinierter Code generiert keine erwartungsgemäßen Ergebnisse in Internet Explorer 8.

Target unterstützt IE 8 nicht mehr.

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