Halaman ini diterjemahkan oleh Cloud Translation API.

Menganotasi email di tab Promosi

Anotasi email menghidupkan pesan email di tab Promosi dengan fitur seperti gambar, penawaran, dan tanggal habis masa berlaku.

Saat Anda memberi anotasi pada email, pengguna Gmail dapat melihat dan berinteraksi dengan promosi Anda langsung dari kotak masuk mereka. Dari tab Promosi, pengguna dapat mengklik teks atau gambar yang diberi anotasi untuk mempelajari promosi lebih lanjut, tanpa harus membuka email.

Halaman ini menjelaskan cara memberi anotasi pada email menggunakan JSON-LD dan Microdata. Untuk mempelajari lebih lanjut markup email, tinjau panduan Memulai. Untuk mengetahui daftar kolom markup yang dapat Anda gunakan dalam anotasi email, buka dokumentasi referensi.

Membuat anotasi email

Anda dapat memberi anotasi pada email untuk menampilkan fitur berikut di tab Promosi:

Membuat carousel produk
Membuat pratinjau satu gambar
Membuat Anotasi Promo
Membuat Kartu Penawaran

Bagian berikut menjelaskan cara membuat setiap jenis anotasi email.

Membuat korsel produk

Carousel produk menampilkan beberapa pratinjau gambar untuk promosi, seperti berikut:

Email promosi yang menampilkan carousel tiga pratinjau gambar penawaran kaus kaki.

Anda dapat menyertakan hingga 10 pratinjau gambar dalam carousel, dan setiap gambar harus unik.

Untuk membuat carousel produk:

Di platform email pemasaran Anda, buat email dan buka editor HTML email.

Di bagian head, tambahkan tag script. Untuk setiap gambar di carousel produk, tambahkan objek PromotionCard:

JSON-LD

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <script type="application/ld+json">
      [
        // Build the first image preview in your product carousel:
        {
          "@context": "http://schema.org/",
          "@type": "PromotionCard",
          "image": "IMAGE_URL1",
          "url": "PROMO_URL1",

          // Optionally, include the following PromotionCard properties:
          "headline": "HEADLINE1",
          "price": PRICE1,
          "priceCurrency": "PRICE_CURRENCY1",
          "discountValue": DISCOUNT_VALUE1,
          "position": POSITION
        },

        // Build the second image preview in your product carousel:
        {
          "@context": "http://schema.org/",
          "@type": "PromotionCard",
          "image": "IMAGE_URL2",
          "url": "PROMO_URL2",

          // Optionally, include the following PromotionCard properties:
          "headline": "HEADLINE2",
          "price": PRICE2,
          "priceCurrency": "PRICE_CURRENCY2",
          "discountValue": DISCOUNT_VALUE2,
          "position": POSITION
        }

        // To include more image previews, add additional PromotionCard objects.
        // You can include up to 10 image previews in a product carousel.

      ]
    </script>
  </head>

  <body>
    // The message of your email
  </body>
</html>

Microdata

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    // Build the first image preview in your product carousel:
    <div itemscope itemtype="http://schema.org/PromotionCard">
      <meta itemprop="image" content="IMAGE_URL1"/>
      <meta itemprop="url" content="PROMO_URL1"/>

      // Optionally, include the following PromotionCard properties:
      <meta itemprop="headline" content="HEADLINE1"/>
      <meta itemprop="price" content="PRICE1"/>
      <meta itemprop="priceCurrency" content="PRICE_CURRENCY1"/>
      <meta itemprop="discountValue" content="DISCOUNT_VALUE1"/>
      <meta itemprop="position" content="POSITION"/>
    </div>

    // Build the second image preview in your product carousel:
    <div itemscope itemtype="http://schema.org/PromotionCard">
      <meta itemprop="image" content="IMAGE_URL2"/>
      <meta itemprop="url" content="PROMO_URL2"/>

      // Optionally, include the following PromotionCard properties:
      <meta itemprop="headline" content="HEADLINE2"/>
      <meta itemprop="price" content="PRICE2"/>
      <meta itemprop="priceCurrency" content="PRICE_CURRENCY2"/>
      <meta itemprop="discountValue" content="DISCOUNT_VALUE2"/>
      <meta itemprop="position" content="POSITION"/>
    </div>

    // To include more image previews, add additional PromotionCard objects.
    // You can include up to 10 image previews in a product carousel.
  </head>

  <body>
    // The message of your email
  </body>
