AMP 電子郵件基礎知識

重要事項：本文件不適用於您目前選取的格式 stories！

如果您熟悉 AMP，那真是太棒了！AMP 電子郵件只是 AMP HTML 函式庫的子集。如果您不熟悉 AMP，那也很棒！本指南將提供您開始撰寫有效的 AMP 電子郵件所需的一切知識！

必要標記

AMP 電子郵件看起來像傳統 HTML 電子郵件，但有一些差異。以下是將電子郵件設為有效 AMP 電子郵件所需的最少標記。

<!doctype html>
<html ⚡4email data-css-strict>
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <style amp4email-boilerplate>body{visibility:hidden}</style>
</head>
<body>
  Hello, AMP4EMAIL world.
</body>
</html>

支援 AMP 電子郵件的電子郵件供應商已設定安全性檢查，以確保使用者獲得愉快且安全的體驗。使用 AMP 建構的電子郵件必須符合所有要求

從 <!doctype html> doctype 開始。這也是 HTML 的標準。
包含最上層的 <html amp4email> 標籤，或 <html ⚡4email> 標籤 (如果您的電子郵件格外酷炫)。這會將文件識別為 AMP 電子郵件，以便可以如此處理。
定義 <head> 和 <body> 標籤。這在 HTML 中是選用的，但 AMP 會保持整潔！
加入 <meta charset="utf-8> 標籤作為 <head> 標籤的第一個子項。這會識別頁面的編碼。
AMP 函式庫是透過放在 <head> 中的 <script async src="https://cdn.ampproject.org/v0.js"></script> 標籤匯入。如果沒有它，透過 AMP 獲得的任何絕佳且動態的功能都將無法運作！作為最佳做法，這應盡可能早地包含在 <head> 中，直接放在 <meta charset="utf-8"> 標籤下方。
在 AMP 函式庫載入之前，先將電子郵件內容隱藏起來，方法是將 AMP 電子郵件樣板放在 <head> 中。

<head>
...
  <style amp4email-boilerplate>body{visibility:hidden}</style>
</head>

AMP 特定標籤替換

由於 AMP 電子郵件函式庫是 AMP HTML 函式庫的子集，因此許多相同的規則都適用；AMP 特定標籤會取代資源密集的 HTML 標籤，並且需要定義寬度和高度。這讓 AMP 樣板能夠隱藏內容，直到它了解內容在使用者裝置上的外觀為止。

圖片

為了有效地繪製頁面，所有 <img> 標籤都將替換為 <amp-img>。<amp-img> 標籤需要定義寬度和高度，並支援 AMP 的版面配置系統

<amp-img src="https://link/to/img.jpg"
    width="100"
    height="100"
    layout="responsive">
</amp-img>

<amp-img> 標籤具有強大的內建方式來控制回應式設計和設定回退。

深入瞭解如何使用 AMP 版面配置和媒體查詢，以及如何設定圖片回退。

GIF

AMP 建立了 <amp-anim>，這是一個用於 GIF 圖片的特定標籤，可讓 AMP 執行階段在動畫不在螢幕上時降低 CPU 使用率。與 <amp-img> 類似，寬度和高度是已定義的，並且元素必須包含結束標籤。

<amp-anim
    width="400"
    height="300"
    src="my-gif.gif">
</amp-anim>

此外，它還支援選用的 placeholder 子項，以便在載入 src 檔案時顯示，並支援 AMP 版面配置系統。

<amp-anim width=400 height=300 src="my-gif.gif" layout="responsive">
  <amp-img placeholder width=400 height=300 src="my-gif-screencap.jpg">
  </amp-img>
</amp-anim>

具備樣式的電子郵件

與所有電子郵件用戶端一樣，AMP 允許內嵌 style 屬性，但也支援電子郵件標頭內 <style amp-custom> 標籤中的 CSS。

...
<style amp-custom>
  /* any custom styles go here. */
  body {
    background-color: white;
  }
  amp-img {
    border: 5px solid black;
  }
</style>
...
</head>

與 HTML 電子郵件一樣，AMP 電子郵件支援有限的 CSS 選擇器和屬性子集。

