Zaawansowane szablony e-mail

Dynamiczne i spersonalizowane e-maile z językiem Liquid

Zaawansowane szablony e-mail

Zaawansowane szablonowanie e-maili pozwala na wysoko spersonalizowane szablony e-maili. Może być używane zarówno w edytorze typu drag-and-drop, jak i bezpośrednio na zaimportowanym HTML.

Dokumentacja języka szablonów e-maili Bird

Język szablonów e-maili Bird jest potężnym narzędziem opartym na składni Liquid Shopify, z niestandardowymi rozszerzeniami zaprojektowanymi specjalnie dla marketingu e-mailowego. Ten język pozwala na efektywne tworzenie dynamicznych, spersonalizowanych szablonów e-maili, umożliwiając dostarczanie ukierunkowanej treści do Twoich subskrybentów.

Kluczowe cechy języka szablonów e-maili Bird obejmują:
Łatwe personalizowanie przy użyciu zdefiniowanych zmiennych
Wyświetlanie treści warunkowej w oparciu o atrybuty subskrybentów lub segmenty
Integracja z katalogiem produktów i zewnętrznymi źródłami danych
Wsparcie dla internacjonalizacji poprzez tłumaczenia
Zaawansowane opcje formatowania z filtrami

Ten przewodnik przeprowadzi Cię przez podstawowe elementy języka, dostarczając przykłady i najlepsze praktyki, aby pomóc Ci w tworzeniu skutecznych szablonów e-maili. W celu uzyskania kompleksowego odniesienia do podstawowej składni Liquid, zapraszamy do zapoznania się z dokumentacją Shopify Liquid.

Z góry zdefiniowane zmienne

Zdefiniowane zmienne pozwalają łatwo personalizować swoje e-maile za pomocą informacji o odbiorcy i szczegółów organizacji.

Zmienne Kontaktowe

Użyj tych zmiennych, aby wstawić dane specyficzne dla odbiorcy do swoich e-maili:

{{ contact.attributes.firstName }}
{{ contact.attributes.lastName }}
{{ contact.attributes.email }}

Możesz również użyć dowolnych niestandardowych atrybutów, które zdefiniowałeś dla swoich kontaktów.

Zmienne Organizacyjne

Włącz informacje o swojej firmie konsekwentnie we wszystkich e-mailach:

{{ organization.name }}
{{ organization.fullAddress }}
{{ organization.websiteUrl }}
{{ organization.street }}
{{ organization.city }}
{{ organization.state }}
{{ organization.country }}
{{ organization.zipCode }}

Zmienne Adresu E-mail

Odwołaj się bezpośrednio do adresu e-mail odbiorcy:

{{ emailAddress }}

Najlepsza praktyka: Zawsze miej zapasową wersję zmiennych personalizacji na wypadek, gdyby nie były ustawione dla konkretnego odbiorcy.

Filtry Tagów

Filtry pozwalają na modyfikację wyników twoich zmiennych, zapewniając, że treść jest poprawnie sformatowana dla twoich e-maili.

default: Ustaw wartość zapasową, jeśli zmienna jest pusta

{{ contact.attributes.firstName | default: 'Valued Customer' }}

capitalize, upcase, downcase: Zmień wielkość liter

{{ contact.attributes.firstName | capitalize }}
{{ product.brand | upcase }}
{{ 'IMPORTANT NOTICE' | downcase }}

date: Formatuj daty zgodnie z określonymi wzorcami

{{ contact.attributes.birthday | date: '%B %d, %Y' }}
{{ 'now' | date: '%Y-%m-%d %H:%M' }}

currencyFormat: Formatuj liczby jako walutę

{{ product.price | currencyFormat: 'USD' }}

Najlepsza praktyka: Użyj filtru currencyFormat dla wszystkich wyświetleń cen, aby zapewnić spójność i poprawne formatowanie w różnych regionach.

Szczególne Tagi

Szczególne tagi zapewniają szybki dostęp do powszechnych wymagań marketingu e-mailowego, takich jak linki rezygnacji i widoki w sieci.

Linki Rezygnacji

Nieodzowne dla zgodności z przepisami dotyczącymi e-maili:

{% unsubscribe %}  <!-- Outputs: <a href="...">Unsubscribe</a> -->
{% unsubscribe 'Click here to unsubscribe' %}  <!-- Custom text -->
<a href="{% unsubscribeLink %}">Manage your preferences</a>  <

