Anlage eines MailJet–Widgets für externe Designer

Ziel dieses How–To ist, die Anlage und Konfiguration eines Widgets über welches sich BesucherInnen einer Website zu einer Kontaktliste für z.B. einen Newsletter anmelden können. Das fertig angelegt und konfigurierte Widget kann an externe Designer weitergegeben und von diesen im Experten–Modus/ Advanced–Mode gestaltet werden.

Was ist ein Widget?

Ein Widget ist ein Formular, welches in einer Website einfach und durch die Online–RedakteurIn eingebunden werden kann. Es ermöglicht einer BesucherIn einer Website die selbstständige Anmeldung zu z.B. einem Newsletter.

Was sind die Voraussetzungen?

Beteiligte und Aufgabenverteilung

Zur Anlage eines Widgets ist es notwendig Personen aus folgenden Bereichen einzubinden:

  • Betrieb/ Marke → Online–RedakteurIn
    • Aufgaben
      Anlage und Benennung des Widgets, sowie der zugehörigen Kontaktliste.
      Einbinden des fertigen Widgets in den Wireframe/ das Plone–CMS. 
      Test aller Möglichkeiten und Optionen des Widgets (Darstellung und korrekte Funktionalität) und Gegenprüfung der Kontaktdaten im CRM–System.
    • Voraussetzungen
      Zugriff auf Design– und Produktiv–Instanzen des Plone–CMS haben und einen iFrame einfügen können.
      Zugriff auf das Email-Marketingservice und den Bereich Widget für Kontaktlisten.
  • Backstage/ Digitale Kommunikation und CRM→ Technik
    • Aufgaben
      Anlegen oder Umbenennen des Werbemittels im CRM–System.
      Übertragen des Werbemittels im CRM zu einer Kontaktliste im Email-Marketingservice.
      Synchronisieren der Kontakte, welche im CRM ein Werbemittel zugewiesen haben, auf eine Kontaktliste im Email-Marketingservice.
      Konfigurieren des HTMLs des Widgets, falls fixe Kataloge (s. unten) verwendet werden sollen.
    • Voraussetzungen
      Das Werbemittel, für welches die Synchronisierung CRM → Email-Marketingservice hergestellt wird, ist korrekt benannt.
      Das Widget ist angelegt und von der Online-RedakteurIn korrekt konfiguriert.
  • Externe Web–Designer→ CSS/ HTML
    • Aufgaben
      Gestaltung des Widgets, der zugehörigen Bestätigungsmail und ev. Bestätigungsseite.
      Prüfung des Ergebnisses auf der Design– und später Produktivinstanz und Durchführung gegebenenfalls notwendiger Anpassungen.
    • Voraussetzungen
      Das Widget wurde angelegt, fertig konfiguriert und –falls notwendig– durch Backstage erweitert.
      Das Widget wurde in die Design–Instanz eingebunden.

Hinweis zum Ablauf

Da der Expertenmodus irreversibel ist, sollte das Widget vor Umschalten in den Modus (quasi als Backup) dupliziert werden. Das Widget, welches vom Designer gestaltet werden soll, sollte die Ergänzung "Expertenmodus" beim Namen nachgestellt haben. Beispiel: "Allgemeiner Newsletter für BesucherInnen" → "Allgemeiner Newsletter für BesucherInnen Expertenmodus".

Wo findet man den Widget–Editor?

Sobald man sich in den Account eingelogged hat, öffnet man den Menüpunkt Kontakte und wählt den Unterpunkt Widget zu Abonnement aus.

Wie wählt man die korrekte Kontaktliste?

Jedes Widget ermöglicht die Anmeldung zu einer Kontaktliste. Kontaktlisten werden nicht in MailJet erstellt, da das kontaktführende System das CRM–System ist. Daher muss zuerst eine neue Kontaktliste (Werbemittel) über den Support der NÖKU –per Mail an support@noeku.at– beantragt werden. Ist diese erstellt, so kann sie nach MailJet synchronisiert werden. Im besten Fall wird ein bereits bestehendes und mit Kontakten befülltes Werbemittel gewählt – z.B. der allgemeine Newsletter für BesucherInnen. 

Die Dauer des Synchronisierens ist idR kurz und kann in zehn Minuten erledigt werden. Es ist aber zu beachten, dass nicht immer sofort reagiert werden kann (andere, dringlichere Aufgaben wie Ausfälle oder Wartungsläufe, Krankenstände, Urlaube, u.Ä.). Es daher immer ausreichend Vorlaufzeit einzuplanen, da sonst nicht synchronisiert werden kann.

Wie fügt man einen iFrame in den Wireframe ein?

Wird ein Widget angelegt und gestaltet, erhält man im letzten Schritt den HTML–Code eines iFrames. Dieser kann einfach in die Website/ den Wireframe eingefügt werden. Wird Hilfestellung zum Einbinden in den Wireframe benötigt, so ist der Support der Webabteilung/ IT –via Mail an support@noeku.at– zu bemühen.

Anlage eines Widgets

Direktlink zum Widget–Editor: https://app.mailjet.com/widget

Typ des Widgets: Nun kann entweder ein neues Widget erstellt, oder ein bestehendes Widget bearbeitet werden. Wird ein neues angelegt, so sollte ein eingebettetes Widget erstellt werden.

Übersicht der bestehenden Widgets. Mit einem Klick auf den orangfarbenen Button kann ein neues Widget angelegt werden.