請參閱AMP 電子郵件支援的 CSS，以取得所有支援 AMP 的電子郵件用戶端允許的 CSS 完整清單。

AMP 強制樣式的大小限制為 75,000 位元組。

允許的 AMP 元件

AMP 元件的動態、視覺和互動功能，將 AMP 電子郵件帶向電子郵件的未來。

完整的 AMP 電子郵件中支援的元件清單可作為 AMP 電子郵件規格的一部分取得。

驗證要求

動態個人化電子郵件內容通常需要驗證使用者身分。但是，為了保護使用者資料，從 AMP 電子郵件內部發出的所有 HTTP 要求都可能會經過 Proxy 處理並剝奪 Cookie。

若要驗證從 AMP 電子郵件發出的要求，您可以使用存取權杖。

存取權杖

您可以使用存取權杖來驗證使用者身分。存取權杖由電子郵件寄件者提供和檢查。寄件者使用權杖來確保只有有權存取 AMP 電子郵件的使用者才能提出電子郵件中包含的要求。存取權杖必須經過加密保護，且具有時間和範圍限制。它們包含在要求的 URL 中。

此範例示範如何使用 <amp-list> 顯示已驗證的資料

<amp-list
  src="https://example.com/endpoint?token=REPLACE_WITH_YOUR_ACCESS_TOKEN"
  height="300"
>
  <template type="amp-mustache">
    ...
  </template>
</amp-list>

同樣地，當使用 <amp-form> 時，請將您的存取權杖放在 action-xhr URL 中。

<form
  action-xhr="https://example.com/endpoint?token=REPLACE_WITH_YOUR_ACCESS_TOKEN"
  method="post"
>
  <input type="text" name="data" />
  <input type="submit" value="Send" />
</form>

範例

以下範例考慮一個假設的筆記服務，該服務允許已登入的使用者將筆記新增至其帳戶並稍後檢視。該服務想要向使用者 jane@example.com 發送一封電子郵件，其中包含他們先前所做筆記的清單。目前使用者的筆記清單在端點 https://example.com/personal-notes 中以 JSON 格式提供。

在發送電子郵件之前，該服務會為 jane@example.com 產生一個經過加密保護的有限用途存取權杖：A3a4roX9x。存取權杖包含在 URL 查詢內的欄位名稱 exampletoken 中

<amp-list
  src="https://example.com/personal-notes?exampletoken=A3a4roX9x"
  height="300"
>
  <template type="amp-mustache">
    <p></p>
  </template>
</amp-list>

端點 https://example.com/personal-notes 負責驗證 exampletoken 參數並尋找與權杖相關聯的使用者。

有限用途存取權杖

有限用途存取權杖提供保護，防止要求詐騙和重播攻擊，確保動作是由訊息傳送到的使用者執行。保護是透過將唯一權杖參數新增至要求參數並在叫用動作時驗證它來實現。

權杖參數應產生為只能用於特定動作和特定使用者的金鑰。在執行要求動作之前，您應檢查權杖是否有效，以及是否與您為使用者產生的權杖相符。如果權杖相符，則可以執行動作。如果動作應該是一次性動作，則權杖應對未來的要求失效。

存取權杖應作為 HttpActionHandler 的 url 屬性的一部分傳送給使用者。例如，如果您的應用程式處理位於 http://www.example.com/approve?requestId=123 的核准要求，您應考慮在其中加入額外的 accessToken 參數，並監聽傳送至 http://www.example.com/approve?requestId=123&accessToken=xyz 的要求。

組合 requestId=123 和 accessToken=xyz 是您必須預先產生的組合，確保 accessToken 無法從 requestId 推斷出來。任何具有 requestId=123 且沒有 accessToken 或 accessToken 不等於 xyz 的核准要求都應被拒絕。如果動作應該是一次性動作，一旦此要求通過，任何未來具有相同 ID 和存取權杖的要求也應被拒絕。

在不同的電子郵件用戶端中測試

支援 AMP 電子郵件的電子郵件用戶端提供他們自己的文件和測試工具，以協助您進行整合。

請參閱測試 AMP 電子郵件，以取得更多資訊和電子郵件用戶端特定文件的連結。

撰寫者 @CrystalOnScript