</html>

Untuk setiap objek PromotionCard, ganti nilai berikut. Untuk properti opsional, Anda dapat menyertakan nilai, atau menghapus properti dari kode.

IMAGE_URL: URL gambar Anda dalam format PNG atau JPEG, seperti https://www.example.com/image.png. Rasio aspek yang didukung adalah 4:5, 1:1, 1,91:1. Untuk carousel produk, setiap gambar harus memiliki URL unik dan menggunakan rasio aspek yang sama.
PROMO_URL: URL untuk promosi. Saat pengguna mengklik gambar dari tab Promosi, mereka akan membuka URL ini.
HEADLINE (Opsional): Deskripsi promosi 1 hingga 2 baris yang ditampilkan di bawah gambar pratinjau.
PRICE (Opsional): Harga promosi.
PRICE_CURRENCY (Opsional): Mata uang harga dalam format ISO 4217 3 huruf, seperti USD. Menentukan simbol mata uang yang ditampilkan dengan price.
DISCOUNT_VALUE (Opsional): Jumlah yang dikurangi dari price untuk menampilkan harga yang disesuaikan. Harga yang disesuaikan ditampilkan di samping harga asli.

Misalnya, jika discountValue adalah 25, price adalah 100, dan priceCurrency adalah USD, harga yang disesuaikan akan ditampilkan sebagai $75.
POSITION (Opsional): Posisi kartu dalam carousel.

Dalam tag body, tulis pesan untuk email Anda.

Membuat pratinjau gambar tunggal

Anotasi pratinjau gambar tunggal menampilkan satu gambar untuk memamerkan produk penting di Tab Promo Gmail, seperti berikut:

Email promosi yang menampilkan gambar sepatu, badge promo 20%, dan kode promo 20TODAY

Anda dapat menggunakan fitur ini untuk satu gambar. Semua penerima harus menerima gambar dan URL gambar yang sama. Lihat dokumentasi pertanyaan umum (FAQ) kami untuk mengetahui informasi selengkapnya.

Untuk membuat pratinjau gambar tunggal:

Di platform email pemasaran, buat email dan buka editor HTML email.

Di bagian head, tambahkan tag script yang menyertakan jenis data PromotionCard:

JSON-LD

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <script type="application/ld+json">
      [{
        "@context": "http://schema.org/",
        "@type": "PromotionCard",
        "image": "IMAGE_URL",
        "url": "PROMO_URL",

        // Optionally, include the following PromotionCard properties:
        "headline": "HEADLINE",
        "price": PRICE,
        "priceCurrency": "PRICE_CURRENCY",
        "discountValue": DISCOUNT_VALUE
      }]
    </script>
  </head>

  <body>
    // The message of your email
  </body>
</html>

Microdata

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    // Build the first image preview in your product carousel:
    <div itemscope itemtype="http://schema.org/PromotionCard">
      <meta itemprop="image" content="IMAGE_URL"/>
      <meta itemprop="url" content="PROMO_URL"/>

      // Optionally, include the following PromotionCard properties:
      <meta itemprop="headline" content="HEADLINE"/>
      <meta itemprop="price" content="PRICE"/>
      <meta itemprop="priceCurrency" content="PRICE_CURRENCY"/>
      <meta itemprop="discountValue" content="DISCOUNT_VALUE"/>
    </div>

  </head>

  <body>
    // The message of your email
  </body>
</html>

Ganti nilai berikut. Untuk properti opsional, Anda dapat menyertakan nilai, atau menghapus properti dari kode Anda.

