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: • Wie können Elemente einer E-Mail personalisiert werden? • Wie richte ich eine Kampagne ein? • Wie tausche ich Creatives in Auto-Kampagnen aus?
de:otml

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen RevisionVorhergehende Überarbeitung
Nächste Überarbeitung		Vorhergehende Überarbeitung
de:otml [2021/01/21 11:25] – fwde:otml [2025/07/22 11:03] (aktuell) – bk
Zeile 1: Zeile 1:
-====== Development of E-Mail templates for promio.connect ======+====== Wie entwickle ich E-Mail-Vorlagen für promio.connect? ======
  
  
-The following document provides technical information for the development of E-Mail templates for promio.connect.+Das folgende Dokument enthält technische Informationen zur Entwicklung von E-Mail-Vorlagen für promio.connect.
    
  
-===== General information =====+===== Allgemeine Informationen =====
  
-  * Special characters must use XML conform entities:+  * Sonderzeichen müssen XML-konforme Entitäten enthalten:
     *  ''"''     *  ''"''
     * ''&''     * ''&''
Zeile 13: Zeile 13:
     * ''<''     * ''<''
     * ''>''     * ''>''
-    * for all other entities you have to use decimal syntax; e.g.: use '' '' instead of '' '' +    * für alle anderen Entitäten müssen Sie die Dezimalsyntax verwenden; benutzen Sie z.B. '' '' instead of '' '' 
-  * UTF-8 4-byte characters are not supported at the moment. You can check the byte length with several tools, e.g. [[http://www.ltg.ed.ac.uk/~richard/utf-8.cgi|UTF-8 Tool]] +  * 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]]. 
-  * The length of lines in the source code **must not exceed 700 characters**. +  * Die Zeilenlänge im Quellcode **darf 700 Zeichen nicht überschreiten**.
- +
- +
-If you use an IDE to develop the template, use the following namespaces for correct syntax highlighting:+
  
  
 +Wenn Sie eine IDE zur Entwicklung der Vorlage verwenden, verwenden Sie die folgenden Namespaces für die korrekte Syntaxhervorhebung:
  
 <code html> <code html>
Zeile 29: Zeile 27:
 </html> </html>
 </code> </code>
- 
- 
  
  
 ===== OTML ===== ===== OTML =====
  
-OTML is an extension of the HTML standard, specifically created for usage in promio.connect's E-Mail Editor. +OTML ist eine Erweiterung des HTML-Standards, die speziell für die Verwendung im E-Mail-Editor von promio.connect entwickelt wurde. 
-Because of this, an undestanding of HTML and CSS is mandatory.+Daher sind HTML- und CSS-Kenntnisse zwingend erforderlich.
  
-OTML serves the cause to make designated parts of an E-Mail editable. The global structure of the E-Mail will not be affected. +OTML ermöglicht es, bestimmte Teile einer E-Mail editierbar zu machen. Die Gesamtstruktur der E-Mail bleibt dabei unverändert. 
-At first, the E-Mail developer creates the E-Mail as usual. After this is done, all intendet parts can be made editable with the usage of OTML.+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.
  
-The OTML elements are separated into two namespaces: ''pm'' and ''pme'': +Die OTML-Elemente sind in zwei Namensräume unterteilt: „pm“ und „pme“: 
-  * ''pm'' elements are used for automatic generation or integration of content, such as the table of contents or data sources. +* „pm“-Elemente dienen der automatischen Generierung oder Integration von Inhalten, wie z. B. Inhaltsverzeichnissen oder Datenquellen. 
-  * ''pme'' elements are user editable elements, e.g. singleline and multiline editors.+* „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 ==== ==== Repeater ====
  
-A repeater is represented by the OTML tag ''<pme: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.
  
-A repeater element defines an area of repeating blocks and **must contain one or more  ''<pme:layout />'' elements**. Each layout can than be  
-added into the E-Mail creative by the user through a selective list. 
  
-The repeater element can hold one or more ''<pme:repeatercontent />'' elements.+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.
  
-^ Attribute ^ Type   ^ Required ^ Description                                                                                ^ +^ Attribut ^ Typ ^ Erforderlich ^ Beschreibung ^ 
-| title     | string | No       | Title of the repeater. This is useful, if you use more than one repeater in your template. |+| Titel | Zeichenfolge | Nein | Titel des Repeaters. Dies ist nützlich, wenn Sie mehr als einen Repeater in Ihrer Vorlage verwenden. |
  
  
-=== Example ===+=== Beispiel ===
  
 <code html> <code html>
Zeile 98: Zeile 115:
 ==== Layout ==== ==== Layout ====
  
-A layout is represented by the OTML tag ''<pme:layout />''.+Ein Layout wird durch das OTML-Tag „<pme:layout />“ dargestellt.
  
-A layout element contains a template, which can be added into the E-Mail. It's a sub-element of the ''<pme:repeater>'' element and can be  +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.
-added multiple times. +
  
  
-^ Attribute ^ Type   ^ Required ^ Description                ^ +^ Attribut ^ Typ ^ Erforderlich ^ Beschreibung ^ 
-| name     | string | Yes      | Unique name for the layout |+| Name | Zeichenfolge | Ja | Eindeutiger Name für das Layout |
  
  
-=== Example ===+=== Beispiel ===
  
 <code html> <code html>
Zeile 126: Zeile 142:
  
  
-==== Repeatercontent ====+==== Repeater-Inhalte ====
  
-A repeatercontent is represented by the OTML tag ''<pme:repeatercontent />''.+Ein Repeater-Inhalt wird durch das OTML-Tag „<pme:repeatercontent />“ repräsentiert.
  
-The repeatercontent determines a pre-defined part of a ''<pme:repeater />'' element and  acts exactly like a ''<pme:layout />'' element. +Der Repeater-Inhalt bestimmt einen vordefinierten Teil eines „<pme:repeater />“-Elements und verhält sich genau wie ein „<pme:layout />“-Element. 
-It's a sub-element of the ''<pme:repeater>'' element and can be added multiple times. With the ''<pme:repeatercontent />'' element its possible, +Er ist ein Unterelement des „<pme:repeater>“-Elements und kann mehrfach hinzugefügt werden. Mit dem „<pme:repeatercontent />“-Element ist es möglich, 
-to pre-fill a ''<pme:repeater />''.+ein „<pme:repeater />“-Element vorab zu füllen.
  
- +=== Beispiel ===
-=== Example ===+
  
 <code html> <code html>
Zeile 163: Zeile 178:
 ==== Preheader ==== ==== Preheader ====
  
-A preheader is represented by the OTML tag ''<pme:preheader />''.+Ein Preheader wird durch das OTML-Tag „<pme:preheader />“ dargestellt.
  
-A preheader is the preview text which is shown beneath the sender in most E-Mail clients.  +Ein Preheader ist der Vorschautext, der in den meisten E-Mail-Clients unter dem Absender angezeigt wird. 
-During the build process of the E-Mail creative, the content of the preheader element will be put directly after the ''<body>'' tag. All + 
-tracking pixels provided by promio.connect will be embedded a after the preheader. This way there is no HTML source code visible to the +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.
-end-user.  +
  
 <code html> <code html>
Zeile 178: Zeile 192:
 ==== Singleline ==== ==== Singleline ====
  
-A singleline element is represented by the OTML tag ''<pme:singleline />''.+Ein einzeiliges Element wird durch das OTML-Tag „<pme:singleline />“ repräsentiert.
  
-The singleline element offers a simple text input field and is mostly used for short texts like a headline.+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.                                                        |
  
-^ Attribute    ^ Type    ^ Required ^ Description                                                                                                                                 ^ 
-| data-pmclass | string  | No       | The value will be set as class on the link element, if a link is added to the singleline element.                                           | 
-| label        | string  | No       | The title of the element, which is shown in the edit view.                                                                                  | 
-| linkable     | boolean | No       | If linkable is false, its not possible to add or change a link around the singleline element.                                               | 
-| pmtoctitle   | string  | No       | Title for entry inside the TOC.<br>Set a value to preallocate a title or leave it blank to make it possible, to set a TOC title if desired. | 
-| max-length   | integer | No       | Maximum lenght of characters. The user will not be able to exceed this limit.                                                               | 
  
- +=== Beispiel ===
-=== Example ===+
  
 <code html> <code html>
Zeile 203: Zeile 216:
  
  
-==== Multiline ==== +==== Multiline und Multiline-Config ====
- +
-A multiline element is represented by the OTML tag ''<pme:multiline />''. +
- +
-The multiline element offers an advanced text and HTML editor based on CKEditor. It is mostly used for long texts or where HTML input is  +
-desired.+
  
 +Ein mehrzeiliges Element wird durch das OTML-Tag „<pme:multiline />“ dargestellt.
  
-^ Attribute  ^ Type    ^ Required ^ Description                                                                                                                                  ^ +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.
-| label      | string  | No       | The title of the element, which is shown in the edit view.                                                                                   | +
-| pmdesign   | string  | No       | The name of a collection, where contents can be saved to.                                                                                    | +
-| pmtoctitle | string  | No       |  Title for entry inside the TOC.<br>Set a value to preallocate a title or leave it blank to make it possible, to set a TOC title if desired. | +
-| max-length | integer | No       | Maximum lenght of characters. The user is able exceed this limit, but a warning will be shown.                                               |+
  
 +^ 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. |
  
-=== Example ===+=== Beispiel ===
  
 <code html> <code html>
Zeile 226: Zeile 237:
  
  
-==== Image ====+Der mehrzeilige Editor kann mit einem mehrzeiligen Konfigurationselement konfiguriert werden, das durch den OTML-Tag „<pm:multiline-config>“ repräsentiert wird.
  
-Images have no special OTML element representation. Instead they use the standard HTML ''<img />'' tag with extended attributes.+^ 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.
  
-^ Attribute     ^ Type    ^ Required ^ Description                                                                                                                                 ^ 
-| pmedit        | boolean | No       | If pmedit is true, the image is editable.                                                                                                   | 
-| pmscale | string  | No       | Possible values: crop / height / width                                                                                                      | 
-| pmscaleheight | integer | No       | Use an alternate height instead of the one defined in the height attribute. This is useful for presentation on HiDPI / Retina displays.     | 
-| pmscalewidth  | integer | No       | Use an alternate width instead of the one defined in the width attribute. This is useful for presentation on HiDPI / Retina displays.       | 
-| pmtoctitle    | string  | No       | Title for entry inside the TOC.<br>Set a value to preallocate a title or leave it blank to make it possible, to set a TOC title if desired. | 
  
 +=== Beispiel ===
  
-=== Values for pmscale ===+<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>
  
-^ Value  ^ Description                                                                                                           ^ +<pm:multiline-config name="linkable-editor"> 
-| crop   | Center the image and crop it to the defined dimensions. **Height and width must be defined.**  +{ 
-| height | Resize the image to the defined height. The width is calculated proportional to the dimensions of the original image. | +  "forcePasteAsPlainText": true, 
-| width  | Resize the image to the defined width. The height is calculated proportional to the dimensions of the original image. |+  "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>
  
-=== Example ===+/* 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> <code html>
Zeile 259: Zeile 417:
  
  
-==== Appointment ====+==== Termin ====
  
-To provide a link to an appointment, you can use the ''<pme:appointment>'' element. +Um einen Link zu einem Termin bereitzustellen, können Sie das Element „<pme:appointment>“ verwenden. 
-Based on the inserted data, an iCal calendar file will be generated. +Basierend auf den eingegebenen Daten wird eine iCal-Kalenderdatei generiert.
  
- +^ Attribut ^ Beschreibung ^ 
-^ Attribute      ^ Description                            ^ +| Text | In der E-Mail sichtbarer Text | 
-| text           | Text that is visible in the E-Mail     | +| Zusammenfassung | Titel des Termins | 
-| summary        | Title of the appointment               | +| OrganizerName | Name des Terminorganisators | 
-| organizerName  | Name of the appointments organizer     | +| OrganizerEmail | E-Mail-Adresse des Terminorganisators | 
-| organizerEmail | E-Mail of the appointments organizer   | +| DateTimeStart | Startdatum und -uhrzeit des Termins | 
-| dateTimeStart  | Start date and time of the appointment | +| DateTimeEnd | Enddatum und -uhrzeit des Termins | 
-| dateTimeEnd    | End date and time of the appointment   | +| Location | Ort des Termins | 
-| location       | Location of the appointment            | +| Description | Beschreibung des Termins |
-| description    | Description of the appointment         |+
  
  
Zeile 285: Zeile 442:
  
  
-==== TOC ==== +==== Inhaltsverzeichnis ====
- +
-A TOC (table of contents) is represented by the OTML tag ''<pm:toc />''.+
  
-The TOC element is used to automatically generate a table of contents based on the values and the order of used ''pmtoctitle'' attributes.+Ein Inhaltsverzeichnis (TOC) wird durch das OTML-Tag „<pm:toc />“ dargestellt.
  
-The TOC elements requires exactly one ''<pm:tocitem />'' element, which represents the the value of the processed ''pmtoctitle'' attribute. The +Das TOC-Element dient der automatischen Generierung eines Inhaltsverzeichnisses basierend auf den Werten und der Reihenfolge der verwendeten „pmtoctitle“-Attribute.
-complete content of the TOC element is repeatedly inserted for each ''pmtoctitle'' attribute with a value.  +
  
 +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.
  
-=== Example ===+=== Beispiel ===
  
-== Template ==+== Vorlage ==
  
 <code html> <code html>
Zeile 327: Zeile 483:
  
  
-==== External data sources ====+==== Externe Datenquellen ====
  
-External data sources make it possible, to embed content from RSS feeds into an E-Mail creative. +Externe Datenquellen ermöglichen die Einbindung von RSS-Feed-Inhalten in E-Mails.
  
-The setup of external data sources is individually realized by promio.net GmbH. If you are interested in the usage, please contact your  +Die Einrichtung externer Datenquellen erfolgt individuell durch die promio.net GmbH. Bei Interesse an der Nutzung kontaktieren Sie bitte unser Support-Team per Ticket.
-product manager at promio.net GmbH.+
  
  
  
 === Source === === Source ===
 +Das Quellelement wird durch das OTML-Tag „<pm:source />“ repräsentiert.
  
-The source element is represented by the OTML tag ''<pm:source />''.+Es dient als Wrapper für die verschiedenen Quellelemente und kann ein oder mehrere „<pm:sourceitem />“-Elemente enthalten.
  
-It serves as wrapper for the different source items and may contain one or more ''<pm:sourceitem />'' elements.+^ Attribut ^ Erforderlich ^ Typ ^ Beschreibung ^ 
 +| pmedit | Nein | Boolean | Wenn „true“, dürfen Benutzer Datenquellen ändern. |
  
  
-^ Attribute ^ Required ^ Type    ^ Description                                       ^ +=== Quellelement ===
-| pmedit    | No       | boolean | If true, users are allowed to change datasources. |+
  
 +Ein Quellelement wird durch das OTML-Tag „<pm:sourceitem />“ repräsentiert.
  
 +Es dient als Verbindung zwischen der E-Mail und der eingerichteten Datenquelle.
  
-=== Source item ===+^ Attribut ^ Erforderlich ^ Typ ^ Beschreibung ^ 
 +| Name | Ja | Zeichenfolge | Eindeutiger Name der Datenquelle. | 
 +| Aktualisierungsmodus | Ja | Zeichenfolge | Mögliche Werte: Erstellung / Zustellung |
  
-A source item is represented by the OTML tag ''<pm:sourceitem />''.+== Werte für Aktualisierungsmodus ==
  
-It serves as the connection between the E-Mail creative and the setup data source.+^ Wert ^ Beschreibung ^ 
 +| Erstellung | Datenquelle beim Erstellen der E-Mail aktualisieren. | 
 +| Zustellung | Datenquelle vor dem Senden der Kampagne aktualisieren. |
  
-^ Attribute   ^ Required ^ Type    ^ Description                      ^ 
-| name        | Yes      | string  | Unique name of the data source.  | 
-| refreshmode | Yes      | string  | Possible values: build / refresh | 
  
  
-== Values for refreshmode ==+=== Datenabschnitt ===
  
-^ Value   ^ Description                                      ^ +Ein Datenabschnitt wird durch das OTML-Tag „<pm:datasection />“ repräsentiert.
-| build   | Refresh data source on build of the creative.    |           +
-| refresh | Refresh data source before sending the campaign. |+
  
 +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.**
  
  
-=== Data section ===+^ 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. | |
  
-A data section is represented by the OTML tag ''<pm:datasection />''.+Mit dem Attribut „Elemente“ können Sie die Inhaltsauswahl für jedes Datenelement festlegen.
  
-Data sections are used to fill the template with content from the data source with the help of data items. **Each data section must contain  +^ Wert ^ Beschreibung ^ 
-at least one ''<pm:data />'' element.**+| (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 ==
  
-^ Attribute ^ Required ^ Type   ^ Description                                                                                                                                                                     ^ +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:
-| source    | Yes      | string | The name of the datasource.                                                                                                                                                     | +
-| items     | No       | json   | A json object. Use one entry per data item inside the current data section, to define, how the next data item will be chosen.<br>If no option is chosen, it defaults to "next". |             | +
- +
- +
-With the ''items'' attribute, it is possible to define the selection of content for each data item. +
- +
-^ Value     ^ Description                                                          ^ +
-| (itemId)  | Choose a data item on the base of its unique id.                     | +
-| next      | Choose the next data item in the list. This is the most used option. | +
-| rand      | Choose a random data item.                                           | +
- +
- +
-== Example == +
- +
-If you want to set the content of the first data item to the unique id ''12345'' and random data for the second one, use this string:+
  
 <code json> <code json>
Zeile 398: Zeile 546:
  
  
-=== Data item ===+=== Datenelement ===
  
-A data item is represented by the OTML tag ''<pm:data />''.+Ein Datenelement wird durch das OTML-Tag „<pm:data />“ repräsentiert.
  
-Data items are placed inside a data section. Each one represents one record from the data source.+Datenelemente befinden sich in einem Datenabschnitt. Jedes repräsentiert einen Datensatz der Datenquelle.
  
-Inside a data item, it's possible to use the placeholder ''[pm:item:field_name]'' to get access to a field of the data source record. With the +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.
-''cut'' function, it is also possible, to shorten the content of a placeholder to a specified amount of characters.+
  
-E.g.: ''[cut([pm:item:title], 20)]'' shortens the title to a maximum of 20 characters. +Beispiel: „[cut([pm:item:title], 20)]“ kürzt den Titel auf maximal 20 Zeichen.
  
-It's only possible to access each data item one time. If you want to access the same item multiple times, it is necessary to use multiple  +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.
-data sources with the same content. In this case, please contact your product manager at promio.net GmbH.+
  
  
-=== Example ===+=== Beispiel ===
  
-== Sample data source "Top 10 Products" ==+== Beispieldatenquelle „Top 10 Produkte“ ==
  
-^ id ^ title      ^ price    ^ image          ^ link                              ^+^ ID ^ Titel ^ Preis ^ Bild ^ Link                            ^
 |123 | Smartphone | 350.00 € | smartphone.jpg | www.sample.com/shop?productid=123 | |123 | Smartphone | 350.00 € | smartphone.jpg | www.sample.com/shop?productid=123 |
 |124 | Watch      | 150.00 € | watch.jpg      | www.sample.com/shop?productid=124 | |124 | Watch      | 150.00 € | watch.jpg      | www.sample.com/shop?productid=124 |
Zeile 423: Zeile 569:
  
  
- +== Vorlagencode ==
-== Template code ==+
  
 <code html> <code html>
Zeile 492: Zeile 637:
  
  
-== Rendered E-Mail creative code ==+== Gerenderter E-Mail-Code ==
  
 <code html> <code html>
Zeile 545: Zeile 690:
  
  
 +=== Wenn-Bedingungen innerhalb von Datenelementen ===
  
-=== If-conditions within data items === +Es ist möglich, Wenn-Bedingungen innerhalb von Datenelementen zu verwenden.
- +
-It is possible to use If-conditions within data items.+
  
 <code html> <code html>
Zeile 586: Zeile 730:
  
  
 +==== Externer Inhalt ====
  
 +„pm:include-url-content“ ist ein ganz besonderer Tag. Verwenden Sie ihn, um den Quellcode einer Website in Ihre E-Mail einzubinden.
  
-===== CSS =====+Sie können diesen Tag auch im Betreff einer E-Mail verwenden.
  
-==== Automatic transformation from CSS to inline CSS ====+^ 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. |
  
-CSS from ''<style />'' blocks can only be transformed to inline CSS for isolated selectors. +=== Beispiel ===
-Also, the CSS inlining only works on HTML elements with one selector.+
  
 +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>
  
-=== Example === +Als Betreff:
 <code html> <code html>
-<head> +<pm:include-url-content url="https://www.promio.net/my-template.html" title="true"> 
-<style> + This default title is only visible if the url does not return any content. 
- /******************* +</pm:include-url-content> 
- * Working examples *  +</code> 
- *******************/ + 
-  +===== CSS ===== 
- .foo { + 
- font-size: 12px; +==== Automatische Transformation von CSS zu Inline-CSS ====
- 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> +
  
 +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]]
  
-==== User editable CSS ====+==== Benutzerbearbeitbares CSS ====
  
-To give users the freedom to edit the CSS, there are some prerequisites:+Um Benutzern die Möglichkeit zu geben, das CSS zu bearbeiten, gibt es einige Voraussetzungen:
  
-* The style tag must use the id ''pn-js-css-editor''. Only one style tag with this id is allowed. +* Der Style-Tag muss die ID „pn-js-css-editor“ verwenden. Nur ein Style-Tag mit dieser ID ist zulässig. 
-* Each selector must use a comment block with the descriptors ''@nav'', ''@navItem'' and ''@info''. +* Jeder Selektor muss einen Kommentarblock mit den Deskriptoren „@nav“, „@navItem“ und „@info“ verwenden. 
- * ''@nav'' represents the category inside the CSS editor and groups the different ''@navItem'' elements. +* „@nav“ repräsentiert die Kategorie im CSS-Editor und gruppiert die verschiedenen „@navItem“-Elemente. 
- * ''@navItem'' represents the element inside the category. **This name must be unique for all CSS selectors within the same ''@nav'' category. +* „@navItem“ repräsentiert das Element innerhalb der Kategorie. Dieser Name muss für alle CSS-Selektoren innerhalb derselben Kategorie „@nav“ eindeutig sein. 
- * ''@info'' serves as decription for the ''@navItem''element.+* „@info“ dient als Beschreibung für das Element „@navItem“.
  
 <code html> <code html>
Zeile 706: Zeile 807:
  
  
-===== Dynamic content =====+===== Dynamische Inhalte =====
  
-==== Placeholders ====+==== Platzhalter ====
  
-With the help of placeholders, it's possible to access the fields of your user data or include dynamic content.+Mithilfe von Platzhaltern können Sie auf die Felder Ihrer Benutzerdaten zugreifen oder dynamische Inhalte einbinden.
  
-You can access each user data field, if you place a ''$'' character in front of the field name. E.g.: access the field ''name'' with ''$name''.+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.
  
-A list of all universal available placeholders is available with click on the placeholder button inside the toolbar of a multiline editor.+Eine Liste aller universell verfügbaren Platzhalter erhalten Sie über die Platzhalter-Schaltfläche in der Symbolleiste eines mehrzeiligen Editors.
  
-If custom placeholders are requried, feel free to contact your product manager at promio.net GmbH.+Sollten Sie benutzerdefinierte Platzhalter benötigen, kontaktieren Sie bitte unser Support-Team per Ticket.
  
  
-=== Example ===+=== Beipsiel ===
  
-''$salutation_en_formal'' will be replaced with "Dear Mr Musterman" if the recipient is male or "Dear Ms Musterman" if the recipient is female. +„$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. 
-If no gender is given, it will fall back to "Dear Sir or Madan."+Wenn kein Geschlecht angegeben ist, wird die Anrede auf „Sehr geehrte Damen und Herren“ zurückgesetzt.
  
  
 +==== Bedingungen ====
  
-==== Conditions ====+Inhalte können auch mit Bedingungen personalisiert werden.
  
-It is also possible to personalize content with conditions.+=== Beispiel ===
  
- +== Personalisierte Anrede mit Fallback ==
-=== Example === +
- +
-== Personalized salutation with fallback ==+
  
 <code html> <code html>
Zeile 739: Zeile 838:
  <if>  <if>
  <condition>gender = 1 AND name != ""</condition>  <condition>gender = 1 AND name != ""</condition>
- <data>Dear Mr $name</data>+ <data>Dear Mr $name,</data>
  </if>  </if>
  <elseif>  <elseif>
  <condition>gender = 2 AND name != ""</condition>  <condition>gender = 2 AND name != ""</condition>
- <data>Dear Ms $name</data>+ <data>Dear Ms $name,</data>
  </elseif>  </elseif>
  <else>  <else>
- <data>Dear sir or madam</data>+ <data>Dear Sir or Madam,</data>
  </else>  </else>
 </dynamicContent>//--} </dynamicContent>//--}
Zeile 752: Zeile 851:
  
  
-==== Functions ====+==== Funktionen ====
  
 === pn_substr === === pn_substr ===
  
-With the function ''pn_substr'' is possible to shorten the value of placholders to a specified amount of characters.+Mit der Funktion „pn_substr“ lässt sich der Wert von Platzhaltern auf eine bestimmte Anzahl von Zeichen kürzen.
  
-E.g.: ''pn_substr(name, 10)'' shortens the name to 10 characters. +Beispiel: „pn_substr(name, 10)“ kürzt den Namen auf 10 Zeichen.
  
  
  
-==== Config Tags ====+==== Konfigurations-Tags ====
  
-Config tags make it possible to control the behaviour of the E-Mail Editor.+Konfigurations-Tags ermöglichen die Steuerung des Verhaltens des E-Mail-Editors.
  
-^ Attribute     ^ Type                    ^ Default ^ Description                          ^ +^ Attribut ^ Typ ^ Standard ^ Beschreibung ^ 
-| cssinline     | boolean                 | true    | Inline CSS from the \<style\> block. | +| cssinline | Boolean | true | Inline-CSS aus dem \<style\>-Block. | 
-| cssinlinetype | string                  | legacy  | Set the type of the CSS inliner.     | +| cssinlinetype | String | Standard | Legt den Typ des CSS-Inliners fest. | 
-| storage       | string (frame / shadow) | frame   | Possible values: frame / shadow      | +| storage | String (Frame / Shadow) | Frame | Mögliche Werte: Frame / Shadow | 
-| ignoreerror   | boolean                 | false   | Ignore errors on save.               |+| ignoreerror | Boolean | false | Fehler beim Speichern ignorieren. |
  
- +=== Beispiel ===
-=== Values for cssinlinetype === +
- +
-^ Value  ^ Description                 ^ +
-| legacy | Use the legacy CSS inliner. | +
-| ng     | Use the new CSS inliner.    | +
- +
- +
-=== Values for storage === +
- +
-^ Value ^ Description                                                                                                                                                                                                                           ^ +
-|frame  | Save the contents from the preview iframe. This will save changes made via the browsers development tools but is also susceptible to foreign code f.e. made by browser plugins, which could destroy the presentability of the E-mail. | +
-|shadow | Save the contents from a shadow copy of the E-mail. This assures that the E-mails source code could not be changed by browser plugins.                                                                                                | +
- +
- +
-=== Example ===+
  
 <code html> <code html>
Zeile 797: Zeile 881:
 </pm:config> </pm:config>
 </code> </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.1611224727.txt.gz · Zuletzt geändert: 2021/01/21 11:25 von fw

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