Templating Email Lanjutan

Email Dinamis dan Personalisasi dengan Bahasa Liquid

Templating Email Lanjutan

Pemrograman Email Templating Lanjutan memungkinkan pembuatan template email yang sangat dikustomisasi. Ini dapat digunakan baik dalam editor seret dan drop maupun langsung pada HTML yang diimpor.

Dokumentasi Bahasa Template Email Bird

Bahasa Template Email Bird adalah alat yang kuat berdasarkan sintaks Liquid Shopify, dengan ekstensi kustom yang dirancang khusus untuk pemasaran email. Bahasa ini memungkinkan Anda untuk membuat template email yang dinamis dan dipersonalisasi dengan efisien, memungkinkan Anda untuk menyampaikan konten yang ditargetkan kepada pelanggan Anda.

Fitur kunci dari Bahasa Template Email Bird meliputi:
Personalisasi yang mudah menggunakan variabel yang telah ditentukan sebelumnya
Menampilkan konten kondisional berdasarkan atribut atau segmen pelanggan
Integrasi dengan katalog produk Anda dan sumber data eksternal
Dukungan untuk internasionalisasi melalui terjemahan
Opsi format lanjutan dengan filter

Panduan ini akan memandu Anda melalui komponen penting dari bahasa ini, memberikan contoh dan praktik terbaik untuk membantu Anda membuat template email yang efektif. Untuk referensi komprehensif tentang sintaks Liquid yang mendasarinya, silakan merujuk ke dokumentasi Liquid Shopify.

Variabel yang telah ditentukan

Variabel yang telah ditentukan memungkinkan Anda untuk dengan mudah mempersonalisasi email Anda dengan informasi penerima dan detail organisasi.

Variabel Kontak

Gunakan ini untuk menyisipkan informasi khusus penerima ke dalam email Anda:

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

Anda juga dapat menggunakan atribut kustom yang telah Anda definisikan untuk kontak Anda.

Variabel Organisasi

Sertakan informasi perusahaan Anda secara konsisten di seluruh email:

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

Variabel Alamat Email

Rujuk alamat email penerima secara langsung:

{{ emailAddress }}

Praktik Terbaik: Selalu miliki cadangan untuk variabel personalisasi jika mereka tidak ditetapkan untuk penerima tertentu.

Filter Tag

Filter memungkinkan Anda untuk memodifikasi keluaran variabel Anda, memastikan bahwa konten diformat dengan benar untuk email Anda.

default: Tetapkan nilai cadangan jika variabel kosong

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

capitalize, upcase, downcase: Ubah kasus teks

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

date: Format tanggal sesuai pola yang ditentukan

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

currencyFormat: Format angka sebagai mata uang

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

Praktik Terbaik: Gunakan filter currencyFormat untuk semua tampilan harga untuk memastikan konsistensi dan pemformatan yang tepat di berbagai wilayah.

Tag Khusus

Tag khusus menyediakan akses cepat ke kebutuhan umum pemasaran email, seperti tautan berhenti berlangganan dan tampilan web.

Tautan Berhenti Berlangganan

Esensial untuk kepatuhan terhadap regulasi email:

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

Tautan Tampilan Web

Berikan opsi untuk melihat email di browser web:

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

Tag Tanggal

Berguna untuk menampilkan tanggal saat ini dalam email Anda:

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

Praktik Terbaik: Selalu sertakan tautan berhenti berlangganan dalam email Anda, biasanya di footer.

Variabel yang telah ditentukan memungkinkan Anda untuk dengan mudah mempersonalisasi email Anda dengan informasi penerima dan detail organisasi.

Variabel Kontak

Gunakan ini untuk menyisipkan informasi khusus penerima ke dalam email Anda:

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

Anda juga dapat menggunakan atribut kustom yang telah Anda definisikan untuk kontak Anda.

Variabel Organisasi

Sertakan informasi perusahaan Anda secara konsisten di seluruh email:

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

Variabel Alamat Email

Rujuk alamat email penerima secara langsung:

