AMP教學-AMP Email格式介紹

AMP教學-AMP Email格式介紹

(2020.9月新增進度)
今天要來介紹從2018年初就一直有所進展的 AMP Email

AMP Email和傳統Email最大的不同是可以在電子郵件內放入RWD配置、選單輪播、產品圖替換等機制,同時可以使用部分AMP元件,讓使用者能夠在電子郵件內就可以有所互動,不再只是平面圖片電子報。
但目前僅只有gmail使用者可以接收到這類動態電子郵件,其他類型電子郵件尚未支援。

如何製作AMP Email?

以下是能夠構成AMP Email 的基礎語法:

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

一封AMP電子郵件必須包含以下這些元素

屬性 解釋
<!doctype html> 宣告
<html amp4email>或<html ⚡4email> amp email宣告
<head>和<body> 必須包含head 和body
<meta charset="utf-8"> 網頁編碼為萬國碼UTF-8
<script async src="https://cdn.ampproject.org/v0.js"></script> 放於<head>裡面,載入此js可以驅動基本amp格式
<style amp4email-boilerplate>body{visibility:hidden}</style> 放於<head>裡面,在加載js完全以前隱藏內容


AMP元件

以下是AMP 電子郵件中支持的元件列表,分為動態內容、排版、媒體幾類

動態內容元件

元件 解釋
<amp-form> 表單元素
<amp-selector> 可以設計選擇物件
amp-bind 和 <amp-bind-macro> AMP中的簡單數據庫,類似json功能
<amp-state>用於輸入值。注意:禁止綁定[href]或[src]
<amp-state> 用於定義初始狀態的amp-bind
<amp-list> <amp-mustache>可以獲得json資料,並且做成列表,可見amp-list介紹
<template type="amp-mustache"> 呈現出amp-list的模板資料,可見amp-mustache介紹

佈局

佈局元件  解釋
layout屬性皆可使用

amp layout的都可以使用

<amp-accordion> 一個便於顯示/隱藏不同部分的UI元素。
<amp-carousel> 輪播元件
<amp-sidebar> 側邊導航選單
<amp-image-lightbox> 用於包含圖像的燈箱效果
<amp-lightbox> 用於包含內容的燈箱


媒體

元件 解釋
<amp-img> 替換原本Html中的<img>。 注意:[src]必須是絕對路徑
<amp-anim> 可以嵌入GIF文件。

*不支持AMP分析技術,例如 amp-analytics 、amp-pixel ;而youtubefb這類需要載入外部崁入媒體的js不可以使用

css

在AMP Email裡面 仍然可以使用 <style amp-custom>來定義各class 或是使用行內的style css樣式,需要注意的是其css上限仍為50k、不可使用!important、部分偽類選擇器以及在gmail內並非所有css屬性都有支援


測試AMP Email 格式和發送測試信件

  1. 點選 測試模擬器 需要登入gmail方可使用
  2. 編輯AMP Email 內容 ,可隨時看下方是否有無出現錯誤提示
  3. 編輯完成後按 SEND,會發信到登入的gmail信箱內
  4. gmail信箱可能會收到提示要開啟動態電子郵件+設定 amp@gmail.dev 白名單後,再重新點選送出才會收AMP Email 信件

    email設定1
    email設定2
  5. AMP Email 會顯示閃電標示
    email設定3
  6. 在信件內有輪播、選單滑出等效果
    email範例1
    email範例2
    *實測後電腦上看的到AMP Email 但手機上看不到,仍會出現顯示需要開啟動態電子郵件提示。

目前AMP有特別列出那些收發信件單位有支援AMP E-mail也可參考


結語
現階段AMP Email 支援已經越來越多,或許會是另一種新型態的宣傳,甚至讓觀看者不用再連續點擊很多次才能找到想要的東西了,可以持續觀察AMP Email的發展

參考:  AMP Email 

文章關鍵字:AMP教學 AMP AMP網頁 行動裝置

更多文章:

  1. AMP教學-amp-img圖片
  2. AMP教學-amp-carousel 輪播
  3. AMP教學-amp-instagram把IG照片放入文章中
  4. AMP的現況與未來趨勢
  5. AMP的SEO效果到底如何?