Fährt man mit der Maus über ein Widget, so öffnet sich rechter Hand ein Kontextmenü. Über dieses kann man den iFrame–HTML–Code aufrufen, das Widget bearbeiten, die Voransicht öffnen oder das Widget duplizieren.

Der Widget–Editor

Daten: In einem ersten Schritt wird der Name des Widgets gewählt. Danach ist die Kontaktliste, auf welche sich die AbonnentInnen eintragen, zu wählen. Final muss noch die Sprache des Formulars gewählt werden. Von letzterem hängen die Übersetzungen von Anmeldebestätigungen und anderen Standardelementen ab.

Konfigurieren des Widgets

Im zweiten Schritt wird das Widget mit den entsprechenden Feldern befüllt. Hier ist zwischen "zwingend notwendigen" und "optionalen" Feldern zu unterscheiden.

Zu beachten: Manche der Felder sind im kontaktführenden System, dem CRM-System, als Kataloge hinterlegt. Zu diesen zählen unter anderem der "Titel", das "Geschlecht" und auch die "Anrede". Diese Felder dürfen im normalen Modus nicht verwendet werden. Freitextfelder schaden der Qualität der Daten des Betriebes durch unkontrolliertes Befüllen der bestehenden Kataloge durch AbonnentInnen. Dazu zählen klassische Falschdaten wie z.B. "Anrede: Anita", "Titel: Herr", usw. Da MailJet hier keine Katalogauswahl/ Drop–Down anbietet, können diese Felder nur im Expertenmodus genutzt werden.

Wird ein Formular an einen externen Designer gegeben, so muss, ungeachtet der eben genannten Bedingungen, das Feld ausgewählt sein, da es sonst von Backstage nicht in z.B. ein Drop–Down Feld umgebaut werden kann.

Sollen neben der E-Mail-Adresse auch weitere Datenfelder genutzt werden, so ist dies Backstage bekanntzugeben. Die hier aggregierten Daten wirken sich direkt auf den Datenbestand in anderen Systemen aus. Bei manchen Feldern ist Fachwissen notwendig.

Beispiel: Soll die Anrede (Herr/ Frau/ Sonstiges) auch gesetzt werden, so ist das geschlecht zu hinterlegen und als Werte folgendes zu wählen:

  • value="", Label = Anrede wählen…
  • value="männlich", Label = Herr
  • value="weiblich", Label = Frau
  • value="sächlich", Label = Sonstiges

Bestätigung der Anmeldung

Nachdem alle Basisdaten eingetragen sind, ist die Art der Bestätigungsseite zu wählen. Am einfachsten ist Nutzung der "Internen Bestätigungsseite". Dies ist die Vorauswahl. Diese Seite wird von MailJet zur Verfügung gestellt. Sie erscheint, nachdem die AbonnentIn den Link zur Bestätigung der Anmeldung im Opt-In-Mail anklickt.

Wählt man hingegen "Externe Bestätigungsseite nutzen", so kann man, nach erfolgreicher Anmeldung, auf eine Seite innerhalb der eigenen Website weiterleiten. Diese Seite fungiert als Landing Page und kann z.B. für Upselling genutzt werden. Es lohnt sich vermutlich diesen Punkt im Hinterkopf zu behalten und eine Weiterleitung anzudenken. 

Zu beachten: Bei Nutzung einer internen Website sollten hier auch die korrekten UTM–Parameter für Google Analytics hinterlegt werden. Hilfe bei der Auswahl bekommt man im Backstage–Team.

Vom externen Designer kann sowohl die Opt-In-Bestätigungsseite, als auch das Opt-In-Mail, welches die AbonnentIn erhält, gestaltet werden.

Der Widget-Expertenmodus für Designer

Wird das Widget vom Betrieb übergeben, so kann das HTML und (inline) CSS des Formulars, der Bestätigungsmail und Bestätigungsseite direkt bearbeitet werden.

CSS–Klassen und MarkUp

Um dem Email–Marketingservice das Validieren des Formulars und somit auch das Speichern des Markups zu ermöglichen, ist es unbedingt notwendig den name wie auch die w-field-field-67131-380459-932442-* CSS–Klasse der Formularelemente zu erhalten:

<input class="w-preview-fields-content-cell-field-277264"
	type="text"
	placeholder="Vorname"
	name="w-field-field-67131-380459-932442-277264"
	required="">

Wird das MarkUp generell erhalten und soll nur gestyled werden, so hat es Sinn dass man sich in den Developer–Tools des Browsers die Deklarationen der Default–Klassen ansieht und diese Klassen eventuell entfernt.

Dem MarkUp vorangestellt werden, kann ein <style>/* CSS Deklarationen hier */</style> Block. So können CSS–Klassen definiert und den einzelnen Elementen hinzugefügt werden.

Cache–Zeit

Das Markup des iFrames wird lt. Information des Anbieters für eine Stunde gechached. Um den Cache zu umgehen, kann in den Developer Tools des Browsers an die src des iframe einfach ein random Querystring wie z.B. ?CACHEBREAKER+asdf789 angehängt werden:

<iframe 
	class="mj-w-res-iframe" 
	frameborder="0" 
	scrolling="no" 
	marginheight="0" 
	marginwidth="0" 
	src="https://app.mailjet.com/widget/iframe/3Uzo/hsL?CACHEBREAKER+asdf789" 
	width="100%" 
	title="Anmeldung zum allgemeinen Newsletter für BesucherInnen" 
	id="iFrameResizer0" 
	style="overflow: hidden; height: 541px;"></iframe>
  • Keine Stichwörter