Sumber Data Eksternal

Setelah sumber data eksternal Anda disiapkan dengan benar, Anda dapat menggunakan keluarannya dalam template email menggunakan bahasa templating liquid.

Menggunakan Sumber Data Eksternal untuk Feed Konten

Untuk menampilkan feed konten, Anda dapat membuat API yang memberikan json dengan banyak item dari feed konten. Sebagai contoh, itu bisa terlihat seperti di bawah ini:

{
  "feed": {
    "version": "1.0",
    "title": "sample-data-feed",
    "items": [
      {
        "title": "Meet the Full Cast",
        "link": "https://bird.com/article",
        "description": "See who's joining previously announced stars Katie Brayben and Christian Borle in the Elton John-Jake Shears-James Graham musical.",
        "thumbnail": "https://assets.bird.com.jpg",
        "date": "2024-08-28T11:21:00",
        "creator": "Joe Black"
      },
      {
        "title": "Stars in ASL American",
        "link": "https://bird.com/article",
        "description": "Center Theatre Group is teaming up with Deaf West Theatre to reopen the Mark Taper Forum with a new production of the Green Day musical after bringing revivals of Big River and Spring Awakening to Broadway.",
        "thumbnail": "https://assets.bird.com.jpg",
        "date": "2024-08-28T11:59:00",
        "creator": "Joe Black"
      }
    ]
  }
}

Feed json di atas dapat digunakan sebagai URL API saat membuat sumber data eksternal.

Setelah dibuat, Anda dapat merujuknya dalam template email sebagai berikut:

1. Pertama tambahkan elemen html dan tambahkan kode di bawah ini untuk mengambil sumber data eksternal berdasarkan nama yaitu {% datafetch "external-data-source-name" %}

2. Gunakan fungsi for dalam liquid untuk mendapatkan semua item dalam feed Anda bersama dengan jalurnya yaitu {% for <your-item> in dataFetchResponse.<your-json-path> %}.

Jika Anda hanya memiliki satu item, ini mungkin tidak diperlukan

Dengan asumsi sample-data-feed adalah nama sumber data eksternal dan feed.items adalah jalur dalam feed json untuk mendapatkan item, itu akan terlihat seperti di bawah ini:

{% datafetch "sample-data-feed" %}
{% for item in dataFetchResponse.feed.items %}

• Setelah ini ditambahkan, Anda kemudian dapat menambahkan elemen gambar, teks, tombol, dan merujuk ke sumber data eksternal seperti di bawah ini dengan asumsi struktur sample-data-feed :

{{item.title}} - Untuk menampilkan judul dalam elemen teks

{{item.description}} - Untuk menampilkan deskripsi dalam elemen teks

{{item.link}} - Untuk menambahkan tautan dalam elemen tombol

{{item.thumbnail}} - Untuk menambahkan URL sumber gambar dalam elemen gambar

• Sekarang tambahkan blok html lain untuk mengakhiri pengambilan sumber data eksternal dan fungsi for seperti yang ditunjukkan di bawah ini

{% endfor %}
{% enddatafetch %}

Untuk melihat pratinjau email Anda, Anda dapat beralih ke pratinjau dan melihat bagaimana tampilan feed konten Anda

Catatan: Jika Anda memiliki feed statis, Anda dapat menyegarkannya di sini secara manual dengan memilih sumber data eksternal di bawah dropdown Segarkan Sumber Data Eksternal.