{{ emailAddress }}

Praktik Terbaik: Selalu miliki cadangan untuk variabel personalisasi jika mereka tidak ditetapkan untuk penerima tertentu.

Filter Tag

Filter memungkinkan Anda untuk memodifikasi keluaran variabel Anda, memastikan bahwa konten diformat dengan benar untuk email Anda.

default: Tetapkan nilai cadangan jika variabel kosong

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

capitalize, upcase, downcase: Ubah kasus teks

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

date: Format tanggal sesuai pola yang ditentukan

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

currencyFormat: Format angka sebagai mata uang

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

Praktik Terbaik: Gunakan filter currencyFormat untuk semua tampilan harga untuk memastikan konsistensi dan pemformatan yang tepat di berbagai wilayah.

Tag Khusus

Tag khusus menyediakan akses cepat ke kebutuhan umum pemasaran email, seperti tautan berhenti berlangganan dan tampilan web.

Tautan Berhenti Berlangganan

Esensial untuk kepatuhan terhadap regulasi email:

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

Tautan Tampilan Web

Berikan opsi untuk melihat email di browser web:

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

Tag Tanggal

Berguna untuk menampilkan tanggal saat ini dalam email Anda:

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

Praktik Terbaik: Selalu sertakan tautan berhenti berlangganan dalam email Anda, biasanya di footer.

Variabel yang telah ditentukan memungkinkan Anda untuk dengan mudah mempersonalisasi email Anda dengan informasi penerima dan detail organisasi.

Variabel Kontak

Gunakan ini untuk menyisipkan informasi khusus penerima ke dalam email Anda:

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

Anda juga dapat menggunakan atribut kustom yang telah Anda definisikan untuk kontak Anda.

Variabel Organisasi

Sertakan informasi perusahaan Anda secara konsisten di seluruh email:

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

Variabel Alamat Email

Rujuk alamat email penerima secara langsung:

{{ emailAddress }}

Praktik Terbaik: Selalu miliki cadangan untuk variabel personalisasi jika mereka tidak ditetapkan untuk penerima tertentu.

Filter Tag

Filter memungkinkan Anda untuk memodifikasi keluaran variabel Anda, memastikan bahwa konten diformat dengan benar untuk email Anda.

default: Tetapkan nilai cadangan jika variabel kosong

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

capitalize, upcase, downcase: Ubah kasus teks

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

date: Format tanggal sesuai pola yang ditentukan

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

currencyFormat: Format angka sebagai mata uang

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

Praktik Terbaik: Gunakan filter currencyFormat untuk semua tampilan harga untuk memastikan konsistensi dan pemformatan yang tepat di berbagai wilayah.

Tag Khusus

Tag khusus menyediakan akses cepat ke kebutuhan umum pemasaran email, seperti tautan berhenti berlangganan dan tampilan web.

Tautan Berhenti Berlangganan

Esensial untuk kepatuhan terhadap regulasi email:

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

Tautan Tampilan Web

Berikan opsi untuk melihat email di browser web:

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

Tag Tanggal

Berguna untuk menampilkan tanggal saat ini dalam email Anda:

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

Praktik Terbaik: Selalu sertakan tautan berhenti berlangganan dalam email Anda, biasanya di footer.

Logika Kondisional dan Perulangan

Logika kondisional dan loop memungkinkan Anda untuk membuat konten dinamis yang menyesuaikan dengan atribut atau preferensi masing-masing penerima.

Pernyataan If

Gunakan pernyataan if untuk menampilkan konten berbeda berdasarkan atribut penerima:

{% 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 %}

Memeriksa Keanggotaan Segmen

Targetkan konten kepada segmen spesifik dari audiens Anda:

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

Loop

Iterasi melalui array data untuk membuat daftar dinamis:

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

Praktik Terbaik: Gunakan logika kondisional untuk menyesuaikan pesan Anda untuk berbagai segmen audiens, meningkatkan relevansi dan keterlibatan.

Bekerja dengan Produk

