이메일 주석을 사용하면 이미지, 특가, 만료일과 같은 기능을 통해 프로모션 탭의 이메일 메시지에 생동감을 불어넣을 수 있습니다.
이메일에 주석을 달면 Gmail 사용자가 받은편지함에서 바로 프로모션을 보고 상호작용할 수 있습니다. 사용자는 이메일을 열지 않고도 프로모션 탭에서 주석이 달린 텍스트 또는 이미지를 클릭하여 프로모션에 관해 자세히 알아볼 수 있습니다.
이 페이지에서는 JSON-LD 및 마이크로데이터를 사용하여 이메일에 주석을 추가하는 방법을 설명합니다. 이메일 마크업의 자세한 내용은 시작 가이드를 참고하세요. 이메일 주석에 사용할 수 있는 마크업 필드 목록은 참조 문서를 확인하세요.
이메일 주석 작성
이메일에 주석을 달아 프로모션 탭에 다음 기능을 표시할 수 있습니다.
다음 섹션에서는 각 유형의 이메일 주석을 만드는 방법을 설명합니다.
거래 주석 만들기
거래 주석은 프로모션 코드, 만료일 등 프로모션에 대한 텍스트 기반 세부정보를 표시합니다.
거래 주석을 만드는 방법은 다음과 같습니다.
- 마케팅 이메일 플랫폼에서 이메일을 만들고 이메일의 HTML 편집기를 엽니다.
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>다음 값을 바꿉니다. 모든 속성은 선택사항입니다. 각 속성에 값을 포함하거나 코드에서 속성을 생략할 수 있습니다.
body태그에 이메일 메시지를 작성합니다.
제품 캐러셀 만들기
제품 캐러셀에는 다음과 같이 프로모션의 여러 이미지 미리보기가 표시됩니다.
캐러셀에는 최대 10개의 이미지 미리보기를 포함할 수 있으며 각 이미지는 고유해야 합니다.
제품 캐러셀을 만들려면 다음 단계를 따르세요.
- 마케팅 이메일 플랫폼에서 이메일을 만들고 이메일의 HTML 편집기를 엽니다.
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 형식(예:https://www.example.com/image.png)으로 된 이미지의 URL입니다. 지원되는 가로세로 비율은 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에서 차감된 금액으로 조정된 가격을 표시합니다. 조정된 가격은 원래 가격 옆에 표시됩니다.예를 들어
discountValue이25,price이100,priceCurrency가USD이면 조정된 가격이$75로 표시됩니다.POSITION(선택사항): 캐러셀에서 카드의 위치입니다.
body태그에 이메일 메시지를 작성합니다.