Materialien E-Marketing-Manager - WEBSALE Dokumentation

Der E-Marketing-Manager braucht im Shop zwei Templates: eines für An- und Abmeldung und die Verwaltung der eigenen Einstellungen, und eines für die Online-Ansicht des Newsletters. Diese Seite enthält beide als Ausgangspunkt. Kopieren Sie die Dateien unter den angegebenen Namen in Ihr Templateverzeichnis. Alle Beschriftungen sind Beispieltexte. Wegweiser: E-Marketing-Manager · Referenz: E-NL-Tags

Die beiden Templates

Datei	Aufgabe
`incl_newsletter.htm`	Anmeldung, Abmeldung und Verwaltung, alles in einem Formular
`incl_newsletter_onlineview.htm`	zeigt einen versendeten Newsletter im Browser an

incl_newsletter.htm

Das Template enthält drei Bereiche in einem einzigen Formular. Welcher davon erscheint, entscheidet der Shop über die drei Abschnitts-Tags E-NL-SEC-subscribe, E-NL-SEC-unsubscribe und E-NL-SEC-manage. Das versteckte Feld logintype sagt dem Server anschließend, welcher Bereich abgeschickt wurde.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Inhaltsseite für die An- und Abmeldung zum Newsletter</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<base href="~URL-Template~">
</head>

<body>
{WS-Include}
{E-NL-SEC-subscribe}<h1>Newsletter-Anmeldung</h1>{/E-NL-SEC-subscribe}
{E-NL-SEC-unsubscribe}<h1>Newsletter-Abmeldung</h1>{/E-NL-SEC-unsubscribe}
{E-NL-SEC-manage}<h1>Newsletter-Verwaltung</h1>{/E-NL-SEC-manage}

