So fügst du personalisierte Bilder zu Iterable hinzu
Nutze die Handlebars-Felder, die du bereits an Iterable übermittelst, um für jeden Nutzer einen Namen, Buchungsdetails oder den Kontostand auf ein Bild zu zeichnen.
Erstveröffentlichung: Füge die Daten, die du in „Iterable“ speicherst, in die Bilder ein, die deine Nutzer sehen.
Iterable-Vorlagen beziehen Profil- und Veranstaltungsdaten bereits mit Handlebars ein. Sendtric Personalisierte Bilder gehen noch einen Schritt weiter und zeichnen diese Werte direkt auf ein Bild – in deinen Schriftarten und deinem Layout: eine Grafik im Stil einer Bordkarte mit der Reiseroute des Nutzers oder eine Prämienkarte mit dem aktuellen Guthaben. Das Bild wird erstellt, sobald die E-Mail geöffnet wird.
Der Drag-and-Drop-Editor von Iterable verfügt über ein dynamische Bild-Option im Bildblock, der ein Bild von einer URL lädt, die Handlebars enthält, und in der eigenen Dokumentation wird auf externe Bilddienste verwiesen, um diese Bilder zu erstellen. Sendtric ist einer dieser Dienste: Du gestaltest das Bild, und seine URL enthält deine Iterable-Felder.
Was du mit personalisierten Bildern in Iterable machen kannst
- Reise- und Buchungsübersichten: Abfahrtsort, Ankunftsort und Datum eines Buchungsvorgangs, dargestellt in einer Reisegrafik. Siehe personalisierte Texte auf den Bildern für Beispiele.
- App-Meilensteine: „Du hast 30 Trainingseinheiten absolviert“ oder „12 Lektionen abgeschlossen“ aus einem benutzerdefinierten Profilfeld in einer Glückwunsch-E-Mail.
- Treueübersichten: Punkte, Stufe und Mitgliedsname auf einem Kartenbild in einer monatlichen Journey-E-Mail.
- Jahresrückblicke: mehrere Statistiken aus dem Nutzerprofil auf einem Hintergrund – eine gängige Anwendung für E-Mails mit Jahresrückblick.
| Bildfunktion | Free | Micro | Standard | Macht und Großunternehmen |
|---|---|---|---|---|
| Individuelle Textebenen pro Bild | 1 | 2 | 4 | 20 |
| Deine eigenen Bildebenen (Logo, Produkt) | No | No | Yes | Yes |
| Einfarbiger Hintergrund | No | No | Yes | Yes |
| Transparenter Hintergrund | No | No | No | Yes |
So fügst du ein personalisiertes Bild zu Iterable hinzu
Schritt 1: Gestalte das Bild
Geh in Sendtric zu Bildpersonalisierung und klicke auf „Neu erstellen“. Wähle einen Hintergrund aus der Medienbibliothek oder eine einfarbige bzw. transparente Leinwand aus und füge dann dynamische Textebenen -Ebenen für jeden Wert hinzu. Passe die Größe jedes Textfelds an den längsten erwarteten Wert an, da der Text zwar umbricht, aber nicht verkleinert wird.
Schritt 2: Gib für jede Ebene den Wert in das Feld „Iterable“ ein
Gib der Variablen für jede „Dynamic Text“-Ebene einen Namen in Kleinbuchstaben Variablennamen und füge den Handlebars-Ausdruck „Iterable“ in ESP-Merge-Tagein, zum Beispiel {{firstName}}. Die Felder sind projektspezifisch, verwende also genau die Namen, die du im Benutzerprofil siehst, einschließlich der Punktnotation für verschachtelte Felder, zum Beispiel {{address.city}} , wenn sich dein Ort in einem Adressobjekt befindet. Füge Fallback-Text für Nutzer ohne Wert hinzu.
Schritt 3: Speichere den Code und kopiere ihn
Speichere das Bild. Nach dem ersten Speichern erscheint das Codefeld, wobei jede Variable zur Bild-URL hinzugefügt und mit deinem Iterable-Ausdruck ausgefüllt wird. Wähle die Ausrichtung und klicke auf „Code kopieren“.
Schritt 4: Füge den Code in einen HTML-Block ein
Öffne deine Iterable-Vorlage und klicke auf „Design bearbeiten“. Ziehe im Drag-and-Drop-Editor ein HTML Block aus dem „Inhalt“ auf die richtige Stelle, wähle ihn aus und füge den Code in den HTML-Editor ein. Im WYSIWYG- oder Side-by-Side-Editor fügst du den Code in den Quellcode ein.
Schritt 5: Vorschau mit echten Nutzern
Klick „Vorschau“, gib die E-Mail-Adresse (oder die Benutzer-ID) eines Benutzers ein und klicke auf „Benutzerdaten laden“ , um das Bild mit den entsprechenden Werten anzuzeigen. Probier mal einen Benutzer mit einem langen Namen und einen mit einem leeren Feld aus. Schick dir dann einen Proof an dich selbst, wodurch die Felder mit den Angaben aus deinem eigenen Profil ausgefüllt werden.
Den Bild-Block anstelle von HTML verwenden
Wenn du lieber einen Bildblock behalten möchtest, kopiere nur die Adresse innerhalb des src des Sendtric-Codes, zieh einen Bild-Block Block hinein, aktiviere „Dynamisches Bild“ und füge die Adresse in „Dynamische URL“ein. Wenn der Block während der Gestaltung leer aussieht, überprüfe ihn in der Vorschau , während die Daten eines Nutzers geladen sind.
Fallbacks in „Iterable“ oder in „Sendtric“
Du kannst entweder den Fallback-Text von Sendtric für leere Werte verwenden oder den Iterable-Helper innerhalb des Tags nutzen, zum Beispiel {{defaultIfEmpty firstName 'there'}}. Verwende einfache Anführungszeichen für den Standardwert, da der Ausdruck in der in doppelten Anführungszeichen gesetzten Adresse des Bildes steht. Wenn „Iterable“ einen Standardwert liefert, wird der Fallback von Sendtric nie angezeigt.
Häufig gestellte Fragen zu personalisierten Bildern von Iterable
Kann ich auch Ereignisdaten verwenden, nicht nur Profilfelder?
Ja. Jeder Handlebars-Wert, den Iterable beim Rendern der E-Mail auflösen kann, kann in eine Ebene aufgenommen werden – einschließlich der Felder aus dem Ereignis, das eine Journey oder Kampagne ausgelöst hat. In der Dokumentation von Iterable wird darauf hingewiesen, dass ein Ereignisfeld, das denselben Namen wie ein Profilfeld hat, Vorrang hat, und {{profile.fieldName}} den Profilwert explizit ausliest.
Was ist, wenn ein Wert Leerzeichen oder Sonderzeichen enthält?
Wenn ein Feld Leerzeichen oder Zeichen wie & oder #enthält, dann schließe es in den urlEncode Block-Helper ein, zum Beispiel {{#urlEncode}}{{city}}{{/urlEncode}}, damit die Bildadresse intakt bleibt. Überprüfe dann das Ergebnis in der Vorschau.
Was sehen Nutzer, wenn ein Feld leer ist?
Wenn „Fallback-Text“ eingestellt ist, sehen sie nur den Fallback-Text – schreib ihn also als vollständigen Satz. Ohne diese Einstellung wird die gesamte Ebene ausgeblendet, einschließlich aller Wörter rund um die Variable.
Kann ich das Bild nach dem Absenden noch ändern?
Ja. Wenn du in Sendtric speicherst, ändert sich das Bild in jeder versendeten E-Mail ab dem nächsten Öffnen. Die gerenderten Versionen werden pro Wertekombination etwa eine Stunde lang zwischengespeichert, und durch das Speichern wird dieser Cache geleert.
Zählen Vorschauen zu meinen Aufrufen?
Vorschauen im Sendtric-Editor tun das nicht. Bei jedem tatsächlichen Laden des Bildes ist das jedoch der Fall, einschließlich der „Iterable“-Proofs, die du öffnest, und wiederholter Öffnungen.
Dieser Leitfaden behandelt einen Aspekt der E-Mail-Personalisierung . Für jedes Personalisierte Bilder findest du auf der Hauptseite.
Weitere Iterable-Anleitungen
- Countdown-Timer - So fügst du Countdown-Timer zu Iterable hinzu
- Countdown-Timer - Dynamische Timer in Iterable hinzufügen
- Live-Umfragen - So fügst du Live-Umfragen zu Iterable hinzu
- Regelbasierte Bilder - So fügst du regelbasierte Bilder zu Iterable hinzu
- Dynamisches Wetter - So fügst du „Dynamisches Wetter“ zu Iterable hinzu
- Kritische Warnmeldungen - So fügst du kritische Warnmeldungen zu Iterable hinzu
- Social-Proof-Zähler - So fügst du Social-Proof-Zähler zu Iterable hinzu
Nutzt du eine andere Plattform? Sieh dir alle Sendtric-Integrationen.
