프로모션 탭에서 이메일에 주석 추가

이메일 주석은 이미지, 특가, 만료일 등의 기능을 통해 프로모션 탭의 이메일 메시지에 활기를 불어넣습니다.

이메일에 주석을 달면 Gmail 사용자가 받은편지함에서 바로 프로모션을 보고 상호작용할 수 있습니다. 사용자는 프로모션 탭에서 주석이 달린 텍스트나 이미지를 클릭하여 이메일을 열지 않고도 프로모션에 관해 자세히 알아볼 수 있습니다.

이 페이지에서는 JSON-LD마이크로데이터를 사용하여 이메일에 주석을 추가하는 방법을 설명합니다. 이메일 마크업에 대한 자세한 내용은 시작 가이드를 참조하세요. 이메일 주석에 사용할 수 있는 마크업 필드 목록은 참조 문서를 확인하세요.

이메일 주석 빌드

이메일에 주석을 달아 프로모션 탭에 다음 기능을 표시할 수 있습니다.

다음 섹션에서는 각 유형의 이메일 주석을 만드는 방법을 설명합니다.

거래 주석 만들기

특가 주석은 프로모션 코드 또는 만료일과 같은 프로모션에 관한 텍스트 기반 세부정보를 표시합니다.

거래 주석을 만드는 방법은 다음과 같습니다.

  1. 마케팅 이메일 플랫폼에서 이메일을 만들고 이메일의 HTML 편집기를 엽니다.
  2. head 섹션에서 DiscountOffer 데이터 유형이 포함된 script 태그를 추가합니다.

    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>
    

    마이크로데이터

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

    다음 값을 바꿉니다. 모든 속성은 선택사항입니다. 각 속성에 대해 값을 포함하거나 코드에서 속성을 생략할 수 있습니다.

    • DESCRIPTION (선택사항): 20% off 또는 Free shipping와 같은 특가 배지와 함께 표시되는 텍스트입니다.
    • DISCOUNT_CODE(선택사항): 혜택의 할인 또는 프로모션 코드입니다(예: 20TODAY).
    • START_DATE_TIME(선택사항): 상품이 ISO 8601 형식으로 시작하는 날짜 및 시간입니다(예: 2023-09-25T18:44:37-07:00).
    • END_DATE_TIME(선택사항): ISO 8601 형식의 프로모션 종료일과 시간입니다(예: 2023-10-25T18:44:37-07:00).
  3. body 태그에 이메일에 사용할 메시지를 작성합니다.

제품 캐러셀은 다음과 같은 프로모션의 여러 이미지 미리보기를 표시합니다.

양말 할인 상품 이미지 3가지 미리보기 캐러셀이 표시된 프로모션 이메일입니다.

캐러셀에는 최대 10개의 이미지 미리보기를 포함할 수 있으며 각 이미지는 고유해야 합니다.

제품 캐러셀을 만드는 방법은 다음과 같습니다.

  1. 마케팅 이메일 플랫폼에서 이메일을 만들고 이메일의 HTML 편집기를 엽니다.
  2. head 섹션에서 script 태그를 추가합니다. 제품 캐러셀의 각 이미지에 대해 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>
    

    마이크로데이터

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

    PromotionCard 객체에서 다음 값을 바꿉니다. 선택적 속성의 경우 값을 포함하거나 코드에서 속성을 생략할 수 있습니다.

    • IMAGE_URL: PNG 또는 JPEG 형식의 이미지 URL입니다(예: https://www.example.com/image.png). 지원되는 가로세로 비율은 4:5, 1:1, 1.91:1입니다. 제품 캐러셀의 경우 각 이미지는 고유한 URL을 가져야 하며 동일한 가로세로 비율을 사용해야 합니다.
    • PROMO_URL: 프로모션의 URL입니다. 사용자가 프로모션 탭에서 이미지를 클릭하면 이 URL로 이동합니다.
    • HEADLINE (선택사항): 미리보기 이미지 아래에 표시되는 프로모션에 대한 1~2줄 설명입니다.
    • PRICE (선택사항): 프로모션 가격입니다.
    • PRICE_CURRENCY(선택사항): 3자리 ISO 4217 형식의 가격 통화입니다(예: USD). price와 함께 표시되는 통화 기호를 결정합니다.
    • DISCOUNT_VALUE (선택사항): 조정된 가격을 표시하기 위해 price에서 차감한 금액입니다. 조정된 가격이 원래 가격 옆에 표시됩니다.

      예를 들어 discountValue25, price100, priceCurrencyUSD이면 조정된 가격이 $75로 표시됩니다.

    • POSITION (선택사항): 캐러셀에서 카드의 위치입니다.

  3. body 태그에 이메일에 사용할 메시지를 작성합니다.

다음 단계

  • 사용 가능한 이메일 마크업 필드에 대해 알아보려면 참조 문서를 확인하세요.
  • 이메일 주석 권장사항에 대해 알아보기