<form id="WSNL_FORM" action="~FORM-Template(tpl_newsletter.htm)~" method="post" class="newsletter">
   <input type="hidden" name="NLact" value="Login">
   <div id="WSNL_ErrorMsg">
      {E-NL-SEC-ajax}<ws-ajax-WSNL_ErrorMsg>{/E-NL-SEC-ajax}
         ~E-NL-MSG-Error~
      {E-NL-SEC-ajax}</ws-ajax-WSNL_ErrorMsg>{/E-NL-SEC-ajax}
   </div>
   <div id="WSNL_InfoMsg">
      {E-NL-SEC-ajax}<ws-ajax-WSNL_InfoMsg>{/E-NL-SEC-ajax}
         ~E-NL-MSG-Info~
      {E-NL-SEC-ajax}</ws-ajax-WSNL_InfoMsg>{/E-NL-SEC-ajax}
   </div>
   <script type="text/javascript">
      if($.trim($("#WSNL_ErrorMsg").text()) == "") { $("#WSNL_ErrorMsg").hide(); }
      if($.trim($("#WSNL_InfoMsg").text()) == "") { $("#WSNL_InfoMsg").hide(); }
   </script>

   {E-NL-SEC-subscribe}
      <label>Anrede</label>
      ~E-NL-INPUT-Salutation(~E-NL-A-Salutation~, class="select_salutation~E-NL-A-Salutation_error~")~
      <label>Titel</label>
      <input type="text" name="~E-NL-A-Title_name~" value="~E-NL-A-Title~" class="input~E-NL-A-Title_error~" maxlength="20">
      ~E-NL-A-Title_hidden~
      <label>Vorname</label>
      <input type="text" name="~E-NL-A-FirstName_name~" value="~E-NL-A-FirstName~" class="input~E-NL-A-FirstName_error~" maxlength="50">
      ~E-NL-A-FirstName_hidden~
      <label>Nachname</label>
      <input type="text" name="~E-NL-A-LastName_name~" value="~E-NL-A-LastName~" class="input~E-NL-A-LastName_error~" maxlength="50">
      ~E-NL-A-LastName_hidden~
      <label>Ihre E-Mail-Adresse *</label>
      <input type="text" name="~E-NL-A-E-mail_name~" value="~E-NL-A-e-mail~" class="input~E-NL-A-e-mail_error~">
      <h2>Bitte wählen Sie Ihre Interessengebiete</h2>
      <input type="checkbox" value="1" name="~E-NL-Targetgroup_name(1)~" ~E-NL-Targetgroup_checked(1)~>
      ~E-NL-TargetGroup_hidden(1)~ ~E-NL-TargetGroup(1)~
      <input type="hidden" name="logintype" value="subscribe">
      <input type="submit" class="WSNL_button" value="Zum Newsletter anmelden">
   {/E-NL-SEC-subscribe}

   {E-NL-SEC-unsubscribe}
      <label>Ihre E-Mail-Adresse *</label>
      <input type="text" name="~E-NL-A-E-mail_name~" value="~E-NL-A-e-mail~" class="input~E-NL-A-e-mail_error~">
      <h2>Abmeldung vom Newsletter und allen Newsletter-Listen</h2>
      <input type="checkbox" value="blacklist" name="~E-NL-BlackList_name~" ~E-NL-BlackList_checked~ id="blackbox_checkbox">
      ~E-NL-BlackList_hidden~
      Ja, ich möchte aus allen Versandlisten entfernt werden.
      <input type="hidden" name="logintype" value="unsubscribe">
      <input type="submit" class="WSNL_button" value="Vom Newsletter abmelden">
   {/E-NL-SEC-unsubscribe}

   {E-NL-SEC-manage}
      <!-- Optionaler Bereich für die Newsletter-Verwaltung durch einen angemeldeten Kunden -->
      <input type="hidden" name="logintype" value="manage">
      <div id="WSNL_Manage">
         {E-NL-SEC-ajax}<ws-ajax-WSNL_Manage>{/E-NL-SEC-ajax}
         {E-NL-Receiver}
            <p>Hier können Sie Ihre Daten und Einstellungen zum Newsletterversand verwalten.</p>
         {/E-NL-Receiver}

         {!E-NL-Receiver}
            <p>Wir freuen uns, wenn Sie sich für unseren Newsletter interessieren!
            Wenn Sie sich zum Newsletterversand anmelden möchten, füllen Sie bitte untenstehende Felder aus und wählen Sie Ihr Themengebiet.
            Sie erhalten dann ab sofort unseren Newsletter zugesandt.</p>
         {/!E-NL-Receiver}

         <h2>Ihre Daten</h2>
         <label>Firma</label>
         <input type="text" name="~E-NL-A-Company_name~" value="~E-NL-A-Company~" maxlength="50" class="input~E-NL-A-Company_error~">
         ~E-NL-A-Company_hidden~
         <label>Anrede</label>
         ~E-NL-INPUT-Salutation(~E-NL-A-Salutation~, class="select_salutation~E-NL-A-Salutation_error~")~
         <label>Titel</label>
         <input type="text" name="~E-NL-A-Title_name~" value="~E-NL-A-Title~" class="input~E-NL-A-Title_error~" maxlength="20">
         ~E-NL-A-Title_hidden~
         <div class="clear"></div>
         <label>Vorname</label>
         <input type="text" name="~E-NL-A-FirstName_name~" value="~E-NL-A-FirstName~" class="input~E-NL-A-FirstName_error~" maxlength="50">
         ~E-NL-A-FirstName_hidden~
         <label>Name</label>
         <input type="text" name="~E-NL-A-LastName_name~" value="~E-NL-A-LastName~" class="input~E-NL-A-LastName_error~" maxlength="50">
         ~E-NL-A-LastName_hidden~
         <div class="clear"></div>
         <label>Straße</label>
         <input type="text" name="~E-NL-A-Street1_name~" value="~E-NL-A-Street1~" class="input~E-NL-A-Street1_error~" maxlength="80">
         ~E-NL-A-Street1_hidden~
         <label>Land</label>
         ~E-NL-INPUT-Country(~E-NL-A-Country~, class="select_country~E-NL-A-Country_error~")~
         <label>PLZ</label>
         <input type="text" name="~E-NL-A-Zip_name~" value="~E-NL-A-Zip~" class="input_zip~E-NL-A-Zip_error~" maxlength="12">
         ~E-NL-A-Zip_hidden~
         <label>Ort</label>
         <input type="text" name="~E-NL-A-City_name~" value="~E-NL-A-City~" class="input_city~E-NL-A-City_error~" maxlength="100">
         ~E-NL-A-City_hidden~
         <label>Ihre E-Mail-Adresse</label>
         <input type="text" name="~E-NL-A-EMail_name~" value="~E-NL-A-EMail~" class="input~E-NL-A-EMail_error~">
         <h2>Bitte wählen Sie Ihre Interessengebiete</h2>
         <input type="checkbox" value="1" name="~E-NL-Targetgroup_name(1)~" ~E-NL-Targetgroup_checked(1)~>
         ~E-NL-TargetGroup_hidden(1)~ ~E-NL-TargetGroup(1)~

         {E-NL-Receiver}
            <input type="submit" value="Einstellungen speichern" class="button">
         {/E-NL-Receiver}
         {!E-NL-Receiver}
            <input type="submit" value="Newsletter bestellen" class="button">
         {/!E-NL-Receiver}

         {E-NL-Receiver}
            <h2>Newsletter abbestellen oder vorübergehend deaktivieren</h2>
            <p>Hier können Sie sich jederzeit abmelden. Sofort nach dem Absenden tragen wir Sie aus unserer Newsletter-Liste aus
            und Sie erhalten keine weiteren Nachrichten mehr. Wir bedauern Ihre Entscheidung und bedanken uns für Ihr bisheriges Interesse.</p>
            <input type="radio" value="~E-NL-StatusActive_value~" name="~E-NL-Status_name~" ~E-NL-StatusActive_checked~>
            Ich möchte den Newsletter weiterhin erhalten.
            <input type="radio" value="~E-NL-StatusPaused_value~" name="~E-NL-Status_name~" ~E-NL-StatusPaused_checked~>
            Ich möchte den Newsletter vorübergehend abbestellen bis:
            <input type="text" name="~E-NL-Pause_name~" value="~E-NL-Pause~" class="Input~E-NL-PauseTillDate_error~" maxlength="12" id="ws_nl_datepicker">
            <input type="hidden" value="~E-NL-PauseTypeDate~" name="~E-NL-PauseType_name~">
            <input type="radio" value="~E-NL-StatusBlackList_value~" name="~E-NL-Status_name~" ~E-NL-StatusBlackList_checked~>
            Ich möchte mich vom Newsletter abmelden und aus allen Versandlisten entfernt werden.
            ~E-NL-Status_hidden~
            <input type="submit" value="Einstellungen speichern">
         {/E-NL-Receiver}

         {E-NL-SEC-ajax}</ws-ajax-WSNL_Manage>{/E-NL-SEC-ajax}
      </div>
   {/E-NL-SEC-manage}

