Benutzer-Werkzeuge

Webseiten-Werkzeuge

Sie befinden sich hier: Test Dokuwiki For ServiceCenter » promio.connect Wiki » Wie entwickle ich E-Mail-Vorlagen für promio.connect?
Zuletzt angesehen:
de:otml

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen RevisionVorhergehende Überarbeitung
de:otml [2022/04/07 17:25] – fwde:otml [2025/07/22 11:03] (aktuell) – bk
Zeile 1: Zeile 1:
-{{page>en:otml}}+====== Wie entwickle ich E-Mail-Vorlagen für promio.connect? ====== 
 + 
 + 
 +Das folgende Dokument enthält technische Informationen zur Entwicklung von E-Mail-Vorlagen für promio.connect. 
 +  
 + 
 +===== Allgemeine Informationen ===== 
 + 
 +  * Sonderzeichen müssen XML-konforme Entitäten enthalten: 
 +    *  ''"'' 
 +    * ''&'' 
 +    * ''''' 
 +    * ''<'' 
 +    * ''>'' 
 +    * für alle anderen Entitäten müssen Sie die Dezimalsyntax verwenden; benutzen Sie z.B. '' '' instead of '' '' 
 +  * UTF-8 4-byte Zeichen werden derzeit nicht unterstützt. Sie können die Bytelänge mit verschiedenen Tools überprüfen, z.B. [[http://www.ltg.ed.ac.uk/~richard/utf-8.cgi|UTF-8 Tool]]. 
 +  * Die Zeilenlänge im Quellcode **darf 700 Zeichen nicht überschreiten**. 
 + 
 + 
 +Wenn Sie eine IDE zur Entwicklung der Vorlage verwenden, verwenden Sie die folgenden Namespaces für die korrekte Syntaxhervorhebung: 
 + 
 +<code html> 
 +<html xmlns="http://www.w3.org/1999/xhtml" 
 +      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
 +      xmlns:pme="http://www.promio.net/pmeType" 
 +      xmlns:pm="http://www.promio.net/pmType"> 
 +</html> 
 +</code> 
 + 
 + 
 +===== OTML ===== 
 + 
 +OTML ist eine Erweiterung des HTML-Standards, die speziell für die Verwendung im E-Mail-Editor von promio.connect entwickelt wurde. 
 +Daher sind HTML- und CSS-Kenntnisse zwingend erforderlich. 
 + 
 +OTML ermöglicht es, bestimmte Teile einer E-Mail editierbar zu machen. Die Gesamtstruktur der E-Mail bleibt dabei unverändert. 
 +Der E-Mail-Entwickler erstellt die E-Mail zunächst wie gewohnt. Anschließend können alle gewünschten Teile mithilfe von OTML editierbar gemacht werden. 
 + 
 +Die OTML-Elemente sind in zwei Namensräume unterteilt: „pm“ und „pme“: 
 +* „pm“-Elemente dienen der automatischen Generierung oder Integration von Inhalten, wie z. B. Inhaltsverzeichnissen oder Datenquellen. 
 +* „pme“-Elemente sind vom Benutzer editierbare Elemente, z. B. einzeilige und mehrzeilige Editoren. 
 +==== Bearbeitbarer Titel ==== 
 + 
 +Wenn Sie möchten, dass der Benutzer den Titel der E-Mail bearbeiten kann, fügen Sie Ihrem Tag ''<title>'' das Attribut ''editable="true"'' hinzu. Dies hat meist nur dann Auswirkungen, wenn die E-Mail in der eigenständigen Browserversion geöffnet wird. 
 + 
 +=== Beispiel === 
 + 
 +<code html> 
 +<!DOCTYPE html> 
 +<html> 
 +  <head> 
 +    <title editable="true">E-Mail Title</title> 
 +  </head> 
 +  <body> 
 +    <div> 
 +      <a href="http://system.promio-mail.com/view/" target="_blank"> 
 +        Please click here if you can't read this E-Mail. 
 +      </a> 
 +    </div> 
 +  ... 
 +</code> 
 + 
 + 
 +==== Repeater ==== 
 + 
 +Ein Repeater wird durch das OTML-Tag „<pme:repeater />“ dargestellt. 
 + 
 +Ein Repeater-Element definiert einen Bereich mit sich wiederholenden Blöcken und muss ein oder mehrere <pme:layout />-Elemente enthalten. Jedes Layout kann dann vom Nutzer über eine Auswahlliste zur E-Mail hinzugefügt werden. 
 + 
 +Das Repeater-Element kann ein oder mehrere <pme:repeatercontent />-Elemente enthalten. 
 + 
 + 
 +Eine genaue Anleitung zur Erstellung eines Creatives mit dem E-Mail-Builder finden Sie im Artikel //"[[de:e_mail_builder]]"//. 
 + 
 +Individuelle Erläuterungen zu Ihren eigenen Templates können in einer mandantensprezifischen Wiki hinterlegt werden. Der Mandant benötigt hierzu eine Lizenz. Bei Interesse kontaktieren Sie bitte unseren Support. 
 + 
 +^ Attribut ^ Typ ^ Erforderlich ^ Beschreibung ^ 
 +| Titel | Zeichenfolge | Nein | Titel des Repeaters. Dies ist nützlich, wenn Sie mehr als einen Repeater in Ihrer Vorlage verwenden. | 
 + 
 + 
 +=== Beispiel === 
 + 
 +<code html> 
 +<pme:repeater> 
 + 
 + <pme:layout name="Layout 1"> 
 + <table border="0" cellpadding="0" cellspacing="0" width="100%"> 
 + <tr> 
 + <td>Layout 1</td> 
 + </tr> 
 + </table> 
 + </pme:layout> 
 + 
 + <pme:layout name="Layout 2"> 
 + <table border="0" cellpadding="0" cellspacing="0" width="100%"> 
 + <tr> 
 + <td>Layout 2</td> 
 + </tr> 
 + </table> 
 + </pme:layout> 
 +  
 + <pme:repeatercontent> 
 + <table border="0" cellpadding="0" cellspacing="0" width="100%"> 
 + <tr> 
 + <td>Layout 1</td> 
 + </tr> 
 + </table> 
 + </pme:repeatercontent> 
 +  
 +</pme:repeater> 
 +</code> 
 + 
 + 
 + 
 +==== Layout ==== 
 + 
 +Ein Layout wird durch das OTML-Tag „<pme:layout />“ dargestellt. 
 + 
 +Ein Layout-Element enthält eine Vorlage, die der E-Mail hinzugefügt werden kann. Es ist ein Unterelement des Elements „<pme:repeater>“ und kann mehrfach hinzugefügt werden. 
 + 
 + 
 +^ Attribut ^ Typ ^ Erforderlich ^ Beschreibung ^ 
 +| Name | Zeichenfolge | Ja | Eindeutiger Name für das Layout | 
 + 
 + 
 +=== Beispiel === 
 + 
 +<code html> 
 +<pme:repeater> 
 + 
 + <pme:layout name="Layout 1"> 
 + <table border="0" cellpadding="0" cellspacing="0" width="100%"> 
 + <tr> 
 + <td>Layout 1</td> 
 + </tr> 
 + </table> 
 + </pme:layout> 
 +  
 +</pme:repeater> 
 +</code> 
 + 
 + 
 + 
 +==== Repeater-Inhalte ==== 
 + 
 +Ein Repeater-Inhalt wird durch das OTML-Tag „<pme:repeatercontent />“ repräsentiert. 
 + 
 +Der Repeater-Inhalt bestimmt einen vordefinierten Teil eines „<pme:repeater />“-Elements und verhält sich genau wie ein „<pme:layout />“-Element. 
 +Er ist ein Unterelement des „<pme:repeater>“-Elements und kann mehrfach hinzugefügt werden. Mit dem „<pme:repeatercontent />“-Element ist es möglich, 
 +ein „<pme:repeater />“-Element vorab zu füllen. 
 + 
 +=== Beispiel === 
 + 
 +<code html> 
 +<pme:repeater> 
 + 
 + <pme:layout name="Layout 1"> 
 + <table border="0" cellpadding="0" cellspacing="0" width="100%"> 
 + <tr> 
 + <td>Layout 1</td> 
 + </tr> 
 + </table> 
 + </pme:layout> 
 +  
 + <pme:repeatercontent> 
 + <table border="0" cellpadding="0" cellspacing="0" width="100%"> 
 + <tr> 
 + <td>Layout 1</td> 
 + </tr> 
 + </table> 
 + </pme:repeatercontent> 
 +  
 +</pme:repeater> 
 +</code> 
 + 
 + 
 + 
 +==== Preheader ==== 
 + 
 +Ein Preheader wird durch das OTML-Tag „<pme:preheader />“ dargestellt. 
 + 
 +Ein Preheader ist der Vorschautext, der in den meisten E-Mail-Clients unter dem Absender angezeigt wird. 
 + 
 +Während der E-Mail-Erstellung wird der Inhalt des Preheader-Elements direkt nach dem Tag „<body>“ eingefügt. Alle von promio.connect bereitgestellten Tracking-Pixel werden nach dem Preheader eingebettet. Dadurch ist für den Endnutzer kein HTML-Quellcode sichtbar. 
 + 
 +<code html> 
 +<pme:preheader>This is the preheader text.</pme:preheader> 
 +</code> 
 + 
 + 
 + 
 +==== Singleline ==== 
 + 
 +Ein einzeiliges Element wird durch das OTML-Tag „<pme:singleline />“ repräsentiert. 
 + 
 +Das einzeilige Element bietet ein einfaches Texteingabefeld und wird meist für kurze Texte wie Überschriften verwendet. 
 + 
 +^ Attribut ^ Typ ^ Erforderlich ^ Beschreibung ^                                                                                                                           
 +| data-pmclass | string | Nein | Der Wert wird als Klasse für das Link-Element festgelegt, wenn dem einzeiligen Element ein Link hinzugefügt wird. | 
 +| label | string | Nein | Der Titel des Elements, der in der Bearbeitungsansicht angezeigt wird. | 
 +| linkable | boolean | Nein | Wenn „linkable“ „false“ ist, kann kein Link um das einzeilige Element herum hinzugefügt oder geändert werden. | 
 +| pmtoctitle | string | Nein | Titel für den Eintrag im Inhaltsverzeichnis.<br>Legen Sie einen Wert fest, um einen Titel vorab zuzuweisen, oder lassen Sie das Feld leer, um bei Bedarf einen Inhaltsverzeichnistitel festlegen zu können. | 
 +| max-length | integer | Nein | Maximale Zeichenlänge. Der Benutzer kann dieses Limit nicht überschreiten.                                                        | 
 + 
 + 
 +=== Beispiel === 
 + 
 +<code html> 
 +<pme:singleline label="Headline" max-lenght="30">My Headline</pme:singleline> 
 + 
 +<a class="link" href="https://www.promio.net" target="_blank"> 
 + <pme:singleline data-pmclass="link" label="Link">Click me</pme:singleline> 
 +</a> 
 +</code> 
 + 
 + 
 + 
 +==== Multiline und Multiline-Config ==== 
 + 
 +Ein mehrzeiliges Element wird durch das OTML-Tag „<pme:multiline />“ dargestellt. 
 + 
 +Das mehrzeilige Element bietet einen erweiterten Text- und HTML-Editor basierend auf CKEditor 4. Es wird hauptsächlich für lange Texte oder HTML-Eingaben verwendet. 
 + 
 +^ Attribut ^ Typ ^ Erforderlich ^ Beschreibung ^ 
 +| label | string | Nein | Der Titel des Elements, der in der Bearbeitungsansicht angezeigt wird. | 
 +| linkable | boolean | Nein | Ermöglicht das Hinzufügen eines Links um den Editorinhalt. Wenn Sie diese Option aktivieren, empfehlen wir Ihnen, für diese Editoren eine spezielle mehrzeilige Konfiguration zu verwenden, in der der Link-Button aus der Symbolleiste entfernt wird. | 
 +| pmtoctitle | string | Nein | Titel für den Eintrag im Inhaltsverzeichnis.<br>Legen Sie einen Wert fest, um einen Titel vorab zuzuweisen, oder lassen Sie das Feld leer, um bei Bedarf einen Inhaltsverzeichnistitel festlegen zu können. | 
 +| max-length | integer | Nein | Maximale Zeichenlänge. Der Benutzer kann dieses Limit überschreiten, es wird jedoch eine Warnung angezeigt. | 
 +| config | string | Nein | Name der mehrzeiligen Konfiguration, die für diesen Editor verwendet werden soll. | 
 + 
 +=== Beispiel === 
 + 
 +<code html> 
 +<pme:multiline label="Text">Lorem ipsum dolor sit amet</pme:multiline> 
 +</code> 
 + 
 + 
 + 
 +Der mehrzeilige Editor kann mit einem mehrzeiligen Konfigurationselement konfiguriert werden, das durch den OTML-Tag „<pm:multiline-config>“ repräsentiert wird. 
 + 
 +^ Attribut ^ Typ ^ Erforderlich ^ Beschreibung ^ 
 +| Name | Zeichenfolge | Ja | Der Name des Konfigurationselements. | 
 +| Standard | Boolescher Wert | Nein | Auf „true“ setzen, wenn diese Konfiguration für alle pme:multiline-Elemente verwendet werden soll, für die kein Konfigurationsname angegeben ist. | 
 + 
 +Der Inhalt einer mehrzeiligen Konfiguration muss eine CKEditor-Konfiguration im JSON-Format sein. 
 + 
 + 
 +=== Beispiel === 
 + 
 +<code html> 
 +<pm:multiline-config default> 
 +{ 
 +  "forcePasteAsPlainText": true, 
 +  "toolbar": [ 
 + { 
 +   "name": "basicstyles", 
 +   "items": [ 
 + "Bold", 
 + "Italic", 
 + "-", 
 + "Subscript", 
 + "Superscript", 
 + "-", 
 + "RemoveFormat" 
 +   ] 
 + }, 
 + { 
 +   "name": "links", 
 +   "items": [ 
 + "Link", 
 + "Unlink" 
 +   ] 
 + }, 
 + { 
 +   "name": "insert", 
 +   "items": [ 
 + "Table", 
 + "SpecialChar" 
 +   ] 
 + }, 
 + { 
 +   "name": "clipboard", 
 +   "groups": [ 
 + "clipboard", 
 + "undo" 
 +   ], 
 +   "items": [ 
 + "Cut", 
 + "Copy", 
 + "Paste", 
 + "-", 
 + "Undo", 
 + "Redo" 
 +   ] 
 + }, 
 + { 
 +   "name": "promio", 
 +   "items": [ 
 + "promioPersFunc", 
 + "promioTemplates" 
 +   ] 
 + }, 
 + { 
 +   "name": "document", 
 +   "items": [ 
 + "Source" 
 +   ] 
 + }, 
 + { 
 +   "name": "tools", 
 +   "items": [ 
 + "Maximize" 
 +   ] 
 + } 
 +  ] 
 +} 
 +</pm:multiline-config> 
 + 
 +<pm:multiline-config name="linkable-editor"> 
 +{ 
 +  "forcePasteAsPlainText": true, 
 +  "toolbar": [ 
 + { 
 +   "name": "basicstyles", 
 +   "items": [ 
 + "Bold", 
 + "Italic", 
 + "-", 
 + "Subscript", 
 + "Superscript", 
 + "-", 
 + "RemoveFormat" 
 +   ] 
 + }, 
 + { 
 +   "name": "insert", 
 +   "items": [ 
 + "Table", 
 + "SpecialChar" 
 +   ] 
 + }, 
 + { 
 +   "name": "clipboard", 
 +   "groups": [ 
 + "clipboard", 
 + "undo" 
 +   ], 
 +   "items": [ 
 + "Cut", 
 + "Copy", 
 + "Paste", 
 + "-", 
 + "Undo", 
 + "Redo" 
 +   ] 
 + }, 
 + { 
 +   "name": "promio", 
 +   "items": [ 
 + "promioPersFunc", 
 + "promioTemplates" 
 +   ] 
 + }, 
 + { 
 +   "name": "document", 
 +   "items": [ 
 + "Source" 
 +   ] 
 + }, 
 + { 
 +   "name": "tools", 
 +   "items": [ 
 + "Maximize" 
 +   ] 
 + } 
 +  ] 
 +} 
 +</pm:multiline-config> 
 + 
 +/* This editor uses the default config */ 
 +<pme:multiline>Text</pme:multiline> 
 + 
 +/* This editor uses the "linkable-editor" config */ 
 +<pme:multiline config="linkable-editor">Text</pme:multiline> 
 +</code> 
 + 
 +==== Bilder ==== 
 + 
 +Bilder haben keine spezielle OTML-Elementdarstellung. Stattdessen verwenden sie das Standard-HTML-Tag „<img />“ mit erweiterten Attributen. 
 + 
 + 
 +^ Attribut ^ Typ ^ Erforderlich ^ Beschreibung ^ 
 +| pmedit | Boolean | Nein | Wenn pmedit wahr ist, kann das Bild bearbeitet werden. | 
 +| pmscale | Zeichenfolge | Nein | Mögliche Werte: Zuschneiden / Höhe / Breite | 
 +| pmscaleheight | Ganzzahl | Nein | Verwenden Sie eine andere Höhe als die im Attribut „height“ definierte. Dies ist nützlich für die Darstellung auf HiDPI-/Retina-Displays. | 
 +| pmscalewidth | Ganzzahl | Nein | Verwenden Sie eine andere Breite als die im Attribut „width“ definierte. Dies ist nützlich für die Darstellung auf HiDPI-/Retina-Displays. | 
 +| pmtoctitle | Zeichenfolge | Nein | Titel für den Eintrag im Inhaltsverzeichnis.<br>Legen Sie einen Wert fest, um einen Titel vorab zuzuweisen, oder lassen Sie das Feld leer, um bei Bedarf einen Inhaltsverzeichnistitel festlegen zu können. | 
 + 
 +=== Werte für pmscale === 
 + 
 +^ Wert ^ Beschreibung ^ 
 +| Zuschneiden | Bild zentrieren und auf die definierten Abmessungen zuschneiden. **Höhe und Breite müssen definiert sein.** 
 +| Höhe | Bildgröße auf die definierte Höhe anpassen. Die Breite wird proportional zu den Abmessungen des Originalbilds berechnet. | 
 +| Breite | Bildgröße auf die definierte Breite anpassen. Die Höhe wird proportional zu den Abmessungen des Originalbilds berechnet. | 
 + 
 + 
 +=== Beispiel === 
 + 
 +<code html> 
 +<img alt="Image" height="200" src="image.png" pmedit="true" pmscale="crop" width="200" /> 
 + 
 +<img alt="Image" height="50" src="image.png" pmedit="true" pmscale="height"  /> 
 + 
 +<img alt="Image" src="image@3x.png" pmedit="true" pmscale="width" pmscalewidth="600" width="200" /> 
 +</code> 
 + 
 + 
 + 
 +==== Termin ==== 
 + 
 +Um einen Link zu einem Termin bereitzustellen, können Sie das Element „<pme:appointment>“ verwenden. 
 +Basierend auf den eingegebenen Daten wird eine iCal-Kalenderdatei generiert. 
 + 
 +^ Attribut ^ Beschreibung ^ 
 +| Text | In der E-Mail sichtbarer Text | 
 +| Zusammenfassung | Titel des Termins | 
 +| OrganizerName | Name des Terminorganisators | 
 +| OrganizerEmail | E-Mail-Adresse des Terminorganisators | 
 +| DateTimeStart | Startdatum und -uhrzeit des Termins | 
 +| DateTimeEnd | Enddatum und -uhrzeit des Termins | 
 +| Location | Ort des Termins | 
 +| Description | Beschreibung des Termins | 
 + 
 + 
 + 
 +<code html> 
 +<pme:appointment> 
 + 
 +</pme:appointment> 
 +</code> 
 + 
 + 
 + 
 +==== Inhaltsverzeichnis ==== 
 + 
 +Ein Inhaltsverzeichnis (TOC) wird durch das OTML-Tag „<pm:toc />“ dargestellt. 
 + 
 +Das TOC-Element dient der automatischen Generierung eines Inhaltsverzeichnisses basierend auf den Werten und der Reihenfolge der verwendeten „pmtoctitle“-Attribute. 
 + 
 +Das TOC-Element benötigt genau ein „<pm:tocitem />“-Element, das den Wert des verarbeiteten „pmtoctitle“-Attributs repräsentiert. Der 
 +gesamte Inhalt des TOC-Elements wird für jedes „pmtoctitle“-Attribut mit einem Wert wiederholt eingefügt. 
 + 
 +=== Beispiel === 
 + 
 +== Vorlage == 
 + 
 +<code html> 
 +<ul> 
 + <pm:toc> 
 + <li><pm:tocitem /></li> 
 + </pm:toc> 
 +</ul> 
 + 
 +<pme:singleline pmtoctitle="Headline 1">Content</pme:singleline> 
 +<pme:singleline pmtoctitle="Headline 2">Content</pme:singleline> 
 +</code> 
 + 
 + 
 + 
 +== Rendered code == 
 + 
 +<code html> 
 +<ul> 
 + <li> 
 + <a href="#link_to_anchor_1">Headline 1</a> 
 + </li> 
 + <li> 
 + <a href="#link_to_anchor_2">Headline 2</a> 
 + </li> 
 +</ul> 
 +</code> 
 + 
 + 
 + 
 +==== Externe Datenquellen ==== 
 + 
 +Externe Datenquellen ermöglichen die Einbindung von RSS-Feed-Inhalten in E-Mails. 
 + 
 +Die Einrichtung externer Datenquellen erfolgt individuell durch die promio.net GmbH. Bei Interesse an der Nutzung kontaktieren Sie bitte unser Support-Team per Ticket. 
 + 
 + 
 + 
 +=== Source === 
 +Das Quellelement wird durch das OTML-Tag „<pm:source />“ repräsentiert. 
 + 
 +Es dient als Wrapper für die verschiedenen Quellelemente und kann ein oder mehrere „<pm:sourceitem />“-Elemente enthalten. 
 + 
 +^ Attribut ^ Erforderlich ^ Typ ^ Beschreibung ^ 
 +| pmedit | Nein | Boolean | Wenn „true“, dürfen Benutzer Datenquellen ändern. | 
 + 
 + 
 +=== Quellelement === 
 + 
 +Ein Quellelement wird durch das OTML-Tag „<pm:sourceitem />“ repräsentiert. 
 + 
 +Es dient als Verbindung zwischen der E-Mail und der eingerichteten Datenquelle. 
 + 
 +^ Attribut ^ Erforderlich ^ Typ ^ Beschreibung ^ 
 +| Name | Ja | Zeichenfolge | Eindeutiger Name der Datenquelle. | 
 +| Aktualisierungsmodus | Ja | Zeichenfolge | Mögliche Werte: Erstellung / Zustellung | 
 + 
 +== Werte für Aktualisierungsmodus == 
 + 
 +^ Wert ^ Beschreibung ^ 
 +| Erstellung | Datenquelle beim Erstellen der E-Mail aktualisieren. | 
 +| Zustellung | Datenquelle vor dem Senden der Kampagne aktualisieren. | 
 + 
 + 
 + 
 +=== Datenabschnitt === 
 + 
 +Ein Datenabschnitt wird durch das OTML-Tag „<pm:datasection />“ repräsentiert. 
 + 
 +Datenabschnitte dienen dazu, die Vorlage mithilfe von Datenelementen mit Inhalten aus der Datenquelle zu füllen. **Jeder Datenabschnitt muss mindestens ein „<pm:data />“-Element enthalten.** 
 + 
 + 
 +^ Attribut ^ Erforderlich ^ Typ ^ Beschreibung ^ 
 +| Quelle | Ja | Zeichenfolge | Name der Datenquelle. | 
 +| Elemente | Nein | JSON | Ein JSON-Objekt. Verwenden Sie einen Eintrag pro Datenelement im aktuellen Datenabschnitt, um festzulegen, wie das nächste Datenelement ausgewählt wird.<br>Wenn keine Option ausgewählt ist, wird standardmäßig „nächstes“ verwendet. | | 
 + 
 +Mit dem Attribut „Elemente“ können Sie die Inhaltsauswahl für jedes Datenelement festlegen. 
 + 
 +^ Wert ^ Beschreibung ^ 
 +| (Element-ID) | Wählt ein Datenelement anhand seiner eindeutigen ID aus. | 
 +| Nächstes | Wählt das nächste Datenelement in der Liste aus. Dies ist die am häufigsten verwendete Option. | 
 +| Rand | Wählt ein zufällig ausgewähltes Datenelement aus.                                         | 
 + 
 +== Beispiel == 
 + 
 +Wenn Sie den Inhalt des ersten Datenelements auf die eindeutige ID „12345“ und den Inhalt des zweiten Datenelements auf zufällige Daten setzen möchten, verwenden Sie diese Zeichenfolge: 
 + 
 +<code json> 
 +{ 1: 12345, 2: "rand" } 
 +</code>   
 + 
 + 
 + 
 +=== Datenelement === 
 + 
 +Ein Datenelement wird durch das OTML-Tag „<pm:data />“ repräsentiert. 
 + 
 +Datenelemente befinden sich in einem Datenabschnitt. Jedes repräsentiert einen Datensatz der Datenquelle. 
 + 
 +Innerhalb eines Datenelements kann der Platzhalter „[pm:item:field_name]“ verwendet werden, um auf ein Feld des Datensatzes der Datenquelle zuzugreifen. Mit der Funktion „cut“ lässt sich der Inhalt eines Platzhalters auf eine bestimmte Anzahl von Zeichen kürzen. 
 + 
 +Beispiel: „[cut([pm:item:title], 20)]“ kürzt den Titel auf maximal 20 Zeichen. 
 + 
 +Auf jedes Datenelement kann nur einmal zugegriffen werden. Wenn Sie dasselbe Element mehrmals aufrufen möchten, müssen Sie mehrere Datenquellen mit demselben Inhalt verwenden. Kontaktieren Sie in diesem Fall bitte unser Support-Team per Ticket. 
 + 
 + 
 +=== Beispiel === 
 + 
 +== Beispieldatenquelle „Top 10 Produkte“ == 
 + 
 +^ ID ^ Titel ^ Preis ^ Bild ^ Link                            ^ 
 +|123 | Smartphone | 350.00 € | smartphone.jpg | www.sample.com/shop?productid=123 | 
 +|124 | Watch      | 150.00 € | watch.jpg      | www.sample.com/shop?productid=124 | 
 +|125 | Powerbank  | 50.00 €  | powerbank.jpg  | www.sample.com/shop?productid=125 | 
 + 
 + 
 +== Vorlagencode == 
 + 
 +<code html> 
 +<html> 
 +<head> 
 + <pm:source pmedit="true"> 
 + <pm:sourceitem refreshmode="build" name="Top 10 Products"></pm:sourceitem> 
 + </pm:source> 
 +</head> 
 +<body> 
 + <pm:datasection source="Top 10 Products" items='{ "1": "124", "2": "next", "3": "next" }'> 
 +  
 + <pm:data> 
 + <table> 
 + <tr> 
 + <td> 
 + <a href="[pm:item:link]" target="_blank">[pm:item:title]</a> 
 + </td> 
 + </tr> 
 + <tr> 
 + <img alt="[pm:item:title]" src="[pm:item:image]" width="200"> 
 + </tr> 
 + <tr> 
 + <td>Price: [pm:item:price]</td> 
 + </tr> 
 + </table> 
 + </pm:data> 
 +  
 + <pm:data> 
 + <table> 
 + <tr> 
 + <td> 
 + <a href="[pm:item:link]" target="_blank">[pm:item:title]</a> 
 + </td> 
 + </tr> 
 + <tr> 
 + <img alt="[pm:item:title]" src="[pm:item:image]" width="200"> 
 + </tr> 
 + <tr> 
 + <td>Price: [pm:item:price]</td> 
 + </tr> 
 + </table> 
 + </pm:data> 
 +  
 +  
 + <pm:data> 
 + <table> 
 + <tr> 
 + <td> 
 + <a href="[pm:item:link]" target="_blank">[pm:item:title]</a> 
 + </td> 
 + </tr> 
 + <tr> 
 + <img alt="[pm:item:title]" src="[pm:item:image]" width="200"> 
 + </tr> 
 + <tr> 
 + <td>Price: [pm:item:price]</td> 
 + </tr> 
 + </table> 
 + </pm:data> 
 +  
 + </pm:datasection> 
 +</body> 
 +</html> 
 +</code> 
 + 
 + 
 + 
 +== Gerenderter E-Mail-Code == 
 + 
 +<code html> 
 +<html> 
 +<body> 
 + <table> 
 + <tr> 
 + <td> 
 + <a href="www.sample.com/shop?productid=124" target="_blank">Watch</a> 
 + </td> 
 + </tr> 
 + <tr> 
 + <img alt="Watch" src="watch.jpg" width="200"> 
 + </tr> 
 + <tr> 
 + <td>Price: 150.00 €</td> 
 + </tr> 
 + </table> 
 +  
 + 
 + <table> 
 + <tr> 
 + <td> 
 + <a href="www.sample.com/shop?productid=125" target="_blank">Powerbank</a> 
 + </td> 
 + </tr> 
 + <tr> 
 + <img alt="Powerbank" src="powerbank.jpg" width="200"> 
 + </tr> 
 + <tr> 
 + <td>Price: 50.00 €</td> 
 + </tr> 
 + </table> 
 + 
 + <table> 
 + <tr> 
 + <td> 
 + <a href="www.sample.com/shop?productid=123" target="_blank">Smartphone</a> 
 + </td> 
 + </tr> 
 + <tr> 
 + <img alt="Smartphone" src="smartphone.jpg" width="200"> 
 + </tr> 
 + <tr> 
 + <td>Price: 350.00 €</td> 
 + </tr> 
 + </table> 
 +  
 +</body> 
 +</html> 
 +</code> 
 + 
 + 
 +=== Wenn-Bedingungen innerhalb von Datenelementen === 
 + 
 +Es ist möglich, Wenn-Bedingungen innerhalb von Datenelementen zu verwenden. 
 + 
 +<code html> 
 +<pm:datasection source="Datasource 1" items='{ 1: "rand" }'> 
 + 
 + <pm:data> 
 + <table> 
 + <tr> 
 + <td> 
 + <a href="[pm:item:link]" target="_blank">[pm:item:title]</a> 
 + </td> 
 + </tr> 
 + <tr> 
 + <img alt="Product" src="[pm:item:image]" width="200"> 
 + </tr> 
 + <tr> 
 + <td> 
 + <pm:dynamic> 
 + <pm:if> 
 + <pm:condition> 
 + [pm:item:priceReduced] == "" 
 + </pm:condition> 
 + Price: [pm:item:price] 
 + </pm:if> 
 + <pm:else> 
 + Price: [pm:item:priceReduced]<br /> 
 + instead of <span style="color: #f00; text-decoration: line-through;"[pm:item:price]</span> 
 + </pm:else> 
 + </pm:dynamic> 
 + </td> 
 + </tr> 
 + </table> 
 + </pm:data> 
 +  
 +</pm:datasection> 
 +</code> 
 + 
 + 
 +==== Externer Inhalt ==== 
 + 
 +„pm:include-url-content“ ist ein ganz besonderer Tag. Verwenden Sie ihn, um den Quellcode einer Website in Ihre E-Mail einzubinden. 
 + 
 +Sie können diesen Tag auch im Betreff einer E-Mail verwenden. 
 + 
 +^ Attribut ^ Typ ^ Erforderlich ^ Beschreibung ^ 
 +| URL | Zeichenfolge | Ja | Die URL des einzubindenden Inhalts. | 
 +| Titel | Boolesch | Nein | Wenn „true“, wird der Inhalt des Titel-Tags der URL zurückgegeben. | 
 + 
 +=== Beispiel === 
 + 
 +Als Inhalt einer E-Mail: 
 +<code html> 
 +<pm:include-url-content url="https://www.promio.net/my-template.html"> 
 + This default text is only visible if the url does not return any content. 
 +</pm:include-url-content> 
 +</code> 
 + 
 +Als Betreff: 
 +<code html> 
 +<pm:include-url-content url="https://www.promio.net/my-template.html" title="true"> 
 + This default title is only visible if the url does not return any content. 
 +</pm:include-url-content> 
 +</code> 
 + 
 +===== CSS ===== 
 + 
 +==== Automatische Transformation von CSS zu Inline-CSS ==== 
 + 
 +CSS aus einem <​style>-Block kann automatisch in Inline-CSS umgewandelt werden. 
 +Weitere Informationen hierzu finden Sie in den Optionen **cssinline** und **cssinlinetype** in [[en:otml#config_tags]] 
 + 
 +==== Benutzerbearbeitbares CSS ==== 
 + 
 +Um Benutzern die Möglichkeit zu geben, das CSS zu bearbeiten, gibt es einige Voraussetzungen: 
 + 
 +* Der Style-Tag muss die ID „pn-js-css-editor“ verwenden. Nur ein Style-Tag mit dieser ID ist zulässig. 
 +* Jeder Selektor muss einen Kommentarblock mit den Deskriptoren „@nav“, „@navItem“ und „@info“ verwenden. 
 +* „@nav“ repräsentiert die Kategorie im CSS-Editor und gruppiert die verschiedenen „@navItem“-Elemente. 
 +* „@navItem“ repräsentiert das Element innerhalb der Kategorie. Dieser Name muss für alle CSS-Selektoren innerhalb derselben Kategorie „@nav“ eindeutig sein. 
 +* „@info“ dient als Beschreibung für das Element „@navItem“. 
 + 
 +<code html> 
 +<style id="pn-js-css-editor" media="all" type="text/css"> 
 + /* 
 + @nav Article 
 + @navItem Text 
 + @info Change the font settings of article texts. 
 + */ 
 + .article-text { 
 + /*@edit*/color: #000; 
 + /*@edit*/font-family: Arial, Helvetica, sans-serif; 
 + /*@edit*/font-weight: 300; 
 + /*@edit*/font-size: 13px; 
 + /*@edit*/line-height: 1.4; 
 + /*@edit*/text-align: left; 
 + /*@edit*/text-decoration: none; 
 + /*@edit*/text-transform: none; 
 + } 
 +  
 + /* 
 + @nav Article 
 + @navItem Link 
 + @info Change the font settings of links inside article texts. 
 + */ 
 + .article-link { 
 + /*@edit*/color: #000; 
 + /*@edit*/font-weight: 300; 
 + /*@edit*/text-decoration: none; 
 + } 
 +</style> 
 +</code> 
 + 
 + 
 + 
 + 
 +===== Dynamische Inhalte ===== 
 + 
 +==== Platzhalter ==== 
 + 
 +Mithilfe von Platzhaltern können Sie auf die Felder Ihrer Benutzerdaten zugreifen oder dynamische Inhalte einbinden. 
 + 
 +Sie können auf jedes Benutzerdatenfeld zugreifen, indem Sie vor dem Feldnamen ein „$“-Zeichen setzen. Greifen Sie beispielsweise mit „$name“ auf das Feld „Name“ zu. 
 + 
 +Eine Liste aller universell verfügbaren Platzhalter erhalten Sie über die Platzhalter-Schaltfläche in der Symbolleiste eines mehrzeiligen Editors. 
 + 
 +Sollten Sie benutzerdefinierte Platzhalter benötigen, kontaktieren Sie bitte unser Support-Team per Ticket. 
 + 
 + 
 +=== Beipsiel === 
 + 
 +„$salutation_en_formal“ wird bei männlichen Empfängern durch „Sehr geehrter Herr Mustermann“ bzw. bei weiblichen Empfängern durch „Sehr geehrte Frau Mustermann“ ersetzt. 
 +Wenn kein Geschlecht angegeben ist, wird die Anrede auf „Sehr geehrte Damen und Herren“ zurückgesetzt. 
 + 
 + 
 +==== Bedingungen ==== 
 + 
 +Inhalte können auch mit Bedingungen personalisiert werden. 
 + 
 +=== Beispiel === 
 + 
 +== Personalisierte Anrede mit Fallback == 
 + 
 +<code html> 
 +{!--<dynamicContent> 
 + <if> 
 + <condition>gender = 1 AND name != ""</condition> 
 + <data>Dear Mr $name,</data> 
 + </if> 
 + <elseif> 
 + <condition>gender = 2 AND name != ""</condition> 
 + <data>Dear Ms $name,</data> 
 + </elseif> 
 + <else> 
 + <data>Dear Sir or Madam,</data> 
 + </else> 
 +</dynamicContent>//--} 
 +</code> 
 + 
 + 
 +==== Funktionen ==== 
 + 
 +=== pn_substr === 
 + 
 +Mit der Funktion „pn_substr“ lässt sich der Wert von Platzhaltern auf eine bestimmte Anzahl von Zeichen kürzen. 
 + 
 +Beispiel: „pn_substr(name, 10)“ kürzt den Namen auf 10 Zeichen. 
 + 
 + 
 + 
 +==== Konfigurations-Tags ==== 
 + 
 +Konfigurations-Tags ermöglichen die Steuerung des Verhaltens des E-Mail-Editors. 
 + 
 +^ Attribut ^ Typ ^ Standard ^ Beschreibung ^ 
 +| cssinline | Boolean | true | Inline-CSS aus dem \<style\>-Block. | 
 +| cssinlinetype | String | Standard | Legt den Typ des CSS-Inliners fest. | 
 +| storage | String (Frame / Shadow) | Frame | Mögliche Werte: Frame / Shadow | 
 +| ignoreerror | Boolean | false | Fehler beim Speichern ignorieren. | 
 + 
 +=== Beispiel === 
 + 
 +<code html> 
 +<pm:config> 
 +    <pm:config-value name="cssinline" value="true"/> 
 +    <pm:config-value name="cssinlinetype" value="ng"/> 
 +    <pm:config-value name="storage" value="frame"/> 
 +    <pm:config-value name="ignoreerror" value="true"/> 
 +</pm:config> 
 +</code> 
 + 
 + 
 +=== Werte für cssinlinetype === 
 + 
 +^ Wert ^ Beschreibung ^ 
 +| Standard | Verwendet den alten CSS-Inliner. | 
 +| ng | Verwendet den neuen, verbesserten CSS-Inliner. | 
 + 
 +Der **Standard**-CSS-Inliner kann CSS nur für einzelne, nicht durch Kommas getrennte Selektoren transformieren. 
 +Der **ng**-CSS-Inliner („nächste Generation“) unterliegt diesen Einschränkungen nicht und kann CSS-Blöcke mit durch Kommas getrennten Selektoren inline einfügen. 
 + 
 +== Beispiele für den Standard-CSS-Inliner == 
 + 
 +<code html> 
 +<head> 
 +<style> 
 + /******************* 
 + * Working examples *  
 + *******************/ 
 +  
 + .foo { 
 + font-size: 12px; 
 + line-height: 1.4; 
 + } 
 +  
 + .bar { 
 + background-color: #fff; 
 + } 
 +  
 + img { 
 + border: 0; 
 + } 
 +  
 +  
 + /*********************** 
 + * Non-working examples *  
 + ************************/ 
 +  
 + .baz, .boz { 
 + font-size: 15px; 
 + } 
 +  
 + table td { 
 + background-color: #ff0 
 + } 
 +</style> 
 +</head> 
 +<body> 
 + /******************* 
 + * Working examples *  
 + *******************/ 
 + <table> 
 + <tr> 
 + <td class="bar"> 
 + <span class="foo">Lorem ipsum dolor sit amet</span> 
 + </td> 
 + </tr> 
 + <tr> 
 + <img alt="" src="image.jpg" width="200" /> 
 + </tr> 
 + </table> 
 +  
 +  
 + /*********************** 
 + * Non-working examples *  
 + ************************/ 
 + <table> 
 + <tr> 
 + <td class="foo bar"> 
 + Lorem ipsum dolor sit amet 
 + </td> 
 + </tr> 
 + </table> 
 +</body> 
 +</code>  
 + 
 +=== Werte für die Speicherung === 
 + 
 +^ Wert ^ Beschreibung ^ 
 +|frame | Speichert den Inhalt des Vorschau-Iframes. 
 + Dadurch werden Änderungen der Browser-Entwicklungstools gespeichert, es besteht jedoch auch die Gefahr von Fremdcode, z. B. von Browser-Plugins, der die Darstellung der E-Mail beeinträchtigen kann. | 
 +|shadow | Speichert den Inhalt einer Schattenkopie der E-Mail. Dadurch wird sichergestellt, dass der Quellcode der E-Mail nicht durch Browser-Plugins verändert werden kann. | 
 + 
 + 
 + 
 + 
 +{{tag> OTML Templates Vorlage }} 
de/otml.txt · Zuletzt geändert: 2025/07/22 11:03 von bk

Seiten-Werkzeuge

Falls nicht anders bezeichnet, ist der Inhalt dieses Wikis unter der folgenden Lizenz veröffentlicht: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki