Mit unserem Kanal "Email eingebettet" ist es möglich, NPS-Abfragen über bestehende E-Mail-Systeme (wie Emarsys, Salesforce, Optivo / Episerver, Mailchimp, Activecampaign, etc.) zu versenden. Vorteile sind, dass E-Mail-KPIs direkt im bestehenden E-Mail-Versender sichtbar sind und das Layout analog zu anderen Firmen-Emails ist.

Dieser Artikel soll durch den Prozess der Integration des erstellten HTML für den E-Mail-Versender Emarsys führen.

Vorbereitung

Erstellung der HTML in Zenloop

Zuerst muss über den Kanal "Email eingebettet" ein HTML erstellt werden, welcher anschließend in Emarsys eingefügt wird. In diesem Artikel wird erklärt, wie das HTML erstellt wird.

Emarsys VCE oder VCMS Template?

In Emarsys gibt es zwei Arten von Templates, das VCMS und das VCE. Je nachdem, wann die Zusammenarbeit mit Emarsys gestartet wurde, wird das eine oder andere - selten beide parallel - verwendet. Bei Unsicherheiten, welches Template eingesetzt wird, kann mit unten stehenden Screenshots abgeglichen werden. Alternativ kann aber auch der Emarsys Client Success Manager dazu kontaktiert werden.

HTML-Integration bei Nutzung des VCE-Templates

1. Start mit Klick in Emarsys auf Kampagnen > Email-Kampagnen > E-Mail erstellen

2. Bei Pop-up-Anzeige Auswahl von "Block-basierte Email erstellen"

3. Es erscheint die Auswahl der bestehenden Vorlagen / Templates. (Tipp: Kopie-Erstellung des Templates, das genutzt werden soll, um mögliche Fehler beim ersten Mal einfach revidieren zu können.) Es wird in den Bearbeitungsmodus gewechselt.   

4. Nun wird der "Style Editor" Reiter gewählt


5. Es wird nun nach der Zeile gesucht, die "@media only screen and (max-width:xxx px) {" enthält. 


6. Genau unter die gefundene Zeile wird folgender Code eingefügt (css-Klassen). Den Code-Schnipsel bitte von hier kopieren:

.q1 { width:100% !important; min-width:0 !important; }

.q11 { font-size:18px !important;line-height:26px !important;}

.button { display:block !important; width:100% !important;border-bottom:2px solid #ffffff; padding:10px; height:auto !important;}

.h { display:none !important; }

.b010 {display: inline-block !important; }


7. Nun wird der Reiter "Blocks" aufgerufen und "Create New Block" geklickt. Der neue Block erscheint dann ganz unten in der Block-Liste, bitte runter scrollen.

8. Im neuen noch leeren Block muss zuerst folgender Code-Schnipsel eingefügt werden: 

<table>
     <tbody>
           <tr><td align="center">

             <!-- snippet code here -->

         </td></tr>
     </tbody>
 </table>


9. Jetzt wird der HTML-Code, der in der Vorbereitung in Zenloop via Kanal "Email eingebettet" erstellt wurde (siehe oben: "Erstellung der HTML in Zenloop"), zwischen die zwei Code-Schnipsel von Schritt 8 eingefügt. Der Bereich ist im Screenshot blau markiert.

Nachdem der Code eingegeben wurde, erscheint rechts die NPS-Skala. Die graue Linie um die Skala erscheint nicht in der E-Mail. Die Linie kann in der Vorschau ignoriert werden.

Weitere Styling-Optionen werden hier beschrieben.

Wenn dennoch folgende Fehlermeldung nach korrektem Einfügen angezeigt wird, bitte wie folgt verfahren:

Bitte innerhalb des Blocks des <tr>-Tags einbetten.

<img> sollte innerhalb der <tr>-Tags liegen, wie hier dargestellt.


10. Zuletzt wird der Block eindeutig nach Belieben benannt (z.B. Zenloop NPS) und gespeichert. Der Block ist nun in der Block-Bibliothek gespeichert und kann in jede beliebige, auf diesem Template (=Vorlage für Email) basierenden Kampagne (=Email, die versendet wird), eingefügt werden.


HTML-Integration bei Nutzung des VCMS-Templates

1.  Es wird unter Kampagnen > Email-Kampagnen > eine Email Kampagne erstellt oder eine bestehenden Kampagne geöffnet

2.  An die gewünschte Stelle der E-Mail wird nun eine beliebige Gruppe hinzugefügt

3. In der beliebigen Gruppe wird in den erweiterten Modus gewechselt. Bevor auf den im Screenshot markierten Button geklickt werden kann, muss nochmal gespeichert werden. Es öffnet sich dann bei Klick auf "Zum erweiterten Modus wechseln" ein Pop-up. Falls Pop-Ups in deinem Browser unterdrückt werden, füge bitte eine Ausnahme hinzu


4. Im Pop-up wird nun durch Klick auf <> in den HTML Modus des Editors gewechselt


5. Der gesamte sichtbare HTML-Code wird nun gelöscht

6. Nun wird der folgende HTML-Code anstelle des alten Codes eingefügt

<style type="text/css">
@media only screen and (max-width:400px) {
    .q1 { width:100% !important; min-width:0 !important; }
    .q11 { font-size:18px !important;line-height:26px !important;}
    .button { display:block !important; width:100% !important;border-bottom:2px solid #ffffff; padding:10px; height:auto !important;}
    .h { display:none !important; }
    .b010 {display: inline-block !important; }
}
</style>
<!--[if gte mso 9]>
<style type="text/css">
table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; border:0; }
table td, table th { border-collapse:collapse; font-size:1px; line-height:1px; }
<xml>
 <o:OfficeDocumentSettings>
  <o:AllowPNG/>
  <o:PixelsPerInch>96</o:PixelsPerInch>
 </o:OfficeDocumentSettings>
</xml>
</style>
<![endif]-->

<table align="center" border="0" cellpadding="0" cellspacing="0" class="q1" width="540">
  <tbody>
    <tr>
      <td align="center" class="q11" style="font-size:22px;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight:normal;line-height:30px;color:#111111;">How likely are you to recommend Zenloop to a friend or colleague?</td>
    </tr>
    <tr>
      <td height="30">&nbsp;</td>
    </tr>
    <tr>
      <td align="center">
      <table bgcolor="#f4f4f4" border="0" cellpadding="0" cellspacing="0" class="q1" dir="rtl" style="direction:rtl;">
        <tbody>
          <tr>
            <th align="center" class="button" dir="ltr" height="40" style="direction:ltr; vertical-align:middle;" valign="middle" width="46"><a href="https://responses.zenloop.com/web/response/<survey_hash_id>/email_embed/10?is_a_test=false" style="display:block;text-decoration:none;color:#106AD7;font-size:16px;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight:bold;">10 <span class="b010" style="display: none;">- Very likely</span></a></th>
            <th bgcolor="#ffffff" class="h" width="2">&nbsp;</th>
            <th align="center" class="button" dir="ltr" style="direction:ltr; vertical-align:middle;" valign="middle" width="46"><a href="https://responses.zenloop.com/web/response/<survey_hash_id>/email_embed/9?is_a_test=false" style="display:block;text-decoration:none;color:#106AD7;font-size:16px;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight:bold;">9</a></th>
            <th bgcolor="#ffffff" class="h" width="2">&nbsp;</th>
            <th align="center" class="button" dir="ltr" style="direction:ltr; vertical-align:middle;" valign="middle" width="46"><a href="https://responses.zenloop.com/web/response/<survey_hash_id>/email_embed/8?is_a_test=false" style="display:block;text-decoration:none;color:#106AD7;font-size:16px;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight:bold;">8</a></th>
            <th bgcolor="#ffffff" class="h" width="2">&nbsp;</th>
            <th align="center" class="button" dir="ltr" style="direction:ltr; vertical-align:middle;" valign="middle" width="46"><a href="https://responses.zenloop.com/web/response/<survey_hash_id>/email_embed/7?is_a_test=false" style="display:block;text-decoration:none;color:#106AD7;font-size:16px;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight:bold;">7</a></th>
            <th bgcolor="#ffffff" class="h" width="2">&nbsp;</th>
            <th align="center" class="button" dir="ltr" style="direction:ltr; vertical-align:middle;" valign="middle" width="46"><a href="https://responses.zenloop.com/web/response/<survey_hash_id>/email_embed/6?is_a_test=false" style="display:block;text-decoration:none;color:#106AD7;font-size:16px;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight:bold;">6</a></th>
            <th bgcolor="#ffffff" class="h" width="2">&nbsp;</th>
            <th align="center" class="button" dir="ltr" style="direction:ltr; vertical-align:middle;" valign="middle" width="46"><a href="https://responses.zenloop.com/web/response/<survey_hash_id>/email_embed/5?is_a_test=false" style="display:block;text-decoration:none;color:#106AD7;font-size:16px;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight:bold;">5</a></th>
            <th bgcolor="#ffffff" class="h" width="2">&nbsp;</th>
            <th align="center" class="button" dir="ltr" style="direction:ltr; vertical-align:middle;" valign="middle" width="46"><a href="https://responses.zenloop.com/web/response/<survey_hash_id>/email_embed/4?is_a_test=false" style="display:block;text-decoration:none;color:#106AD7;font-size:16px;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight:bold;">4</a></th>
            <th bgcolor="#ffffff" class="h" width="2">&nbsp;</th>
            <th align="center" class="button" dir="ltr" style="direction:ltr; vertical-align:middle;" valign="middle" width="46"><a href="https://responses.zenloop.com/web/response/<survey_hash_id>/email_embed/3?is_a_test=false" style="display:block;text-decoration:none;color:#106AD7;font-size:16px;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight:bold;">3</a></th>
            <th bgcolor="#ffffff" class="h" width="2">&nbsp;</th>
            <th align="center" class="button" dir="ltr" style="direction:ltr; vertical-align:middle;" valign="middle" width="46"><a href="https://responses.zenloop.com/web/response/<survey_hash_id>/email_embed/2?is_a_test=false" style="display:block;text-decoration:none;color:#106AD7;font-size:16px;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight:bold;">2</a></th>
            <th bgcolor="#ffffff" class="h" width="2">&nbsp;</th>
            <th align="center" class="button" dir="ltr" style="direction:ltr; vertical-align:middle;" valign="middle" width="46"><a href="https://responses.zenloop.com/web/response/<survey_hash_id>/email_embed/1?is_a_test=false" style="display:block;text-decoration:none;color:#106AD7;font-size:16px;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight:bold;">1</a></th>
            <th bgcolor="#ffffff" class="h" width="2">&nbsp;</th>
            <th align="center" class="button" dir="ltr" style="direction:ltr; vertical-align:middle;" valign="middle" width="46"><a href="https://responses.zenloop.com/web/response/<survey_hash_id>/email_embed/0?is_a_test=false" style="display:block;text-decoration:none;color:#106AD7;font-size:16px;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight:bold;">0 <span class="b010" style="display: none;">- Very unlikely</span></a></th>
          </tr>
        </tbody>
      </table>
      <img src="https://responses.zenloop.com/web/surveys/<survey_hash_id>/opened" height="1" width="1">
      </td>
    </tr>
    <tr>
      <td height="20">&nbsp;</td>
    </tr>
    <tr class="h">
      <td>
      <table border="0" cellpadding="0" cellspacing="0" width="100%">
        <tbody>
          <tr>
            <td align="left" style="font-size:12px;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight:bold;">Very unlikely</td>
            <td align="right" style="font-size:12px;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-weight:bold;">Very likely</td>
          </tr>
        </tbody>
      </table>
      </td>
    </tr>
  </tbody>
</table>


Hinweis: Es muss beachtet werden, dass im VCMS-Template von Emarsys die obigen Style-Tags nicht in den E-Mail-Header integriert werden können, sondern nur in den HTML-Teil. Dies ist der Grund, warum wir keinen Code anbieten können, der für alle E-Mail-Clients funktioniert (z.B. wird Google Mail leider die Desktop-Version anzeigen). Die Lösung für diese Herausforderung ist die Verwendung des VCE-Editors. 


7. Nun wird zurück in die Zenloop-Oberfläche gewechselt um die survey hash id im HTML-Code, der in Zenloop in Vorbereitung über den Kanal "Email embedded" erstellt wurde (siehe oben: "HTML in Zenloop erstellen") herauszufinden

8. Nun werden alle <survey_hash_id> Positionen durch die eigene survey hash id ersetzt. Es sollten 11 Positionen gefunden und ersetzt werden.

Die survey hash id ist eine lange kryptische ID. Hier ist ein Beispiel, damit sich vorgestellt werden kann, wonach im Code augenscheinlich gesucht werden muss:
OHdSOUNKbUIzYkE4Y0dqMGtKRJMrT3F6bnlmR3pQQklFSjFzait3RlJvRT0%1D


9. Es wird jetzt auf den grünen Button "Speichern" geklickt, der automatisch zurück in die Editor-Ansicht (vs. HTML-Ansicht) zurückfphrt und die zentrierte NPS-Skala anzeigt. Hier kann nun die Überschrift geändert werden. Es wird "Zenloop" durch den eigenen Firmennamen oder speziellen Feedback-Touchpoint ersetzt.

10. Dieser Schritt ist optional, aber empfohlen, um die Klicks auf die Skala als Performance-Klick in Emarsys zu tracken. Dazu ist es nun nötig "Auto-Track" zu klicken. 

Es öffnet sich ein weiteres Pop-up:

In diesem Pop-up wird ganz runter gescrollt, um zum grünen Button "Track" zu gelangen:

Nach Klick auf "Track", werden die Links in der HTML-Ansicht von Zenloop-Links auf deine Domain-Links umgewandelt. Hier dargestellt als "emails.company.de", in einem echten Beispiel wäre das "email.facebook.de" oder auch "newsletter.google.de". 

Bitte danach erneut "Speichern" klicken.

11. Um den Prozess abzuschließen - nach Schritt 8 oder 9 -, wird das Pop-up nun mit Klick auf "Schließen" (neben "Speichern") geschlossen und die E-Mail kann regulär bearbeitet werden. 

Die Gruppe im erweiterten Modus ist durch </> in der Gruppen-Ansicht erkennbar:

War diese Antwort hilfreich für dich?