# Liquid-Vorlagen

<YouTube id="A7l1_gK5yOA" playlabel="YouTube-Video: Erfahren Sie, wie Sie Inhaltsvorlagen in Customer Journeys verwenden"/>


Liquid-Vorlagen erweitern die Personalisierungsmöglichkeiten von Pushwoosh erheblich, indem sie zusätzlich zur regulären Verwendung von [dynamischen Inhalten](/de/product/personalization/dynamic-content/) eine anspruchsvolle Logik implementieren.

Die Personalisierung von Nachrichten in Pushwoosh basiert auf [Tags (Benutzerdaten)](/de/product/audience-data-and-segmentation/user-data-tags/tags). Pushwoosh bietet eine Vielzahl von [Standard-Tags](/de/product/audience-data-and-segmentation/user-data-tags/tags#default-tags) und [benutzerdefinierten Tags](/de/product/audience-data-and-segmentation/user-data-tags/tags#custom-tags). Mit diesen können Sie den Vornamen, die Stadt, die Kaufhistorie usw. eines Benutzers angeben, um eine persönlichere Nachricht zu senden. Zum Beispiel: `Hi {{First_name}}, thanks for ordering {{item}}`.

Liquid-Vorlagen fügen dynamischen Inhalten mehr Logik hinzu. Wenn beispielsweise das Abonnement-Tag eines Benutzers „kostenlos“ enthält, können Sie ihm eine Nachricht senden: „Sichern Sie sich Ihren 10 % Rabatt.“

Die Anpassung des Nachrichteninhalts an die IDs, Verhaltensweisen und Vorlieben der Benutzer ist der effizienteste Weg, um die Relevanz zu erhöhen und beeindruckendere Ergebnisse aus Ihren Marketingkampagnen zu erzielen.

## Syntax

Inhaltsvorlagen, die auf [Liquid von Shopify](https://shopify.github.io/liquid/) basieren, verwenden eine Kombination aus [**Tags**](#tags), [**Objekten**](#objects) und [**Filtern**](#undefined), um dynamische Inhalte zu laden. Inhaltsvorlagen ermöglichen es Ihnen, auf bestimmte Variablen innerhalb einer Vorlage zuzugreifen und deren Daten auszugeben, ohne etwas über die Daten selbst wissen zu müssen.

<Aside type="note">
Um mehr über die Syntax zu erfahren, lesen Sie bitte die [Liquid-Dokumentation](https://shopify.github.io/liquid/basics/introduction/).
</Aside>

### Objekte

`Objekte` definieren den Inhalt, der einem Benutzer angezeigt wird. `Objekte` sollten in doppelte geschweifte Klammern eingeschlossen werden: `{{ }}`

Wenn Sie beispielsweise eine Nachricht personalisieren, senden Sie `{{Name}}` in deren Textkörper, um die Namen der Benutzer zum Inhalt der Nachricht hinzuzufügen. Der Name des Benutzers (Wert des Name-Tags) ersetzt das Liquid-Objekt in einer Nachricht, die der Benutzer sehen wird.

<Tabs>
<TabItem label="Eingabe">
```
Hi {{Name}}! We're glad you're back!
```
</TabItem>

<TabItem label="Ausgabe">
Hallo Anna! Wir freuen uns, dass Sie wieder da sind!
</TabItem>
</Tabs>

### Tags

`Tags` erstellen die Logik und den Kontrollfluss für Vorlagen. Die geschweiften Klammer-Prozent-Trennzeichen `{%` und `%}` und der Text, den sie umgeben, erzeugen keine sichtbare Ausgabe, wenn die Vorlage gerendert wird. Dies ermöglicht es Ihnen, Variablen zuzuweisen und Bedingungen oder Schleifen zu erstellen, ohne dem Benutzer die Liquid-Logik anzuzeigen.

Zum Beispiel können Sie mit dem `if`-Tag die Sprache der Nachricht variieren, je nachdem, welche Sprache auf dem Gerät des Benutzers eingestellt ist:

<Tabs>
  <TabItem label="Eingabe">

```liquid
{% if Language == 'fr' %}
Salut!
{% else %}
Hello!
{% endif %}
````

  </TabItem>

  <TabItem label="Ausgabe (fr)">
    Salut!
  </TabItem>

  <TabItem label="Ausgabe (es)">
    Hello!
  </TabItem>
</Tabs>


### Tag-Operatoren

<table data-header-hidden><thead><tr><th width="189.5" align="center">Operator</th><th>Beschreibung</th></tr></thead><tbody><tr><td align="center"><code>==</code></td><td>gleich</td></tr><tr><td align="center"><code>!=</code></td><td>ungleich</td></tr><tr><td align="center"><code>></code></td><td>größer als</td></tr><tr><td align="center"><code>&#x3C;</code></td><td>kleiner als</td></tr><tr><td align="center"><code>>=</code></td><td>größer als oder gleich</td></tr><tr><td align="center"><code>&#x3C;=</code></td><td>kleiner als oder gleich</td></tr><tr><td align="center"><code>or</code></td><td>logisches oder</td></tr><tr><td align="center"><code>and</code></td><td>logisches und</td></tr><tr><td align="center"><code>contains</code></td><td>prüft auf das Vorhandensein eines Substrings in einem String oder einem Array von Strings</td></tr></tbody></table>

<Aside type="note">
In Tags mit mehr als einem `and`- oder `or`-Operator werden die Operatoren in der Reihenfolge _von rechts nach links_ geprüft. Sie können die Reihenfolge der Operationen nicht durch Klammern ändern – Klammern sind ungültige Zeichen in Liquid und verhindern, dass Ihre Tags funktionieren.
</Aside>

### Filter

`Filter` ändern die Ausgabe eines Liquid-Objekts oder einer Variablen. Sie werden innerhalb von doppelten geschweiften Klammern `{{ }}` und bei der Zuweisung von Variablen verwendet und sind durch ein Pipe-Zeichen `|` getrennt. Mehrere Filter können auf eine Ausgabe angewendet werden und werden von links nach rechts angewendet.


<Tabs>
<TabItem label="Eingabe">

```

{{ Name | capitalize | prepend:"Hello " }}

```

</TabItem>

<TabItem label="Ausgabe">

Hello Anna

</TabItem>
</Tabs>



## Verwendung von Liquid-Vorlagen

Liquid-Vorlagen sind sowohl für Nachrichten verfügbar, die vom Control Panel gesendet werden, als auch für [API-Anfragen](/de/developer/guides/personalization/liquid-templates#using-liquid-templates-in-messages-sent-via-api).

In Pushwoosh sind Liquid-Vorlagen auf alle Inhaltsfelder jeder Kanalnachricht anwendbar:

* Push-Benachrichtigungen
* E-Mails

Um eine Liquid-Vorlage zu Ihrer Nachricht hinzuzufügen, fügen Sie sie in den Textkörper der Nachricht ein. Sie können dies tun, wenn Sie mit [Push](/de/product/customer-journey/journey-elements/#push)- oder [E-Mail](/de/product/customer-journey/journey-elements/#email)-Elementen arbeiten, direkt über die Benutzeroberfläche des Customer Journey Builders.


Gehen Sie zu **Customer Journey Builder** > **Kampagne erstellen** > ziehen Sie die folgenden Elemente auf Ihre Leinwand: **Zielgruppenbasierter Einstieg**, **Push** (oder **E-Mail**) und **Beenden**. Verbinden Sie die Elemente. Klicken Sie dann auf das **Push**-Symbol, wählen Sie **Benutzerdefinierter Inhalt** und fügen Sie Ihren Text ein.


Um Liquid-Logik hinzuzufügen, verwenden Sie Tag-Werte mit der folgenden Syntax:

```liquid  
{% if TagName == 'value' %}  
  Inhalt, der in diesem Szenario gesendet werden soll  
{% else %}  
  Inhalt, der andernfalls gesendet werden soll  
{% endif %}
```
Klicken Sie dann auf **Anwenden**.

<video src="/personalization-liquid-templates-1.webm" title="Oberfläche des Customer Journey Builders, die zeigt, wie man Liquid-Vorlagenlogik mit if-else-Bedingungen zum Inhalt von Push-Benachrichtigungen hinzufügt" autoplay loop muted playsinline />

Vorlagenvariablen (Pushwoosh-Tags) sollten keine Leerzeichen enthalten und nur alphanumerische Werte und Unterstriche haben, z. B. `my_tag` oder `myTag` anstelle von `My Tag`.

[Erfahren Sie mehr über Liquid-Vorlagen in Journeys](/de/product/customer-journey/journey-elements/dynamic-content-and-liquid-templates-in-journeys)

<Aside type="tip">
 Sie können auch die Liquid-Syntax in `/createMessage`-Anfragen verwenden, um Liquid-Vorlagen zu implementieren. Hierfür benötigen Sie die Unterstützung Ihres Entwicklungsteams. Teilen Sie ihnen das [Handbuch für Liquid-Vorlagen](/de/developer/guides/personalization/liquid-templates) zur detaillierten Anleitung mit.
</Aside>

## Verbundene Inhalte

Verbundene Inhalte sind eine Funktion in Liquid-Vorlagen, die es Ihnen ermöglicht, Daten dynamisch aus einer externen Quelle, wie z. B. einem Webdienst, abzurufen und direkt in Ihren E-Mail- oder Push-Benachrichtigungsnachrichten zu verwenden. Diese Funktion ermöglicht eine Echtzeit-Personalisierung, indem JSON-Daten von einer angegebenen URL abgerufen und in einer Variablen gespeichert werden, die in Ihrem Inhalt verwendet werden kann.

#### Wichtige Anwendungsfälle

- **Produktempfehlungen**: Zeigen Sie personalisierte Produktlisten an, die auf jeden Benutzer zugeschnitten sind.

- **Promo-Codes**: Fügen Sie einzigartige Promo-Codes ein, die von einem Backend-Dienst generiert werden.

#### Voraussetzungen

* Um Verbundene Inhalte zu verwenden, müssen Sie über einen eigenen Backend-Dienst verfügen, der die erforderlichen Daten (z. B. Promo-Codes, Produktempfehlungen) basierend auf **User ID, HWID oder benutzerdefinierten Tags** generiert und bereitstellt. Pushwoosh ruft diese Daten dann ab, bevor eine Nachricht gesendet wird.

### Schritt-für-Schritt-Implementierungsanleitung

<Aside type="caution" icon="setting" title="Hilfe von Entwicklern erforderlich">
Sie benötigen die Hilfe Ihres Entwicklerteams, um Verbundene Inhalte zu verwenden. Teilen Sie diese Anleitung mit ihnen, um loszulegen.
</Aside>

#### Schritt 1. Backend-Dienst einrichten

Der Backend-Dienst sollte:

* Eine Anfrage mit benutzerspezifischen Parametern (z. B. `userId`) akzeptieren. Verbundene Inhalte unterstützen `UserID`, `HWID` oder alle benutzerdefinierten Tags, die Sie in Ihrem Projekt eingerichtet haben.
* Eine JSON-Antwort mit den erforderlichen Daten zurückgeben. Dieser Inhalt kann dann dynamisch in Nachrichten eingefügt werden.

<Aside type="note" title="So funktioniert es"> 

Der Backend-Dienst fungiert als Datenanbieter und antwortet auf HTTP-Anfragen mit benutzerspezifischen Informationen.

1. Pushwoosh sendet eine Anfrage an Ihr Backend und übergibt benutzerspezifische Kennungen als Abfrageparameter.
2. Ihr Backend verarbeitet die Anfrage und ruft die angeforderten Daten ab.
3. Ihr Backend gibt eine JSON-Antwort zurück.
4. Bevor eine Nachricht gesendet wird, ruft Pushwoosh die JSON-Antwort vom Backend-Dienst ab und verwendet die zurückgegebenen Werte (z. B. den `code`) dynamisch im Nachrichteninhalt.

**Beispielantwort**

```
{ "code": "SPECIALOFFERFORUSER12345" }
```
</Aside>



#### Schritt 2. Erstellen Sie eine Voreinstellung mit Verbundenen Inhalten in Pushwoosh
 
1. Fügen Sie im [Push](/de/product/content/push-presets/)- oder [E-Mail-Inhaltseditor](/de/product/content/email-content/drag-and-drop-email-editor/) die Syntax für Verbundene Inhalte in das Nachrichtenfeld ein.

**Beispiel** 

```
{% connected_content http://your-backend-url.com?userId={{ ${userid} }} :save result %}  
```
**Syntax-Aufschlüsselung**
|  |  |
| ----- | ----- |
| `connected_content` | Ruft JSON-Daten von der angegebenen Backend-URL ab. |
|    `http://your-backend-url.com` | Der Backend-Endpunkt, der die erforderlichen Daten im JSON-Format zurückgibt. |
| `userId={{ ${userid} }}` | Ein dynamischer Abfrageparameter, der die Benutzer-ID an das Backend übergibt. |
| `:save result` | Speichert die abgerufene JSON-Antwort in der Variable result zur Verwendung in Liquid-Vorlagen. |

![Fügen Sie die Syntax für Verbundene Inhalte ein](/connectedcontent.webp)

**Authentifizierung (optional)**

Wenn Ihr Backend-Dienst eine Authentifizierung erfordert, können Sie einen API-Schlüssel oder ein Token in die Anfrage für Verbundene Inhalte aufnehmen, um einen sicheren Zugriff zu gewährleisten.

```
{% connected_content http://your-backend-url.com?userId={{ ${userid} }}&auth=YOUR_API_KEY :save result %}  
```

Sie können Authentifizierungsdaten (oder andere Daten) auch als HTTP-Header mit dem optionalen `:headers`-Parameter senden – einem JSON-Objekt aus Header-Namen und -Werten.

```
{% connected_content http://your-backend-url.com?userId={{ ${userid} }} :headers {"Authorization": "Bearer YOUR_TOKEN", "X-Api-Key": "YOUR_API_KEY"} :save result %}  
```
|  |  |
| ----- | ----- |
| `:headers {...}` | Ein JSON-Objekt von HTTP-Headern, die mit der Anfrage gesendet werden, z.B. `Authorization: Bearer <token>`. |

<Aside type="caution" title="Nur statische Werte">
`${}`-Personalisierungsvariablen funktionieren nur innerhalb der URL. Werte innerhalb von `:headers` sind statisch und werden nicht interpoliert.
</Aside>

**Verwendung von Tags in Verbundenen Inhalten**

Um benutzerdefinierte Tags einzuschließen, fügen Sie sie als Abfrageparameter in die **Verbundene Inhalte**-Anfrage ein (`{{ tag_name }}`).

```
{% connected_content http://your-backend-url.com?userId={{ ${userid} }}{{ Language }} :save result %} 
```

2. Fügen Sie als Nächstes den Nachrichtentext hinzu, der die **abgerufenen Daten** enthält, wie folgt:

```

Hey, {{userid}}, grab your personal promo code - {{result.code}} 
```

![Fügen Sie den Nachrichtentext mit den **abgerufenen Daten** hinzu](/connectedcontent-1.webp)

3. Nachdem Sie den Nachrichteninhalt fertiggestellt und die Voreinstellungseinstellungen konfiguriert haben, speichern Sie sie zur Wiederverwendung in Kampagnen.

<video src="/connectedcontent-2.webm" title="Senden Sie eine Nachricht mit verbundenen Inhalten" autoplay loop muted playsinline />

#### Schritt 3. Senden Sie eine Nachricht mit der konfigurierten Voreinstellung

Senden Sie eine Nachricht mit dieser Voreinstellung über das [einmalige Push-Formular](/de/product/messaging-channels/push-notifications/send-push-notifications/one-time-push/#how-to-send-a-push-notification-using-the-one-time-push-form) oder das [E-Mail-Formular](/de/product/messaging-channels/emails/sending-emails/send-one-time-emails/) oder eine [Customer Journey](/de/product/customer-journey/pushwoosh-journey-overview/).

<Aside type="caution" title="Wichtig">
Wenn der Dienst einen anderen Status als HTTP 200 OK zurückgibt, wird die E-Mail oder Push-Benachrichtigung nicht gesendet. Dies stellt sicher, dass Ihre Kommunikation nur dann versendet wird, wenn die erforderlichen Daten erfolgreich abgerufen wurden.
</Aside>