Linki Widoku w Sieci

Zapewnij możliwość przeglądania e-maila w przeglądarce internetowej:

{% webView %}  <!-- Outputs: <a href="...">View in browser</a> -->
{% webView 'View this email online' %}  <!-- Custom text -->
<a href="{% webViewLink %}">Trouble viewing? Click here</a>  <

Tagi Daty

Przydatne do wyświetlania aktualnych dat w twoich e-mailach:

Today's Date: {% currentYear %}-{% currentMonthName %}-{% currentDay %}
Sent on: {% currentWeekday %}

Najlepsza praktyka: Zawsze dołączaj link do rezygnacji w swoich e-mailach, zazwyczaj w stopce.

Zdefiniowane zmienne pozwalają łatwo personalizować swoje e-maile za pomocą informacji o odbiorcy i szczegółów organizacji.

Zmienne Kontaktowe

Użyj tych zmiennych, aby wstawić dane specyficzne dla odbiorcy do swoich e-maili:

{{ contact.attributes.firstName }}
{{ contact.attributes.lastName }}
{{ contact.attributes.email }}

Możesz również użyć dowolnych niestandardowych atrybutów, które zdefiniowałeś dla swoich kontaktów.

Zmienne Organizacyjne

Włącz informacje o swojej firmie konsekwentnie we wszystkich e-mailach:

{{ organization.name }}
{{ organization.fullAddress }}
{{ organization.websiteUrl }}
{{ organization.street }}
{{ organization.city }}
{{ organization.state }}
{{ organization.country }}
{{ organization.zipCode }}

Zmienne Adresu E-mail

Odwołaj się bezpośrednio do adresu e-mail odbiorcy:

{{ emailAddress }}

Najlepsza praktyka: Zawsze miej zapasową wersję zmiennych personalizacji na wypadek, gdyby nie były ustawione dla konkretnego odbiorcy.

Filtry Tagów

Filtry pozwalają na modyfikację wyników twoich zmiennych, zapewniając, że treść jest poprawnie sformatowana dla twoich e-maili.

default: Ustaw wartość zapasową, jeśli zmienna jest pusta

{{ contact.attributes.firstName | default: 'Valued Customer' }}

capitalize, upcase, downcase: Zmień wielkość liter

{{ contact.attributes.firstName | capitalize }}
{{ product.brand | upcase }}
{{ 'IMPORTANT NOTICE' | downcase }}

date: Formatuj daty zgodnie z określonymi wzorcami

{{ contact.attributes.birthday | date: '%B %d, %Y' }}
{{ 'now' | date: '%Y-%m-%d %H:%M' }}

currencyFormat: Formatuj liczby jako walutę

{{ product.price | currencyFormat: 'USD' }}

Najlepsza praktyka: Użyj filtru currencyFormat dla wszystkich wyświetleń cen, aby zapewnić spójność i poprawne formatowanie w różnych regionach.

Szczególne Tagi

Szczególne tagi zapewniają szybki dostęp do powszechnych wymagań marketingu e-mailowego, takich jak linki rezygnacji i widoki w sieci.

Linki Rezygnacji

Nieodzowne dla zgodności z przepisami dotyczącymi e-maili:

{% unsubscribe %}  <!-- Outputs: <a href="...">Unsubscribe</a> -->
{% unsubscribe 'Click here to unsubscribe' %}  <!-- Custom text -->
<a href="{% unsubscribeLink %}">Manage your preferences</a>  <

Linki Widoku w Sieci

Zapewnij możliwość przeglądania e-maila w przeglądarce internetowej:

{% webView %}  <!-- Outputs: <a href="...">View in browser</a> -->
{% webView 'View this email online' %}  <!-- Custom text -->
<a href="{% webViewLink %}">Trouble viewing? Click here</a>  <

Tagi Daty

Przydatne do wyświetlania aktualnych dat w twoich e-mailach:

Today's Date: {% currentYear %}-{% currentMonthName %}-{% currentDay %}
Sent on: {% currentWeekday %}

Najlepsza praktyka: Zawsze dołączaj link do rezygnacji w swoich e-mailach, zazwyczaj w stopce.

Zdefiniowane zmienne pozwalają łatwo personalizować swoje e-maile za pomocą informacji o odbiorcy i szczegółów organizacji.

