Mailjet ist ein Dienst zum Versenden von E-Mails. Aus Flyo lassen sich Kontakte und Inhalte synchronisieren. Die Inhalte werden als sogenannte Sections an Mailjet gesendet und stehen danach dort im Drag-n-Drop Editor unter "gespeicherte Abschnitte) zur Verfügung. Die Kontakte werden der gewählten Kontaktliste hinzugefügt.
API Key und Secret einrichten
Beim Ausetzen der Integration in Flyo muss zuerst eine Mailjet-Verbindung ausgewählt werden. Falls noch keine besteht, muss eine neue Verbindung erstellt werden. Dazu wird ein API-Key und der API-Geheimcode seitens Mailjet benötigt. Dieser findet sich Konto-Einstellungen / REST API / API-Key. Seitens Mailjet kann pro Konto resp. Unterkonto nur 1 API-Key gelöst werden. Das dazugehörige Secret kann nur beim erstmaligen Erstellen angeschaut werden. Muss zu einem späteren Zeitpunkt eine weitere Verbindung hergestellt werden, muss ein neues Secret generiert werden und allfällige andere, bestehende Verbindungen entsprechend aktualisiert werden.
Templates
Lerne die Basics Step by Step in diesem Blogpost.
Ein Newsletter besteht aus zwei Ebenen: dem Grundlayout, das du von Hand schreibst, und den Abschnitten, die du über das Plus-Symbol einfügst — Vorlagen für dynamische Inhalte aus deinen Content Pools sowie die selbst definierten Variablen. Beide Ebenen unterstützen die Template Engine. Wie du Variablen im Grundlayout ansprichst und was komplexe Feldtypen wie Mehrfacheingaben oder Bilder dabei liefern, steht in Variablen im Grundlayout.
Beispielcode
Einfacher Newsletterabschnitt mit Variablen für z.B. Blogartikel
<mj-section>
<mj-column>
<mj-image src="{$bild}" alt="{$titel}" border-radius="30px" />
<mj-text>{$titel}</mj-text>
<mj-text>{$text}</mj-text>
<mj-button href="{$link}">Mehr</mj-button>
</mj-column>
</mj-section>
<mj-raw>{$metric}</mj-raw>Das Metric-Pixel mithilfe von
$metrickann bei umfangreichen Newsletterauflagen eine sehr hohe Anzahl an Impressionen generieren.
Einfaches Newsletterlayout mit einem Header und Footer sowie einem Editoral-Teil zur manuellen Befüllung.
<mjml>
<mj-head>
<mj-attributes>
<mj-all font-family="Verdana" />
</mj-attributes>
<mj-title>Newsletter</mj-title>
<mj-style inline="inline">
.content {
padding: 20px;
}
.btn {
background-color: #003246;
color: white;
border-radius: 30px;
padding: 10px 20px;
text-decoration: none;
font-weight: 700;
font-size: 14px;
display: inline-block;
}
.highlight {
color: #003246;
font-weight: 700;
}
.footer-text {
font-size: 14px;
color: #FFFFFF;
}
.footer-link {
text-decoration: none;
color: #FFFFFF;
font-weight: 600;
}
</mj-style>
</mj-head>
<mj-body background-color="#FFFFFF">
<!-- Logo Section -->
<mj-section background-color="#FFFFFF">
<mj-column width="100%">
<mj-image
align="center"
src="https://storage.flyo.cloud/14_097e4e57_logoflyofarbig.png"
alt="Flyo-Logo"
width="100px"
/>
</mj-column>
</mj-section>
<!-- Title Section -->
<mj-section
background-color="#003246"
padding="30px"
padding-top="40px"
border-radius="30px"
>
<mj-column>
<mj-image
src="titelbild"
alt="Hero Image"
border-radius="30px"
/>
<mj-text
font-size="35px"
line-height="42px"
font-weight="700"
color="#FFFFFF"
>
titel
</mj-text>
<mj-text
font-size="18px"
color="#FFFFFF"
line-height="22px"
font-weight="700"
>
leadtext
</mj-text>
<mj-text
font-size="16px"
color="#FFFFFF"
line-height="20px"
font-weight="400"
>
Text Editorial
</mj-text>
</mj-column>
</mj-section>
<!-- Blogs Section -->
<mj-section>
<mj-column>
<!-- Add your blogs content here -->
Blogs
</mj-column>
</mj-section>
<!-- Footer Section -->
<mj-section
background-color="#003246"
padding="20px"
border-radius="30px"
>
<mj-column width="100%">
<mj-text
font-size="14px"
font-weight="400"
color="#FFFFFF"
align="center"
>
Dieser Newsletter wurde versandt von:
<br />
Flyo Zoo, Internetstrasse 77, 5000 Aarau
</mj-text>
</mj-column>
<mj-column>
<mj-text
align="center"
font-size="12px"
color="#FFFFFF"
>
<a href="[[UNSUB_LINK_DE]]" class="footer-link">Newsletter abbestellen</a>
<br />
<a href="[[PERMALINK]]" class="footer-link">Im Browser anschauen</a>
</mj-text>
</mj-column>
</mj-section>
</mj-body>
</mjml>Variablen im Grundlayout
Die Variablen, die du unter «Variabeln» definierst, kannst du auf zwei Arten ins Grundlayout bringen:
- Über das Plus-Symbol neben dem Code. Flyo setzt an dieser Stelle den Wert der Variable ein. Das ist der schnellste Weg, wenn du den Wert einfach nur ausgeben willst.
- Über den Identifier, mit der Syntax
{$identifier}. Damit steht dir im Grundlayout die volle Template Engine zur Verfügung — Bedingungen, Schleifen und Filter.
Den Identifier legst du beim Erstellen der Variable fest (Konfiguration ➔ Variabeln ➔ Identifier). Er darf nur Buchstaben, Zahlen und Unterstriche enthalten und nicht mit einer Zahl beginnen: titel, cover_bild, editorial.
Bestehende Variablen
Variablen, die vor dieser Funktion erstellt wurden, haben als Identifier eine zufällige ID (z.B. 4f3a1c8e-…). Diese ist als {$identifier} nicht verwendbar. Vergib der Variable einfach einen sprechenden Identifier und speichere die Integration — der eingefügte Block funktioniert in der Zwischenzeit unverändert weiter.
Der praktische Nutzen: ein Abschnitt kann komplett wegfallen, solange seine Variable leer ist. So entstehen keine leeren <mj-section>-Blöcke mit ungewolltem Abstand.
{if $titel}
<mj-section padding="30px">
<mj-column>
<mj-text font-size="35px">{$titel}</mj-text>
</mj-column>
</mj-section>
{/if}Eine Bedingung darf sich über mehrere Zeilen erstrecken und auch einen eingefügten Abschnitt umschliessen. Die Inhalte selbst werden dabei nie als Template interpretiert: Wenn in einem Blogtitel eine geschweifte Klammer steht, bleibt sie stehen und bricht den Newsletter nicht.
Komplexe Feldtypen
Eine Variable ist nicht auf Text beschränkt. Was {$identifier} liefert, hängt vom gewählten Feldtyp ab:
| Feldtyp | Wert der Variable |
|---|---|
| Text, Textarea, Farbe, URL | die Zeichenkette, direkt ausgebbar |
| Bild, Datei | die fertige URL — direkt in src="" verwendbar |
| Bilder, Dateien | eine Liste von URLs, mit {foreach} durchlaufbar |
| Checkbox-Liste | die Liste der ausgewählten Werte |
| Mehrfacheingabe | eine Liste von Zeilen, je Zeile ein Eintrag pro definiertem Unterfeld |
Bei der Mehrfacheingabe definierst du beim Anlegen der Variable die Unterfelder (jeweils mit Label, Typ und Identifier). Im Template durchläufst du die Zeilen mit {foreach} und sprichst die Unterfelder über ihren Identifier an. Die Werte sind dabei bereits aufbereitet: ein Unterfeld vom Typ Bild ist an dieser Stelle schon eine URL.
{foreach $links as $row}
<mj-section>
<mj-column>
<mj-image src="{$row['bild']}" alt="{$row['headline']}" />
<mj-button href="{$row['link']}">{$row['headline']}</mj-button>
</mj-column>
</mj-section>
{/foreach}Ein über das Plus-Symbol eingefügter Block kann immer nur eine Zeichenkette einsetzen: Listen erscheinen dort kommagetrennt, eine Mehrfacheingabe gibt gar nichts aus. Sobald du die einzelnen Zeilen oder Felder brauchst, sprich die Variable über ihren Identifier an und durchlaufe sie mit
{foreach}.
Geschweifte Klammern in CSS
Weil das Grundlayout durch die Template Engine läuft, hat die geschweifte Klammer eine Bedeutung: Eine {, auf die direkt ein Buchstabe folgt, wird als Template-Tag gelesen. In der Vorschau erscheint dann eine Meldung wie Unexpected tag {background-color}, und es wird nichts an Mailjet übermittelt.
Betroffen ist praktisch nur minifiziertes CSS in <mj-style>. Sobald nach der Klammer ein Leerzeichen oder ein Zeilenumbruch folgt, ist alles unverändert gültig — normal formatiertes CSS funktioniert also ohne Anpassung.
| Schreibweise | Ergebnis |
|---|---|
.btn { … (Leerzeichen oder Umbruch nach der Klammer) | funktioniert |
.btn{background-color:#003246} | Fehler |
@media (max-width:480px){.foo{display:none}} | Fehler |
{{name}} (Handlebars-Schreibweise) | Fehler — Flyo nutzt {$name} |
So räumst du es aus:
<!-- 1. Leerzeichen nach der Klammer — die einfachste Lösung -->
<mj-style>.btn { background-color:#003246 }</mj-style>
<!-- 2. Den ganzen Style-Block ausklammern -->
<mj-style n:syntax="off">.btn{background-color:#003246}</mj-style>
<!-- 3. Einen längeren Abschnitt ausklammern -->
{syntax off}
<mj-style>@media (max-width:480px){.foo{display:none}}</mj-style>
{/syntax}
<!-- 4. Eine einzelne Klammer ausgeben -->
<mj-style>.btn{l}background-color:#003246{r}</mj-style>WARNING
Innerhalb von n:syntax="off" bzw. {syntax off} sind auch keine Variablen mehr verfügbar. Setze es deshalb nur um den <mj-style>-Block, nie um einen Abschnitt, der {$variablen} ausgibt.
Iteration von Inhalten
Du kannst mit der Template Engine Daten, zum Beispiel aus einer Relation, iterieren. Dafür verwendest du einen foreach-Block, der üblicherweise in einer Section eingesetzt wird, um die darin enthaltenen Elemente zu wiederholen. Standardmässig konvertiert die Integration alle Array-Inhalte in eine kommagetrennte Liste, was für viele Situationen ausreichend ist. Wenn du jedoch das Array erneut benötigst, kannst du den Filter "Zeichenkette Teilen" verwenden, um aus der kommagetrennten Liste wieder ein Array zu erstellen, über das du anschliessend mit foreach iterieren kannst.
<mj-section>
<mj-column>
{foreach $labels as $label}>
<mj-text>{$label}</mj-text>
{/foreach}
</mj-column>
</mj-section>Metrik Pixel
Um Metriken für einen Newsletter einzurichten, müssen zunächst die Metrikdaten als Variable (1) verfügbar gemacht werden. Anschliessend müssen sie innerhalb des jeweiligen Elements in ein mj-raw-Tag (2) eingebettet werden. Dies ermöglicht die effektive Verfolgung und Analyse von Newsletter-Metriken.
Beispielcode:
<mj-section full-width="full-width">
<mj-column width="50%">
<mj-image src="{$image}" alt="" padding-bottom="20px" padding-top="20px"></mj-image>
</mj-column>
<mj-column width="50%" vertical-align="middle">
<mj-text align="left">{$title}<br /><br />{$teaser}</mj-text>
</mj-column>
</mj-section>
<mj-raw>{$metric}</mj-raw>Wenn der Newsletter geöffnet wird und das Tracking-Pixel nicht von einem E-Mail-Client blockiert wird, erfolgt nun für jeden Eintrag eine Metrikerfassungsanfrage.