AMP 電子郵件基礎知識

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

如果您熟悉 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 電子郵件，以便可以將其視為 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 請求都可能會被代理並剝奪 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 發送電子郵件，其中包含他們先前所做的筆記清單。目前使用者的筆記清單可在 JSON 格式的端點 https://example.com/personal-notes 中取得。

在發送電子郵件之前，該服務會為 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 是您必須預先產生的組合，確保無法從 requestId 推斷出 accessToken。任何具有 requestId=123 且沒有 accessToken 或 accessToken 不等於 xyz 的核准請求都應被拒絕。如果動作應該是一次性動作，則一旦此請求通過，任何未來具有相同 ID 和存取權杖的請求也應被拒絕。

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

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

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

作者： @CrystalOnScript