Zmienne Kontaktowe

Użyj tych zmiennych, aby wstawić dane specyficzne dla odbiorcy do swoich e-maili:

{{ contact.attributes.firstName }}
{{ contact.attributes.lastName }}
{{ contact.attributes.email }}

Możesz również użyć dowolnych niestandardowych atrybutów, które zdefiniowałeś dla swoich kontaktów.

Zmienne Organizacyjne

Włącz informacje o swojej firmie konsekwentnie we wszystkich e-mailach:

{{ organization.name }}
{{ organization.fullAddress }}
{{ organization.websiteUrl }}
{{ organization.street }}
{{ organization.city }}
{{ organization.state }}
{{ organization.country }}
{{ organization.zipCode }}

Zmienne Adresu E-mail

Odwołaj się bezpośrednio do adresu e-mail odbiorcy:

{{ emailAddress }}

Najlepsza praktyka: Zawsze miej zapasową wersję zmiennych personalizacji na wypadek, gdyby nie były ustawione dla konkretnego odbiorcy.

Filtry Tagów

Filtry pozwalają na modyfikację wyników twoich zmiennych, zapewniając, że treść jest poprawnie sformatowana dla twoich e-maili.

default: Ustaw wartość zapasową, jeśli zmienna jest pusta

{{ contact.attributes.firstName | default: 'Valued Customer' }}

capitalize, upcase, downcase: Zmień wielkość liter

{{ contact.attributes.firstName | capitalize }}
{{ product.brand | upcase }}
{{ 'IMPORTANT NOTICE' | downcase }}

date: Formatuj daty zgodnie z określonymi wzorcami

{{ contact.attributes.birthday | date: '%B %d, %Y' }}
{{ 'now' | date: '%Y-%m-%d %H:%M' }}

currencyFormat: Formatuj liczby jako walutę

{{ product.price | currencyFormat: 'USD' }}

Najlepsza praktyka: Użyj filtru currencyFormat dla wszystkich wyświetleń cen, aby zapewnić spójność i poprawne formatowanie w różnych regionach.

Szczególne Tagi

Szczególne tagi zapewniają szybki dostęp do powszechnych wymagań marketingu e-mailowego, takich jak linki rezygnacji i widoki w sieci.

Linki Rezygnacji

Nieodzowne dla zgodności z przepisami dotyczącymi e-maili:

{% unsubscribe %}  <!-- Outputs: <a href="...">Unsubscribe</a> -->
{% unsubscribe 'Click here to unsubscribe' %}  <!-- Custom text -->
<a href="{% unsubscribeLink %}">Manage your preferences</a>  <

Linki Widoku w Sieci

Zapewnij możliwość przeglądania e-maila w przeglądarce internetowej:

{% webView %}  <!-- Outputs: <a href="...">View in browser</a> -->
{% webView 'View this email online' %}  <!-- Custom text -->
<a href="{% webViewLink %}">Trouble viewing? Click here</a>  <

Tagi Daty

Przydatne do wyświetlania aktualnych dat w twoich e-mailach:

Today's Date: {% currentYear %}-{% currentMonthName %}-{% currentDay %}
Sent on: {% currentWeekday %}

Najlepsza praktyka: Zawsze dołączaj link do rezygnacji w swoich e-mailach, zazwyczaj w stopce.

Logika warunkowa i pętle

Logika warunkowa i pętle pozwalają na tworzenie dynamicznej treści, która dostosowuje się do atrybutów lub preferencji każdego odbiorcy.

Instrukcje if

Użyj instrukcji if, aby pokazać różną treść w zależności od atrybutów odbiorcy:

{% if contact.attributes.membership == "gold" %}
  <h2>Exclusive Gold Member Offer</h2>
  <p>Enjoy 20% off your next purchase!</p>
{% elsif contact.attributes.membership == "silver" %}
  <h2>Special Silver Member Discount</h2>
  <p>Get 15% off select items!</p>
{% else %}
  <h2>Limited Time Offer</h2>
  <p>Save 10% on your next order!</p>
{% endif %}

Sprawdzanie przynależności segmentu

Skieruj treść do konkretnych segmentów swojej publiczności:

{% if contact.segments contains "abcd-1234-efgh-5678" }
  This contact is a member of the segment with ID "abcd-1234-efgh-5678".
{% endif %}

