在 Klaviyo 使用 Gmail 促銷標註顯示折扣碼

gmail_annotations_discount_code_with_klaviyo_bg

Gmail 特惠註解

是否很常在 Gmail 信箱看到有些 Email 會有這樣醒目的特惠標示

gmail_annotations_with_discount_code_example

其實 Google 是有提供文件教學的

Gmail 註解

文件中介紹了三種呈現方式

Create a deal annotation (交易註解)

<!-- meta 版本 -->
<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>

<!-- JSON-LD 版本 -->
<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>

這是簡單且直覺的方式，如一開始的截圖一樣會呈現折扣碼，描述
並且多久後過期，過期也會呈現已過期

gmail_annotations_with_discount_code_expired

Create a product carousel(產品輪播介面)

gmail_annotations_promotion_product_carousel

產品輪播和下方的單張圖片預覽
都是用 PromotionCard 來標示
只是內容不太一樣

gmail_annotations_promotion_card_multiple_products

輪播的話會有多個產品，並且需要標示產品相關資訊

IMAGE_URL：圖片的網址，格式為 PNG 或 JPEG，例如 https://www.example.com/image.png。支援的顯示比例為 4:5、1:1、1.91:1。針對產品輪轉介面，每張圖片都必須有專屬網址，且使用相同的顯示比例。
PROMO_URL：促銷活動的網址。使用者點選「促銷活動」分頁中的圖片後，就會造訪這個網址。
HEADLINE (選用)：1 到 2 行宣傳活動說明，會顯示在預覽圖片下方。
PRICE (選用)：促銷活動的價格。
PRICE_CURRENCY (選用)：價格的幣別，採 3 個英文字母組成的 ISO 4217 格式，例如 USD。決定使用 price 顯示的貨幣符號。
DISCOUNT_VALUE (選用)：從 price 中減去的金額，用於顯示經調整的價格。調整後的價格會顯示在原價旁邊。

舉例來說，如果 discountValue 為 25、price 為 100，而 priceCurrency 為 USD，則系統會顯示經調整的價格 $75。

POSITION (選用)：輪轉介面中卡片的位置。

圖片

注意 Ratio 是 4:5、1:1、1.91:1
如果沒有專業軟體的話，這裡用個線上服務示意

croppola

1.91:1

Create a single image preview(單張圖片預覽畫面)

單張圖片比圖片輪播就更單純一點，用一張促銷的圖片來吸引使用者的注意

gmail_annotations_promotion_single_image

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


<!-- 
  IMAGE_URL：預覽圖片的網址，格式為 PNG 或 JPEG，例如 https://www.example.com/image.png。支援的顯示比例為 1.91:1。
  PROMO_URL：使用者點選 image 時，導向促銷活動的網址。
  HEADLINE (選用)：1 到 2 行宣傳活動說明，會顯示在預覽圖片下方。
  PRICE (選用)：促銷活動的價格。
  PRICE_CURRENCY (選用)：價格的幣別，採 3 個英文字母組成的 ISO 4217 格式，例如 USD。決定使用 price 顯示的貨幣符號。
  DISCOUNT_VALUE (選用)：從 price 中減去的金額，用於顯示經調整的價格。調整後的價格會顯示在原價旁邊。

  舉例來說，如果 discountValue 為 25、price 為 100，而 priceCurrency 為 USD，則系統會顯示經調整的價格 $75。 
-->