IMAGE_URL: URL untuk gambar pratinjau dalam format PNG atau JPEG, seperti https://www.example.com/image.png. Rasio aspek yang didukung adalah 1,91:1.
PROMO_URL: Saat pengguna mengklik image, URL yang mengarahkan ke promosi.
HEADLINE (Opsional): Deskripsi promosi 1 hingga 2 baris yang ditampilkan di bawah gambar pratinjau.
PRICE (Opsional): Harga promosi.
PRICE_CURRENCY (Opsional): Mata uang harga dalam format ISO 4217 3 huruf, seperti USD. Menentukan simbol mata uang yang ditampilkan dengan price.
DISCOUNT_VALUE (Opsional): Jumlah yang dikurangi dari price untuk menampilkan harga yang disesuaikan. Harga yang disesuaikan ditampilkan di samping harga asli.

Misalnya, jika discountValue adalah 25, price adalah 100, dan priceCurrency adalah USD, harga yang disesuaikan akan ditampilkan sebagai $75.

Dalam tag body, tulis pesan untuk email Anda.

Membuat anotasi promo

Buat email Anda lebih menarik dengan Anotasi Penawaran. Fitur ini menambahkan badge promosi langsung ke email Anda di kotak masuk, yang menunjukkan informasi penting—seperti kode diskon atau detail penawaran—tepat di samping baris subjek Anda.

Email promosi yang menampilkan pratinjau badge promo untuk diskon 20% dan kode promo 20TODAY.

Untuk mengaktifkan Anotasi Promo, ikuti langkah-langkah berikut:

Tambahkan skema ke HTML email Anda: Di platform email pemasaran Anda, buka editor HTML untuk kampanye Anda. Di bagian head, tambahkan tag script yang menyertakan jenis data DiscountOffer dengan struktur berikut:

JSON-LD

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <script type="application/ld+json">
      [{
        "@context": "http://schema.org/",
        "@type": "DiscountOffer",
        "description": "DESCRIPTION",
        "discountCode": "DISCOUNT_CODE",
        "availabilityStarts": "START_DATE_TIME",
        "availabilityEnds": "END_DATE_TIME"
      }]
    </script>
  </head>

  <body>
    // The message of your email
  </body>
</html>

Microdata

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <div itemscope itemtype="http://schema.org/DiscountOffer">
      <meta itemprop="description" content="DESCRIPTION"/>
      <meta itemprop="discountCode" content="DISCOUNT_CODE"/>
      <meta itemprop="availabilityStarts" content="START_DATE_TIME"/>
      <meta itemprop="availabilityEnds" content="END_DATE_TIME"/>
    </div>
  </head>

  <body>
    // The message of your email.
  </body>
</html>

Sesuaikan properti Anotasi Penawaran: perbarui nilai dalam skrip agar sesuai dengan promosi spesifik Anda.

Properti wajib: Anda harus menyertakan setidaknya satu properti berikut untuk membuat Anotasi Penawaran.
- DESCRIPTION: Ringkasan singkat dan menarik tentang penawaran Anda.
  - Contoh: "Diskon 20% di seluruh situs" atau "Beli satu, gratis satu".
- DISCOUNT_CODE: Kode promo yang perlu diterapkan pengguna saat checkout.
  - Contoh: 20TODAY.
- END_DATE_TIME: Tanggal dan waktu berakhirnya promosi dalam format ISO 8601.
  - Contoh: 2025-09-23T18:44:37-07:00.
Properti yang sangat direkomendasikan:
- START_DATE_TIME: Tanggal dan waktu mulai promosi dalam format ISO 8601.
  - Contoh: 2025-08-24T18:44:37-07:00.
Tulis pesan email Anda: dalam tag <body>, tulis pesan dan rancang tata letak email Anda seperti biasa.
Validasi dan lihat pratinjau kartu Anda: sebelum mengirim kampanye, validasi kode Anda dan lihat pratinjau tampilan Anotasi Penawaran Anda.

