Ta strona została przetłumaczona przez Cloud Translation API.

Dodawanie adnotacji do e-maili na karcie Oferty

Adnotacje w e-mailach uatrakcyjniają wiadomości na karcie Promocje dzięki funkcjom takim jak obrazy, oferty i daty ważności.

Gdy dodasz adnotacje do e-maili, użytkownicy Gmaila będą mogli wyświetlać Twoje promocje i wchodzić z nimi w interakcje bezpośrednio ze skrzynki odbiorczej. Na karcie Promocje użytkownicy mogą kliknąć tekst lub obraz z adnotacjami, aby dowiedzieć się więcej o promocji bez konieczności otwierania e-maila.

Z tego artykułu dowiesz się, jak dodawać adnotacje do e-maili za pomocą formatów JSON-LD i mikrodanych. Więcej informacji o znacznikach e-maili znajdziesz w przewodniku Pierwsze kroki. Listę pól znaczników, których możesz używać w adnotacjach do e-maili, znajdziesz w dokumentacji.

Tworzenie adnotacji do e-maili

Możesz dodawać adnotacje do e-maili, aby wyświetlać na karcie Promocje te funkcje:

Tworzenie karuzeli produktów
Tworzenie podglądu pojedynczego obrazu
Tworzenie adnotacji do umowy
Tworzenie karty oferty

W sekcjach poniżej znajdziesz informacje o tym, jak tworzyć poszczególne typy adnotacji w e-mailach.

Tworzenie karuzeli produktów

Karuzela produktów wyświetla wiele podglądów obrazów promocji, np.:

E-mail promocyjny z karuzelą 3 podglądów obrazów przedstawiających oferty skarpetek.

W karuzeli możesz umieścić maksymalnie 10 podglądów obrazów. Każdy z nich musi być niepowtarzalny.

Aby utworzyć karuzelę produktów:

Na platformie do wysyłania e-maili marketingowych utwórz e-maila i otwórz edytor HTML.

W sekcji head dodaj tag script. Do każdego obrazu w karuzeli produktów dodaj obiekt 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>

Mikrodane

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

W przypadku każdego obiektu PromotionCard zastąp te wartości: W przypadku właściwości opcjonalnych możesz podać wartość lub pominąć właściwość w kodzie.

IMAGE_URL: adres URL obrazu w formacie PNG lub JPEG, np. https://www.example.com/image.png. Obsługiwane formaty obrazu to 4:5, 1:1 i 1, 91:1. W przypadku karuzel produktów każdy obraz musi mieć unikalny adres URL i ten sam format.
PROMO_URL: adres URL promocji. Gdy użytkownicy klikną obraz na karcie Promocje, otworzy się ten adres URL.
HEADLINE (Opcjonalnie): 1–2-wierszowy opis promocji, który wyświetla się pod obrazem podglądu.
PRICE (Opcjonalnie): cena promocji.
PRICE_CURRENCY (opcjonalny): waluta ceny w 3-literowym formacie ISO 4217, np. USD. Określa symbol waluty wyświetlany z elementem price.
DISCOUNT_VALUE (Opcjonalnie): kwota odjęta od price w celu wyświetlenia skorygowanej ceny. Skorygowana cena jest wyświetlana obok ceny pierwotnej.

Jeśli na przykład discountValue to 25, price to 100, a priceCurrency to USD, skorygowana cena wyświetla się jako $75.
POSITION (Opcjonalnie): pozycja karty w karuzeli.

W tagu body wpisz treść e-maila.

Tworzenie podglądu pojedynczego obrazu

Adnotacje podglądu pojedynczego obrazu wyświetlają jeden obraz, aby zaprezentować ważny produkt na karcie Oferty w Gmailu, np.:

E-mail promocyjny z obrazem butów, plakietką z informacją o 20% rabacie i kodem promocyjnym 20TODAY

Możesz użyć tej funkcji w przypadku pojedynczego obrazu. Wszyscy odbiorcy muszą otrzymać to samo zdjęcie i ten sam adres URL zdjęcia. Więcej informacji znajdziesz w dokumentacji z odpowiedziami na najczęstsze pytania.

Aby utworzyć podgląd pojedynczego obrazu:

W platformie do wysyłania e-maili marketingowych utwórz e-maila i otwórz edytor HTML.

W sekcji head dodaj tag script, który zawiera typ danych: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>

Mikrodane

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

Zastąp te wartości. W przypadku właściwości opcjonalnych możesz podać wartość lub pominąć właściwość w kodzie.

IMAGE_URL: adres URL obrazu podglądowego w formacie PNG lub JPEG, np. https://www.example.com/image.png. Obsługiwany format obrazu to 1,91:1.
PROMO_URL: gdy użytkownicy klikną image, wyświetli się adres URL kierujący do promocji.
HEADLINE (Opcjonalnie): 1–2-wierszowy opis promocji, który wyświetla się pod obrazem podglądu.
PRICE (Opcjonalnie): cena promocji.
PRICE_CURRENCY (opcjonalny): waluta ceny w 3-literowym formacie ISO 4217, np. USD. Określa symbol waluty wyświetlany z elementem price.
DISCOUNT_VALUE (Opcjonalnie): kwota odjęta od price w celu wyświetlenia skorygowanej ceny. Skorygowana cena jest wyświetlana obok ceny pierwotnej.