</form>
{/WS-Include}

</body>
</html>

Die versteckten Felder sind nicht optional

Jedes Eingabefeld hat ein Gegenstück mit der Endung _hidden, beispielsweise ~E-NL-A-Title_hidden~ neben dem Titelfeld. Lassen Sie keines davon weg. Warum sie gebraucht werden und was ohne sie passiert, steht auf der Referenzseite zum Abonnement. Referenz: E-NL, Abonnement verwalten

Das Datum der Pause

Das Eingabefeld für “vorübergehend abbestellen bis” erwartet das Datum im Format JJJJ-MM-TT, also beispielsweise 2026-12-24. Genau so gibt ~E-NL-Pause~ es auch aus.

Wenn Sie an dieses Feld einen Datepicker hängen, stellen Sie ihn auf dieses Format ein. Ein deutsch formatiertes Datum kann der Server nicht lesen. Statt einer Fehlermeldung setzt er die Pause dann auf einen Zeitpunkt in der Vergangenheit, womit sie sofort wieder endet.

Die Abmeldung braucht mehr als die Checkbox

Der Abmeldebereich im Beispiel enthält nur die Checkbox für die vollständige Sperrung. Das reicht nicht für alle Fälle: Wenn der Empfänger diese Checkbox nicht ankreuzt, erwartet der Server mindestens ein angekreuztes Interessengebiet, von dem abgemeldet werden soll. Ohne eines bricht er mit einer Fehlermeldung ab. Ergänzen Sie im Abmeldebereich also dieselben Interessengebiets-Checkboxen wie im Anmeldebereich, jeweils mit ihrem _hidden-Tag.

incl_newsletter_onlineview.htm

Dieses Template ist kurz. Es zeigt einen bereits versendeten Newsletter im Browser an, für Empfänger, bei denen die Darstellung im Mailprogramm nicht funktioniert.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
   <title>Inhaltsseite für die Online-Ansicht des Newsletters</title>
   <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
   <base href="~URL-Template~">
</head>

<body>
{WS-Include}
{E-NL-SEC-ShowOnlineNewsletter}
   <!-- Bereich für die Online-Ansicht des Newsletters -->
   <p>~E-NL-OnlineView~</p>
{/E-NL-SEC-ShowOnlineNewsletter}
{E-NL-SEC-ShowErrorOnlineView}
   <!-- Bereich für eine Hinweismeldung, wenn die Online-Ansicht des Newsletters derzeit nicht möglich ist -->
   <p>Es ist ein Fehler aufgetreten. Der Newsletter konnte nicht korrekt geladen werden!</p>
{/E-NL-SEC-ShowErrorOnlineView}
{/WS-Include}
</body>
</html>

~E-NL-OnlineView~ liefert den vollständigen Newsletter als HTML. Das Beispiel packt ihn in ein p-Element, in dem Blockelemente eigentlich nichts verloren haben. Verwenden Sie besser ein div, sonst bricht der Browser das Element eigenmächtig auf.

Zwei Hinweise zu beiden Templates

Beide Beispiele tragen den HTML-4.01-Doctype und charset=ISO-8859-1. Für einen neuen Shop übernehmen Sie stattdessen den Doctype und den Zeichensatz Ihrer übrigen Templates, üblicherweise HTML5 und UTF-8. Die E-NL-Tags arbeiten mit beidem. Die Beschriftungen stehen in den Beispielen als label-Elemente ohne Bezug zum jeweiligen Feld. Damit ein Klick auf die Beschriftung das Feld anspringt und Screenreader die Zuordnung erkennen, geben Sie jedem Eingabefeld eine id und verweisen aus dem label mit for darauf.

Wo die Tags beschrieben sind

Diese Seite erklärt die beiden Beispieldateien. Die vollständige Beschreibung aller E-NL-Tags steht auf den vier Referenzseiten, nach Themen geordnet. Referenz: E-NL, Anmeldeformular · Abonnement verwalten · Seitenzustände und Meldungen · Gutscheine Die Beispiele nutzen nur einen Teil davon. Lohnend sind vor allem E-NL-TargetGroup_definition(n) für einen erklärenden Text neben der Checkbox, E-NL-A-Street2 für die zweite Straßenzeile und E-NL-Subshop(), wenn Ihre Subshops unterschiedliche Interessengebiete anbieten.

​Die beiden Templates

​incl_newsletter.htm

​Die versteckten Felder sind nicht optional

​Das Datum der Pause

​Die Abmeldung braucht mehr als die Checkbox

​incl_newsletter_onlineview.htm

​Zwei Hinweise zu beiden Templates

​Wo die Tags beschrieben sind

Die beiden Templates

incl_newsletter.htm

Die versteckten Felder sind nicht optional

Das Datum der Pause

Die Abmeldung braucht mehr als die Checkbox

incl_newsletter_onlineview.htm

Zwei Hinweise zu beiden Templates

Wo die Tags beschrieben sind