Integrasikan katalog produk Anda langsung ke dalam template email Anda untuk tampilan produk yang dinamis.

Pencarian Produk Tunggal

Tampilkan detail produk tertentu:

{% 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>
{

Umpan Produk

Tampilkan beberapa produk dari umpan:

<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>

Praktik Terbaik: Gunakan umpan produk untuk membuat konten dinamis seperti bagian "Produk yang Direkomendasikan" atau "Kedatangan Baru" dalam email Anda.

Acara

Manfaatkan data acara untuk membuat email yang sangat relevan dan tepat waktu berdasarkan tindakan pelanggan. Ini umumnya relevan untuk email yang dikirim melalui perjalanan dengan pemicu acara.

{% 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>
{

Praktik Terbaik: Gunakan data acara untuk memicu email yang tepat waktu dan relevan seperti pengingat keranjang yang ditinggalkan atau konfirmasi pembelian.

Kode Diskon

Hasilkan dan tampilkan kode diskon unik di email Anda untuk memberikan insentif pembelian.

<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>

Praktik Terbaik: Gunakan kode diskon unik untuk melacak kinerja berbagai kampanye email atau segmen.

Terjemahan

Buat template email multibahasa menggunakan fitur terjemahan.

Pertama, siapkan file terjemahan Anda (dalam format JSON) untuk setiap bahasa yang Anda dukung. Misalnya:

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

Kemudian gunakan filter t dalam template Anda:

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

Praktik Terbaik: Gunakan terjemahan untuk membuat satu template yang dapat digunakan untuk beberapa bahasa, mengurangi beban pemeliharaan.

Sumber Data Eksternal

Integrasikan data waktu nyata dari sumber eksternal ke dalam email Anda. Anda dapat mempelajari lebih lanjut tentang sumber data eksternal di sini.

Penggunaan Dasar:

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

Penggunaan URL Dinamis

Untuk API yang memerlukan parameter dinamis:

{% 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>
{

Praktik Terbaik: Gunakan sumber data eksternal untuk menyertakan informasi terkini yang dipersonalisasi dalam email Anda, seperti saldo akun, poin loyalitas, atau rekomendasi yang dipersonalisasi.

Sintaks Cair Lanjutan

Sementara Bahasa Template Email Bird menyediakan fitur-fitur kuat yang spesifik untuk pemasaran email, ia dibangun di atas Liquid, yang menawarkan fitur-fitur canggih tambahan. Berikut adalah beberapa contohnya:

Penanganan Array dan Objek

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

Operasi Matematis

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

Manipulasi String

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

Alur Kontrol

{% 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 %}

Untuk panduan komprehensif mengenai fitur-fitur Liquid canggih ini, silakan merujuk ke dokumentasi Shopify Liquid.

Praktik Terbaik: Meskipun fitur-fitur canggih ini kuat, gunakanlah dengan bijak. Template yang terlalu kompleks dapat sulit untuk dipelihara dan mungkin berdampak pada kinerja rendering email.

Ingatlah untuk menguji template email Anda secara menyeluruh di berbagai klien email untuk memastikan rendering yang konsisten dan kinerja yang optimal. Platform Bird menyediakan alat untuk melihat pratinjau dan menguji template Anda sebelum mengirim.

Dengan menguasai Bahasa Template Email Bird, Anda akan dapat membuat kampanye email yang sangat dinamis, dipersonalisasi, dan menarik yang beresonansi dengan audiens Anda dan mendorong hasil.

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

Platform AI-native lengkap yang dapat berkembang seiring dengan bisnis Anda.

Hubungi penjualan

Mulai gratis

Hubungi Dukungan

Platform AI-native lengkap yang dapat berkembang seiring dengan bisnis Anda.

Hubungi penjualan

Mulai gratis

Hubungi Dukungan

Platform AI-native lengkap yang dapat berkembang seiring dengan bisnis Anda.

Hubungi penjualan

Mulai gratis

Hubungi Dukungan

Templating Email Lanjutan