Membuat kartu promo

Kartu Penawaran adalah ringkasan visual promosi Anda yang dibuat oleh Gmail. Promosi ini dapat muncul di tab Promosi dan dalam email itu sendiri, sehingga memberikan visibilitas maksimum pada penawaran Anda.

Email promosi yang menampilkan pratinjau mobil promo dengan diskon 25% dan kode promo MAY2024.

Untuk mengaktifkan Kartu Penawaran, ikuti langkah-langkah berikut:

JSON-LD

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <script type="application/ld+json">
      [{
        "@context": "http://schema.org/",
        "@type": "DiscountOffer",
        "description": "DESCRIPTION",
        "discountCode": "DISCOUNT_CODE",
        "availabilityStarts": "START_DATE_TIME",
        "availabilityEnds": "END_DATE_TIME"
        "offerPageUrl": "OFFER_PAGE_URL"
        "merchantHomepageUrl": "MERCHANT_HOMEPAGE_URL"
      }]
    </script>
  </head>

  <body>
    // The message of your email
  </body>
</html>

Microdata

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <div itemscope itemtype="http://schema.org/DiscountOffer">
      <meta itemprop="description" content="DESCRIPTION"/>
      <meta itemprop="discountCode" content="DISCOUNT_CODE"/>
      <meta itemprop="availabilityStarts" content="START_DATE_TIME"/>
      <meta itemprop="availabilityEnds" content="END_DATE_TIME"/>
      <meta itemprop="offerpageurl" content="OFFER_PAGE_URL"/>
      <meta itemprop="merchantHomepageUrl" content="MERCHANT_HOMEPAGE_URL"/>
    </div>
  </head>

  <body>
    // The message of your email.
  </body>
</html>

Sesuaikan properti Kartu Promo: Perbarui nilai dalam skrip agar sesuai dengan promosi spesifik Anda.

Properti wajib:
- DESCRIPTION: Ringkasan singkat dan menarik tentang penawaran Anda.
  - Contoh: "Diskon 20% di seluruh situs" atau "Beli satu, gratis satu".
- Setidaknya salah satu URL berikut: Sebaiknya berikan URL halaman penawaran.
  - OFFER_PAGE_URL: URL halaman landing untuk penawaran spesifik ini. Tindakan ini akan membuat tombol "Beli sekarang" (atau yang serupa) di Kartu Promo. Jika ini diberikan, kami akan lebih memilih URL halaman penawaran.
  - MERCHANT_HOMEPAGE_URL: Gunakan ini hanya jika halaman penawaran tertentu tidak tersedia. URL ini akan ditautkan ke halaman beranda utama Anda.
Properti yang sangat direkomendasikan:
- DISCOUNT_CODE: Kode promo yang perlu diterapkan pengguna saat checkout.
  - Contoh: 20TODAY.
- START_DATE_TIME: Tanggal dan waktu mulai promosi dalam format ISO 8601.
  - Contoh: 2025-08-24T18:44:37-07:00.
- END_DATE_TIME: Tanggal dan waktu berakhirnya promosi dalam format ISO 8601.
  - Contoh: 2025-09-23T18:44:37-07:00.
Tulis pesan email Anda: dalam tag <body>, tulis pesan dan rancang tata letak email Anda seperti biasa.
Validasi dan lihat pratinjau kartu Anda: sebelum mengirim kampanye, validasi kode Anda dan lihat pratinjau tampilan Anotasi Penawaran Anda.

Langkah berikutnya

Lihat dokumentasi referensi untuk mempelajari kolom markup email yang tersedia.
Pelajari praktik terbaik untuk anotasi email.

Menganotasi email di tab Promosi Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

Membuat anotasi email

Membuat korsel produk

JSON-LD

Microdata

Membuat pratinjau gambar tunggal

JSON-LD

Microdata

Membuat anotasi promo

JSON-LD

Microdata

Membuat kartu promo

JSON-LD

Microdata

Langkah berikutnya

Menganotasi email di tab Promosi