Jeśli na przykład discountValue to 25, price to 100, a priceCurrency to USD, skorygowana cena wyświetla się jako $75.

W tagu body wpisz treść e-maila.

Tworzenie adnotacji do umowy

Wyróżnij e-maila za pomocą adnotacji o ofercie. Ta funkcja dodaje plakietkę promocyjną bezpośrednio do e-maila w skrzynce odbiorczej, wyróżniając kluczowe informacje, takie jak kod rabatowy lub szczegóły oferty, tuż obok wiersza tematu.

E-mail promocyjny z podglądem plakietki oferty z 20% zniżką i kodem promocyjnym 20TODAY.

Aby włączyć adnotacje o ofertach, wykonaj te czynności:

Dodaj schemat do kodu HTML e-maila: na platformie e-mail marketingu otwórz edytor HTML kampanii. W sekcji head dodaj tag script, który zawiera typ danych DiscountOffer o tej strukturze:

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>

Mikrodane

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

Dostosuj właściwości adnotacji o umowie: zaktualizuj wartości w skrypcie, aby dopasować je do konkretnej promocji.

Wymagane wartości: w przykładowym kodzie zastąp co najmniej jedną z tych zmiennych, aby wygenerować adnotację o ofercie.
- DESCRIPTION: Krótkie, atrakcyjne podsumowanie Twojej oferty.
  - Przykład: „20% zniżki na wszystko” lub „Kup 1 produkt, a 1 otrzymasz bezpłatnie”.
- DISCOUNT_CODE: kod promocyjny, który użytkownik musi zastosować podczas płatności.
  - Przykład: 20TODAY.
- END_DATE_TIME: data i godzina zakończenia promocji w formacie ISO 8601.
  - Przykład: 2025-09-23T18:44:37-07:00.
Zdecydowanie zalecane właściwości:
- START_DATE_TIME: data i godzina rozpoczęcia promocji w formacie ISO 8601.
  - Przykład: 2025-08-24T18:44:37-07:00.
Napisz e-maila: w tagu <body> napisz wiadomość i zaprojektuj układ e-maila w zwykły sposób.
Sprawdź i wyświetl podgląd karty: przed wysłaniem kampanii sprawdź kod i wyświetl podgląd adnotacji o ofertach.

Tworzenie karty umowy

Karty ofert to wizualne podsumowania Twoich promocji generowane przez Gmaila. Mogą się one wyświetlać na karcie Promocje i w treści e-maila, co zapewnia maksymalną widoczność Twoich ofert.

E-mail promocyjny z zapowiedzią oferty samochodu z rabatem 25% i kodem promocyjnym MAY2024.

Aby włączyć karty ofert, wykonaj te czynności:

Dodaj schemat do kodu HTML e-maila: na platformie e-mail marketingu otwórz edytor HTML kampanii. W sekcji head dodaj tag script, który zawiera typ danych DiscountOffer o tej strukturze:

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>

Mikrodane

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

Dostosuj właściwości karty oferty: zaktualizuj wartości w skrypcie, aby dopasować je do konkretnej promocji.

Wymagane wartości:
- DESCRIPTION: Krótkie, atrakcyjne podsumowanie Twojej oferty.
  - Przykład: „20% zniżki na wszystko” lub „Kup 1 produkt, a 1 otrzymasz bezpłatnie”.
- Co najmniej jeden z tych adresów URL: zalecamy podanie adresu URL strony oferty.
  - OFFER_PAGE_URL: adres URL strony docelowej tej konkretnej oferty. Spowoduje to utworzenie na karcie oferty przycisku „Kup teraz” (lub podobnego). Jeśli ten adres URL zostanie podany, będzie on miał pierwszeństwo przed adresem URL strony oferty.
  - MERCHANT_HOMEPAGE_URL: używaj tej opcji tylko wtedy, gdy nie jest dostępna konkretna strona oferty. Będzie on prowadzić do głównej strony Twojej witryny.
Zdecydowanie zalecane wartości:
- DISCOUNT_CODE: kod promocyjny, który użytkownik musi zastosować podczas płatności.
  - Przykład: 20TODAY.
- START_DATE_TIME: data i godzina rozpoczęcia promocji w formacie ISO 8601.
  - Przykład: 2025-08-24T18:44:37-07:00.
- END_DATE_TIME: data i godzina zakończenia promocji w formacie ISO 8601.
  - Przykład: 2025-09-23T18:44:37-07:00.
Napisz e-maila: w tagu <body> napisz wiadomość i zaprojektuj układ e-maila w zwykły sposób.
Sprawdź i wyświetl podgląd karty: przed wysłaniem kampanii sprawdź kod i wyświetl podgląd adnotacji o ofertach.

Dalsze kroki

Aby dowiedzieć się więcej o dostępnych polach znaczników e-maili, zapoznaj się z dokumentacją.
Dowiedz się więcej o sprawdzonych metodach dotyczących adnotacji w e-mailach.

Dodawanie adnotacji do e-maili na karcie Oferty Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Tworzenie adnotacji do e-maili

Tworzenie karuzeli produktów

JSON-LD

Mikrodane

Tworzenie podglądu pojedynczego obrazu

JSON-LD

Mikrodane

Tworzenie adnotacji do umowy

JSON-LD

Mikrodane

Tworzenie karty umowy

JSON-LD

Mikrodane

Dalsze kroki

Dodawanie adnotacji do e-maili na karcie Oferty