Anzeigebedingungen

Mit Anzeigebedingungen können Ihre Benutzer steuern, welche Blöcke in einer E-Mail basierend auf Empfängerdaten angezeigt werden. Zum Beispiel kann ein „VIP-Angebot"-Block nur Premium-Kunden angezeigt werden, oder ein „Verlängerungserinnerung"-Block nur Benutzern, deren Abonnement ausläuft.

Funktionsweise

1. Sie konfigurieren die verfügbaren Bedingungen mit beschreibenden Labels und before/after-Umschließungsstrings
2. Ihre Benutzer wählen eine Bedingung aus einem Dropdown in der Block-Toolbar
3. Beim Export umschließt das SDK das HTML des Blocks mit den before- und after-Strings
4. Ihre Versandplattform wertet die Bedingungen aus und zeigt/versteckt Blöcke pro Empfänger

Das SDK selbst wertet keine Bedingungen aus — es bietet die Oberfläche zur Auswahl und umschließt das HTML beim Export. Ihre E-Mail-Versandplattform (Liquid, Handlebars, Mailchimp usw.) übernimmt die eigentliche bedingte Logik.

Konfiguration

Übergeben Sie Anzeigebedingungen über die Option displayConditions in init():

const editor = await init({
  container: '#email-editor',
  auth: { url: 'https://your-app.com/api/token' },
  displayConditions: {
    conditions: [
      {
        label: 'Nur VIP-Kunden',
        before: '{% if customer.vip %}',
        after: '{% endif %}',
        group: 'Kunde',
        description: 'Wird nur VIP-Kunden angezeigt.',
      },
      {
        label: 'Free-Plan-Benutzer',
        before: '{% if customer.plan == "free" %}',
        after: '{% endif %}',
        group: 'Kunde',
        description: 'Richtet sich an Benutzer im kostenlosen Plan.',
      },
      {
        label: 'Hat bereits gekauft',
        before: '{% if customer.orders_count > 0 %}',
        after: '{% endif %}',
        group: 'Kunde',
      },
    ],
    allowCustom: true,
  },
});

Eigenschaften der obersten Ebene:

Eigenschaft	Typ	Beschreibung
conditions	DisplayCondition[]	Array vordefinierter Anzeigebedingungen
allowCustom	boolean?	Bei true können Benutzer eigene before/after-Logik schreiben (Standard: false)

Bedingungseigenschaften:

Eigenschaft	Typ	Beschreibung
label	string	Lesbarer Name im Toolbar-Dropdown
before	string	Markup, das vor dem Block im exportierten HTML eingefügt wird
after	string	Markup, das nach dem Block im exportierten HTML eingefügt wird
group	string?	Optionale Gruppierung zur Organisation der Bedingungen im Dropdown
description	string?	Beschreibung, die unter dem Bedingungslabel angezeigt wird

Beschreibungsfeld

Das optionale Feld description bietet eine verständliche Erklärung, was eine Bedingung bewirkt. Wenn eine Bedingung auf einen Block angewendet wird, wird die Beschreibung als gedämpfter Text unter dem Bedingungslabel in der Toolbar angezeigt. Dies hilft Benutzern, die Auswirkung jeder Bedingung zu verstehen, ohne die zugrunde liegende Logik lesen zu müssen.

Eigene Bedingungen

Bei allowCustom: true erscheint eine Option „Eigene Bedingung" am Ende des Bedingungen-Dropdowns. Bei Auswahl öffnet sich ein Formular, in dem Benutzer:

1. Ihre Bedingung benennen können (ein beschreibendes Label)
2. Das before-Markup schreiben können (die öffnende bedingte Logik)
3. Das after-Markup schreiben können (die schließende bedingte Logik)

Eigene Bedingungen werden auf dem Block identisch zu vordefinierten Bedingungen gespeichert. Sie erscheinen mit einem „Eigene"-Badge in der Toolbar, um sie von Voreinstellungen zu unterscheiden. Dies ist nützlich für fortgeschrittene Benutzer, die Bedingungen benötigen, die nicht durch die von Ihnen bereitgestellten Voreinstellungen abgedeckt sind.

Bedingungen gruppieren

