Emarsys implementiert einen neuen Workflow für die Content-Erstellung in Web Channel, bei dem Sie neue Tools wie etwa die Web Channel Contentblöcke verwenden können.
Mit Contentblöcken lässt sich die Content-Erstellung von der Kampagnenerstellung trennen; Sie können wiederverwendbare Vorlagen entwerfen und erstellen, die beim Aufbauen neuer Kampagnen einfach aktualisiert und gestaltet werden können.
Für weitere Informationen zu den Web Channel Contentblöcken sehen Sie sich das Video zum Produkt-Release Oktober 2023 an:
Web Channel Contentblöcke - Übersicht
Um alle verfügbaren Web Channel Contentblöcke anzuzeigen, gehen Sie zu Content > Content Blocks. Die Elemente, die Sie hier sehen, können in anderen Kampagnen wiederverwendet werden. Sie finden alle Web Channel Contentblöcke in den folgenden Kategorien:
- Prebuilt: Diese Web Channel Contentblöcke sind für alle verfügbar und können nicht direkt geändert werden. Um sie zu bearbeiten, müssen Sie den Block zunächst kopieren; danach können Sie die Kopie als benutzerdefinierten Block (Custom Block) ändern.
- Branded: Diese Web Channel Contentblöcke werden von den Emarsys Services für Ihren Account erstellt. Diese Contentblöcke können Sie nur sehen, wenn sie speziell für Sie erstellt wurden. Sie können nicht geändert werden. Um sie zu bearbeiten, müssen Sie den Block zunächst kopieren; danach können Sie die Kopie als benutzerdefinierten Block (Custom Block) ändern.
- Custom: Diese Contentblöcke werden von Ihnen erstellt. Sie können jederzeit erstellt und geändert werden.
Ansicht "Content Blocks"
Hier können Sie alle vorgefertigten Blöcke (Prebuilt Blocks) sehen.
Ändern Sie die Ansicht auf Listenansicht (list view) oder zeigen Sie Ihre bereits gelöschten Blöcke an.
Web Channel Contentblöcke erstellen
Klicken Sie Create Block und gehen Sie zur Seite Content Block Creation, um Ihren Block mittels verschiedener Tabs zu bearbeiten.
Wenn Sie einen Contentblock für Web Channel erstellen, sollten Sie Web Channel-spezifische Klassennamen und Eigenschaften verwenden, um ein korrektes Event-Tracking für Ihre Kampagnen sicherzustellen. Weotere Informationen erhalten Sie unter: HTML-Editor
Settings
Auf dem Tab "Settings" können Sie Ihren Web Channel Contentblock benennen und eine kurze Beschreibung des Verwendungszwecks hinzufügen.
Preview
Auf der rechten Seite sehen Sie die aktuelle Vorschau Ihres Web Channel Contentblocks.
Bitte beachten Sie, dass die Vorschau den Impact Ihres HTML- und CSS-Codes einschließlich der Variablen anzeigt, nicht aber den von Javascript. Um den Impact von Javascript auf den Block zu sehen, müssen Sie den Button "Run" auf dem Tab "Javascript" verwenden.
HTML
Der Zugriff auf den Contentblock-Editor ist für die Standard-Benutzerrollen aktiviert. Für von Ihnen erstellte neue Benutzerrollen muss der Zugriff wie folgt aktiviert werden:
- Unter dem Menü Management > Seite Benutzermanagement können Sie Benutzerrollen definieren.
- Auf dem Tab Rollen wählen Sie die von Ihnen erstellte Benutzerolle aus und klicken Sie das Icon Bearbeiten (Bleistift).
- Unter Berechtigungen > Tab Content können Sie die Rechte für den Zugriff auf Kampagnenblöcke definieren.
Wenn Sie Ihre Access-Rolle nicht ändern können, kontaktieren Sie bitte Ihren Account Owner. Weitere Informationen erhalten Sie unter: Benutzerrollen und Berechtigungen
Auf dem Tab "HTML" können Sie die Struktur Ihres Web Channel Contentblocks definieren. Hier müssen Sie den Elementen die Eigenschaft e-editable zuweisen, damit sie bei der Kampagnenerstellung bearbeitet werden können. Für detaillierte Informationen zum Attribut e-editable klicken Sie mehr erfahren.
Fügen Sie einfach die Eigenschaft hinzu und vergeben Sie einen Namen:
<h1 class="wpst-title" e-editable="title">Title</h3>Elemente mit der Eigenschaft e-editable und demselben Namen übernehmen den gleichen Content, daher sollten Sie jedem Element einen eindeutigen Namen geben.
Folgende HTML-Elemente werden von der Eigenschaft e-editable unterstützt:
- Alle Header Tags, wie
<h1> - Absätze (paragraphs)
<p> - Bilder (images)
<img> - Divs
<div>
Um einen Platzhalter für Emarsys Formulare bereitzustellen, empfehlen wir, das folgende Code Snippet hinzuzufügen:
<div data-wps-form-editable="form-content"> <div class="wpst-form-selector"> <p class="wpst-paragraph">Click here to open form toolbar!</p> <p class="wpst-paragraph" style="line-height: 200%">Then click on <span class="wpst-form-selector-icon"> <svg id="ac-entry-form" viewBox="0 0 34.078 37.758" width="100%" height="100%"><path fill="none" d="M24.133 11.7c-.97 0-1.754-.786-1.754-1.755V2.34H2.34v33.078h29.398v-23.72h-7.605zM8.73 31.997H6.09v-2.28h2.64v2.28zm0-4.205H6.09v-2.28h2.64v2.28zm0-4.205H6.09v-2.28h2.64v2.28zm20.56 8.41H11.41v-2.28H29.29v2.28zm0-4.205H11.41v-2.28H29.29v2.28zm0-4.205H11.41v-2.28H29.29v2.28zm-23.198-4.7v-4.94h23.2v4.94H6.09z"></path><path fill="none" d="M31.19 8.61L25.465 2.89c-.128-.127-.438-.293-.75-.402V9.36h6.874c-.108-.31-.274-.622-.4-.75z"></path><path d="M32.834 6.947L27.13 1.244C26.456.568 25.103 0 24.134 0H1.753C.786 0 0 .787 0 1.756v34.248c0 .97.785 1.754 1.754 1.754h32.324V9.945c0-.968-.567-2.322-1.244-2.998zm-8.115-4.46c.31.108.62.274.748.4l5.722 5.724c.13.128.293.44.402.75H24.72V2.485zM2.34 35.416V2.34h20.04v7.605c0 .97.784 1.754 1.753 1.754h7.605v23.718H2.34z"></path><path d="M11.408 29.717H29.29v2.28H11.41zM11.408 25.512H29.29v2.28H11.41zM11.408 21.307H29.29v2.28H11.41zM6.092 13.947h23.2v4.938H6.09zM6.092 29.717h2.64v2.28H6.09zM6.092 25.512h2.64v2.28H6.09zM6.092 21.307h2.64v2.28H6.09z"></path></svg> </span> icon to select/modify form!</p> </div> </div>Das Tab "HTML" ist zwar nur für HTML Content vorgesehen, in den Tags <style> bzw. <script> können Sie hier aber auch Ihr CSS und Javascript unterbringen.
Variablen
Sie können vordefinierte Werte zu Ihrem Block hinzufügen und somit ganz einfach Farben, Schriften und Abstände definieren, das Layout Ihrer Blöcke ändern oder festlegen, welche Elemente Sie in einer bestimmten Kampagne anzeigen wollen.
Es sind verschiedene Variablentypen für die Verwendung verfügbar:
- Farbe
- Bild
- Nummer - Dezimal
- Nummer - Integer
- String
- Auswählen
Definieren Sie Variablen, die Sie in Ihrem Web Channel Contentblock verwenden können.
Weitere Informationen erhalten Sie unter: Variablen
Um eine Variable in Ihrem Code zu verwenden, fügen Sie einfach einen Variablen-Platzhalter hinzu.
.wpst-logo { width: {variables.logoWidth}; }Sie können Variablen für HTML, CSS und Javascript verwenden. Das Format ist immer gleich: {variables.myVariable}
Styles
Auf dem Tab "Styles" können Sie CSS Code zu Ihrem Web Channel Contentblock hinzufügen. Hier können Sie Ihre HTML-Elemente ausarbeiten, Breakpoints und spezielle Regeln für Mobilegeräte hinzufügen und aktuell den Rahmen der Web Channel Overlay-Kampagnen gestalten.
Wenn Sie einen Contentblock ganz neu erstellen, empfehlen wir, sich eines der vorgefertigten Elemente anzusehen, um zu sehen, wie Sie die Kampagnenrahmen in Web Channel gestalten können.
Javascript
Um zusätzliche Funktionen zu Ihren Blöcken hinzuzufügen, zum Beispiel Button-Interaktionen, können Sie Javascript verwenden.
Editing History
Auf diesem Tab können Sie eine Vorschau anzeigen und frühere Versionen wiederherstellen.
Wenn Sie Finish Editing klicken, ist der von Ihnen erstellte Contentblock für die Auswahl in Web Channel verfügbar. Wenn Sie die Option Save as Draft wählen, werden Ihre Änderungen gespeichert, sind aber bei der Kampagnenerstellung nicht sichtbar.
Wenn Sie einen Contentblock in Web Channel verwenden, wird die aktive Version des Contentblocks als Kampagneninhalt eingefügt. Änderungen am Contentblock haben jedoch keine Auswirkungen auf die Kampagne, Sie müssen die neue Version manuell hinzufügen.
Spezielle Syntax für Web Channel
Damit Klicks auf Links in einer mit dem HTML Editor erstellten Web Channel Kampagne erfolgreich getrackt werden können, müssen Sie folgendes Attribut verwenden: data-wps-href
Personalisierung
Sie können Personalisierungs-Tokens zu Web Channel Kampagnen hinzufügen, indem Sie die Eigenschaft e-editable verwenden und sie direkt während der Kampagnenerstellung hinzufügen. Sie können das Inline Pop-up oder den Drag&Drop-Editor verwenden.
Sie haben auch die Möglichkeit, einen Verweis auf Ihre Personalisierungs-Tokens direkt in den Code einzufügen oder sogar die ESL-Syntax zu verwenden, wenn Sie eine erweiterte Personalisierungslogik verwenden wollen. Alle Personalisierungsfunktionen stehen für Web Channel zur Verfügung, einschließlich der auf Relational Data basierenden Personalisierung.
Nur Web Channel Kampagnen, die Segmente adressieren oder in Automation Center Programmen enthalten sind, können Personalisierungs-Tokens enthalten.
Neue Contentblöcke in Web Channel Kampagnen
In einer Web Channel Kampagne können Sie alle Contentblöcke mit allen Kampagnentypen verwenden. Das bedeutet zum Beispiel, dass in einer Overlay Web Channel-Kampagne und in einer Embedded Web Channel-Kampagne derselbe Contentblock verwendet werden kann.
Blockbasierte Web Channel Kampagne erstellen
- Um eine blockbasierte Web Channel Kampagne zu erstellen, gehen Sie zu Web Channel > Campaigns.
- Klicken Sie Create Block Based Campaign.
- Wählen Sie einen Kampagnentyp aus.
- Im Schritt "Content" sehen Sie alle verfügbaren Web Channel Contentblöcke.
Wenn ein Web Channel Contentblock, den Sie zuvor erstellt haben, hier nicht angezeigt wird, vergewissern Sie sich, dass Sie ihn mit dem Button Finish Editing gespeichert haben.
Während der Kampagnenerstellung können Sie keine strukturellen Änderungen am Web Channel Contentblock vornehmen. Sie können nur:
- den bearbeitbaren Content ändern
- den Wert von Variablen setzen und
- Personalisierungs-Tokens hinzufügen.
Um strukturelle Änderungen vorzunehmen, bearbeiten Sie den ausgewählten Web Channel Contentblock. Im Fall von Web Channel Contentblöcken des Typs "Prebuilt" und "Branded" müssen Sie zuerst eine Kopie erstellen.
Bekannte Einschränkungen, geplante Verbesserungen
Folgende Verbesserungen sind für spätere Entwicklungsstufen im Pilot Release geplant:
- Unterstützung für Web Channel Kampagnen mit mehreren Seiten.
- Eingebaute Variablen für die Rahmengestaltung bei Web Channel Kampagnen des Typs "Overlay" und eine Vorschau auf die Rahmen während der Kampagnenerstellung.