Pętle

Iteruj po tablicach danych, aby tworzyć dynamiczne listy:

<h3>Your Favorite Colors:</h3>
<ul>
{% for color in contact.attributes.favoriteColors %}
  <li style="color: {{ color }};">{{ color }}</li>
{% endfor %}
<

Najlepsza praktyka: Używaj logiki warunkowej, aby dostosować swoją wiadomość do różnych segmentów odbiorców, zwiększając trafność i zaangażowanie.

Praca z produktami

Integruj swój katalog produktów bezpośrednio w swoich szablonach e-mailowych, aby uzyskać dynamiczne wyświetlanie produktów.

Wyszukiwanie pojedynczego produktu

Wyświetl szczegóły konkretnego produktu:

{% catalog 'PRODUCT-ID-123' %}
  <div class="product">
    <h2>{{ catalogItem.title }}</h2>
    <img src="{{ catalogItem.imageUrl }}" alt="{{ catalogItem.title }}">
    <p>Price: {{ catalogItem.price | currencyFormat: catalogItem.currency }}</p>
    {% if catalogItem.originalPrice > catalogItem.price %}
      <p>Original Price: <strike>{{ catalogItem.originalPrice | currencyFormat: catalogItem.currency }}</strike></p>
    {% endif %}
    <a href="{{ catalogItem.url }}">Shop Now</a>
  </div>
{

Źródło produktów

Wyświetl wiele produktów z feedu:

<h2>Recommended for You</h2>
<div class="product-grid">
  {% productfeed 'FEED-ID-456' %}
    {% for item in catalogItems limit:3 %}
      <div class="product">
        <h3>{{ item.title }}</h3>
        <img src="{{ item.imageUrl }}" alt="{{ item.title }}">
        <p>{{ item.price | currencyFormat: item.currency }}</p>
        <a href="{{ item.url }}">View Product</a>
      </div>
    {% endfor %}
  {% endproductfeed %}
</div>

Najlepsza praktyka: Używaj źródeł produktów do tworzenia dynamicznych treści, takich jak sekcje "Zalecane produkty" lub "Nowe przybycia" w swoich e-mailach.

Wydarzenia

Wykorzystaj dane o zdarzeniach, aby tworzyć wysoko trafne, na czas wysyłane e-maile w oparciu o działania subskrybentów. Jest to zwykle istotne w przypadku e-maili wysyłanych w ramach podróży z wyzwalaczami zdarzeń.

{% if event.type == "abandoned_cart" %}
  <h2>Did you forget something?</h2>
  <p>We noticed you left some items in your cart:</p>
  <ul>
  {% for item in event.properties.items %}
    <li>{{ item.product_name }} - {{ item.price | currencyFormat: event.properties.currency }}</li>
  {% endfor %}
  </ul>
  <a href="{{ event.properties.checkout_url }}">Complete your purchase</a>
{% elsif event.type == "purchase_confirmation" %}
  <h2>Thank you for your purchase!</h2>
  <p>Order Total: {{ event.properties.total_price | currencyFormat: event.properties.currency }}</p>
  <p>Order ID: {{ event.properties.order_id }}</p>
{

Najlepsza praktyka: Używaj danych o zdarzeniach, aby wyzwalać na czas wysyłane, istotne e-maile, takie jak przypomnienia o porzuconych koszykach lub potwierdzenia zakupów.

Kody rabatowe

Generuj i wyświetlaj unikalne kody rabatowe w swoich e-mailach, aby zachęcić do zakupów.

<h2>Your Exclusive Offer</h2>
<p>Use this code for 15% off your next purchase:</p>
<div class="discount-code">{% discountCode "SUMMER_SALE_POOL" %}</div>

Najlepsza praktyka: Używaj unikalnych kodów rabatowych, aby śledzić wydajność różnych kampanii e-mailowych lub segmentów.

Tłumaczenia

Twórz wielojęzyczne szablony e-mailowe, korzystając z funkcji tłumaczenia.

Najpierw skonfiguruj swoje pliki tłumaczeń (w formacie JSON) dla każdego języka, który obsługujesz. Na przykład:

{
  "welcome_message": "Welcome to our store!",
  "sale_announcement": "Don't miss our big sale, {{name}}!",
  "product_of_the_day": "Product of the day: {{product}}"
}

Następnie użyj filtru t w swoich szablonach:

<h1>{{ "welcome_message" | t }}</h1>
<p>{{ "sale_announcement" | t: "name", contact.attributes.firstName }}</p>
<h2>{{ "product_of_the_day" | t: "product", featuredProduct.title }}</h2>

Najlepsza praktyka: Wykorzystuj tłumaczenia do stworzenia jednego szablonu, który może być używany w wielu językach, zmniejszając koszty utrzymania.

Zewnętrzne źródła danych

Zintegruj dane w czasie rzeczywistym z zewnętrznych źródeł do swoich e-maili. Możesz dowiedzieć się więcej o zewnętrznych źródłach danych tutaj.

Podstawowe użycie:

{% datafetch "weather-api" %}
  <p>Current temperature in your area: {{ dataFetchResponse.temperature }}°C</p>
  <p>Weather condition: {{ dataFetchResponse.condition }}</p>
{

Używanie dynamicznych adresów URL

Dla interfejsów API, które wymagają dynamicznych parametrów:

{% datafetch "user-recommendations", "userId", contact.attributes.userId %}
  <h2>Recommended for You</h2>
  <ul>
  {% for product in dataFetchResponse.recommendations %}
    <li>{{ product.name }} - {{ product.price | currencyFormat: 'USD' }}</li>
  {% endfor %}
  </ul>
{

Najlepsza praktyka: Używaj zewnętrznych źródeł danych, aby włączyć aktualne, spersonalizowane informacje do swoich e-maili, takie jak salda kont, punkty lojalnościowe lub spersonalizowane rekomendacje.

Zaawansowana składnia płynna

Chociaż język szablonów e-mail Bird oferuje potężne funkcje specyficzne dla marketingu e-mailowego, jest zbudowany na bazie Liquid, który oferuje dodatkowe zaawansowane funkcje. Oto kilka przykładów:

Obsługa tablic i obiektów

{% assign sorted_products = products | sort: 'price' %}
{% assign expensive_products = sorted_products | where: "price", ">", 100 %}

Operacje matematyczne

{% assign total = product.price | times: item.quantity %}
{% assign discount = total | divided_by: 4 %}

Manipulacja ciągami

{% assign lowercase_name = contact.attributes.firstName | downcase %}
{% assign greeting = "Hello, " | append: lowercase_name | capitalize %}

Kontrola przepływu

{% case shipping_method %}
  {% when 'ground' %}
    Estimated delivery: 5-7 business days
  {% when 'express' %}
    Estimated delivery: 2-3 business days
  {% else %}
    Please contact us for shipping information
{% endcase %}

Aby uzyskać szczegółowy przewodnik po tych zaawansowanych funkcjach Liquid, odsyłam do dokumentacji Shopify Liquid.

Najlepsza praktyka: Chociaż te zaawansowane funkcje są potężne, używaj ich rozsądnie. Zbyt złożone szablony mogą być trudne do utrzymania i mogą wpływać na wydajność renderowania e-maili.

Pamiętaj, aby dokładnie testować swoje szablony e-mailowe w różnych klientach pocztowych, aby zapewnić spójne renderowanie i optymalną wydajność. Platforma Bird oferuje narzędzia do podglądu i testowania swoich szablonów przed wysłaniem.

Dzięki opanowaniu języka szablonów e-mail Bird będziesz w stanie tworzyć wysoce dynamiczne, spersonalizowane i angażujące kampanie e-mailowe, które będą docierać do Twojej publiczności i przynosić rezultaty.

A person is standing at a desk while typing on a laptop.

Kompletna platforma oparta na sztucznej inteligencji, która rośnie wraz z Twoim biznesem.

Skontaktuj się z działem sprzedaży

Zacznij za darmo

Skontaktuj się z pomocą techniczną

Kompletna platforma oparta na sztucznej inteligencji, która rośnie wraz z Twoim biznesem.

Skontaktuj się z działem sprzedaży

Zacznij za darmo

Skontaktuj się z pomocą techniczną

Kompletna platforma oparta na sztucznej inteligencji, która rośnie wraz z Twoim biznesem.

Skontaktuj się z działem sprzedaży

Zacznij za darmo

Skontaktuj się z pomocą techniczną

Zaawansowane szablony e-mail