Verwenden Sie die optionale Eigenschaft group, um Bedingungen in logische Kategorien im Dropdown zu organisieren. Bedingungen mit demselben group-Wert erscheinen unter einer gemeinsamen Überschrift:

displayConditions: {
  conditions: [
    // Diese erscheinen unter der Überschrift "Kunde"
    { label: 'VIP-Kunden', before: '{% if customer.vip %}', after: '{% endif %}', group: 'Kunde' },
    { label: 'Neue Kunden', before: '{% if customer.new %}', after: '{% endif %}', group: 'Kunde' },

    // Diese erscheinen unter der Überschrift "Standort"
    { label: 'US-Empfänger', before: '{% if contact.country == "US" %}', after: '{% endif %}', group: 'Standort' },
    { label: 'EU-Empfänger', before: '{% if contact.region == "EU" %}', after: '{% endif %}', group: 'Standort' },
  ],
},

Bedingungen ohne group erscheinen ungruppiert am Anfang des Dropdowns.

Visuelle Indikatoren

Wenn eine Anzeigebedingung auf einen Block angewendet wird:

• Ein Filter-Icon-Badge erscheint auf dem Block im Editor-Canvas
• Die Toolbar zeigt den aktiven Bedingungsnamen mit einer Entfernen-Schaltfläche
• Benutzer können die Bedingung jederzeit ändern oder entfernen

Plattformbeispiele

Liquid / Shopify

displayConditions: {
  conditions: [
    {
      label: 'VIP-Kunden',
      before: '{% if customer.tags contains "vip" %}',
      after: '{% endif %}',
    },
  ],
},

Handlebars

displayConditions: {
  conditions: [
    {
      label: 'Premium-Benutzer',
      before: '{{#if isPremium}}',
      after: '{{/if}}',
    },
  ],
},

Mailchimp

displayConditions: {
  conditions: [
    {
      label: 'Abonnenten in den USA',
      before: '*|IF:COUNTRY=US|*',
      after: '*|END:IF|*',
    },
  ],
},

Salesforce Marketing Cloud (AMPscript)

displayConditions: {
  conditions: [
    {
      label: 'Treueprogramm-Mitglieder',
      before: '%%[IF @loyaltyMember == "true" THEN]%%',
      after: '%%[ENDIF]%%',
    },
  ],
},

Darstellung im exportierten HTML

Wenn ein Block eine Anzeigebedingung hat, umschließt das exportierte HTML den Blockinhalt mit den before- und after-Strings:

{% if customer.vip %}
<mj-section>
  <mj-column>
    <mj-text>Exklusives VIP-Angebot nur für Sie!</mj-text>
  </mj-column>
</mj-section>
{% endif %}

Blöcke ohne Anzeigebedingung werden normal ohne Umschließung exportiert.

Anwendungsfälle

• VIP-Inhalte — Exklusive Angebote oder Early-Access-Ankündigungen nur Premium-Kunden zeigen
• Geografisches Targeting — Regionsspezifische Aktionen, Versandinformationen oder rechtliche Hinweise anzeigen
• Planbasierte Features — Upgrade-CTAs für kostenlose Benutzer hervorheben oder erweiterte Funktionen für zahlende Benutzer zeigen
• A/B-Inhalte — Verschiedene Inhaltsvarianten für verschiedene Segmente anzeigen
• Saisonale Kampagnen — Feiertagsspezifische Blöcke für angemeldete Empfänger anzeigen
• Compliance — Erforderliche rechtliche Texte nur für bestimmte Rechtsgebiete einbeziehen

Zusammenspiel mit Merge-Tags

Anzeigebedingungen und Merge-Tags arbeiten natürlich zusammen. Merge-Tags handhaben die Inline-Personalisierung (Ersetzen von Variablen im Text), während Anzeigebedingungen die Sichtbarkeit auf Blockebene handhaben (Anzeigen oder Ausblenden ganzer Blöcke).

Sie können beides in derselben Vorlage verwenden — zum Beispiel kann ein Block, der mit einer Anzeigebedingung umschlossen ist, auch Merge-Tags zur Personalisierung innerhalb des Blockinhalts enthalten.