August 2023

Mailjet und Flyo: So einfach funktioniert es ­čĺ¬

Mailjet und Flyo: So einfach funktioniert es ­čĺ¬

Newsletter eignen sich wunderbar, um mit deiner Zielgruppe regelm├Ąssig im Kontakt zu bleiben. Das Problem: Ein Newsletter muss von Hand erstellt werden, was viel Zeit in Anspruch nimmt. Mit Flyo kannst du deine Newsletter direkt in Flyo zusammenstellen und mit einem Klick eine fixfertige Newsletter-Kampagne erstellen. In diesem Blog zeigen wir dir, wie du ein Template erstellst und direkt in Flyo eine Newsletter-Kampagne erstellst.

Bevor wir starten

Mit der Mailjet-Integration bietet Flyo eine einfach zu konfigurierende Anbindung an eines der beliebtesten Newsletter-Tools. Mailjet eignet sich wunderbar zum Verschicken von ansprechenden Newsletter und ist zudem DSGVO-konform. Zus├Ątzlich zum Flyo-Account ben├Âtigst du also einen Mailjet-Account inkl. API-Schl├╝ssel mit Secret Key.

Die API-Schl├╝ssel findest du bei Mailjet unter Mein Konto ┬╗ Einstellungen ┬╗ API-Key. Kopiere API-Schl├╝ssel und Secret Key in ein Textdokument und erstelle in Flyo die neue Integration (Integrationstyp ┬╗ E-Mail Service ┬╗ Mailjet Vorlage) und f├╝ge API-Schl├╝ssel und Secret Key ein.

Im n├Ąchsten Schritt w├Ąhlst du den Content Pool, der die Inhalte f├╝r den Newsletter enth├Ąlt. Du kannst mehrere Content Pools ausw├Ąhlen. Tipp: Damit du sp├Ąter f├╝r jede Newsletter-Kampagne die gew├╝nschten Inhalte ausw├Ąhlen kannst, erstelle einen kuratierten Content Pool. In unserem Beispiel haben wir als Basis f├╝r die Integration den Content Pool "Storys Flyo Newsletter" ausgew├Ąhlt.

Legen wir los

1 - Definieren der Newsletter-Abschnitte

Wir verwenden f├╝r die Newsletter-Vorlage die Open Markup-Sprache MJML. Sie vereinfacht die Erstellung responsiver E-Mail Vorlagen. Damit unsere Inhalte im Newsletter richtig dargestellt werden, m├╝ssen wir f├╝r jeden Content Pool einen Abschnitt (Section) definieren. Dazu definieren wir zuerst die Platzhalter (Variablen) in die sp├Ąter die Inhalte synchronisiert werden. In unserem Beispiel erstellen wir einen Platzhalter f├╝r den Titel, Teaser, Bild und Link und verbinden (mappen) die Variablen mit den Inhalten aus Flyo.

1400xnull


Anschliessend definieren wir das Aussehen und f├╝gen an den entsprechenden Orten die Platzhalter f├╝r die sp├Ąteren Inhalte ein.

1400xnull

Damit du loslegen kannst, haben wir dir ein Abschnitt als MJML-Code in diesen Beitrag kopiert. Nutze das Beispiel und passe es deinen W├╝nschen an. Im Code-Beispiel siehst du unsere Platzhalter. Dort wo beispielsweise {teaser} steht, wird beim Erstellen des Newsletters der Teaser eingef├╝gt. Die Inhalte im Newsletter werden dabei iteriert. Das heisst, wenn du z.B. im Content Pool f├╝nf Blogbeitr├Ąge eingef├╝gt hast, wird beim Erstellen des Newsletters der folgende Abschnitt f├╝nfmal generiert - f├╝r jeden Blogbeitrag einmal.

<mj-section>
<mj-column background-color="#FFFFFE">
<mj-image padding-bottom="0px" padding-top="0px" padding-left="0px" padding-right="0px" src="{image}" href="{url}" alt="">
</mj-image>
<mj-text padding-top="25px" font-family="Manrope" font-size="22px" line-height="120%" font- weight="bold">{title}
</mj-text>
<mj-text padding-top="25px" font-family="Manrope" font-size="16px" line-height="120%">
{teaser}
</mj-text>
<mj-button background-color="#2cc1ff" padding-bottom="25px" border-radius="8px" href="
{url}" font-size="16px" font-family="Manrope" line-height="120%">Mehr erfahren
</mj-button>
</mj-column>
</mj-section>

2 - Zus├Ątzliche Variablen definieren (Optional)

Optional k├Ânnen zus├Ątzliche Variablen definiert werden, welche danach im Template verwendet werden k├Ânnen. Diese Variablen sind nicht an die Content-Typen in Flyo gebunden. Dies kann hilfreich sein, um Newsletter wechselnde Titel haben (z.B. "Ausgabe Juli 2023").

1400xnull

3 - Template in Flyo einf├╝gen

In diesem Schritt definierst du das Layout von deiner gesamten Vorlage.

Tipp: Vollst├Ąndige Guidelines, Templates und einen Editor findest du auf mjml.io. Mit dem Live Editor, kannst du dein Template erstellen und siehst jeweils die ├änderungen in Echtzeit. Am Ende dieses Beitrags siehst du ein Beispiel f├╝r ein vollst├Ąndiges Template.

Wenn du dein Template erstellt hast, kannst du dein mjml-Code im Abschnitt "Template" kopieren. Auf der rechten Seite von deinem Code-Editor siehst du ein kleines Plus-Zeichen. So kannst du deine Newsletter-Abschnitte, die du im Schritt 1 erstellt hast in dein Template einf├╝gen. In unserem Beispiel haben wir den Abschnitt "Storys Flyo Newsletter" eingef├╝gt.

4 - Newsletter-Kampagne erstellen

Nun kannst du deiner Vorlage einen Namen geben und deine Vorlage erstellen. Im Anschluss erstellt Flyo eine neue E-Mail-Marketing-Vorlage, welche du in deinem Mailjet Konto unter Templates einsehen kannst. Sobald du einmalig Abschnitte und Template konfiguriert hast, kannst du Newsletter-Kampagnen mit einem Klick generieren und aus Mailjet versenden. Bevor wir einen neuen Newsletter versenden, passen wir in unserem Beispiel nur zwei Dinge an: 1) Die Inhalte im Content Pool, denn wir wollen nicht in jedem Flyo-Newsletter die gleichen Inhalte versenden; und 2) die zus├Ątzliche Variable mit der Bezeichnung des Newsletters (z.B. "Ausgabe Juli 2023"). Du kannst im Abschnitt Konfiguration & Kampagne erstellen auf Vorschau klicken, um eine Vorschau deiner Newsletter-Kampagne zu sehen. Von hier kannst du auch direkt eine neue Newsletter-Kampagne erstellen. Flyo sendet die Kampagne automatisch an Mailjet, von wo aus sie anschliessend versendet werden kann.

1400xnull

1400xnull

Vorteile

  • Inhalte zentral in Flyo verwalten und automatisiert in wenigen Klicks in Newsletter-Kampagnen einbinden

  • Layout wird automatisch erstellt und "Layout-Fehler" werden minimiert

  • Falsche Verlinkungen zu den einzelnen Inhalten sind ausgeschlossen

  • Template einmalig erstellen und automatisiert wiederverwenden

Kosten

Neben deinem Preisplan f├╝r Flyo musst du f├╝r Mailjet folgende Kosten kalkulieren: 6'000 E-Mails im Monat sind kostenlos. Kostenpflichtige Pl├Ąne starten ab CHF 23/Monat.