ทำงานกับอีเมล AMP HTML

เกี่ยวกับ AMP

AMP (Accelerated Mobile Pages) เป็นเฟรมเวิร์กโอเพนซอร์สของ Google ที่สร้างจาก HTML, CSS, และ JavaScript ซึ่งช่วยสร้างอีเมลที่มีน้ำหนักเบาและโหลดเร็วขึ้น AMP มีคอมโพเนนต์หลายอย่างเช่น carousel, ฟอร์ม, รูปภาพ เป็นต้น นอกจากความเร็วแล้ว AMP Emails ยังแสดงอีเมลที่มีปฏิสัมพันธ์เต็มรูปแบบภายในไคลเอนต์อีเมล ทำให้ผู้ใช้สามารถโต้ตอบกับอีเมลโดยตรง เช่น กรอกฟอร์มหรือตอบแบบสำรวจโดยไม่ต้องออกจากไคลเอนต์อีเมล

ทำงานกับอีเมล AMP HTML

Aspose.Email ให้ AmpMessage ซึ่งเป็นการแทนอีเมล AMP. Aspose.Email มีหลายคลาสสำหรับเพิ่มคอมโพเนนต์ลงในอีเมล AMP เช่น AmpImage, AmpCarousel, AmpAccordion, AmpForm เป็นต้น รายการคลาสทั้งหมดคุณสามารถพบได้ที่ Aspose.Email.Amp หน้า โค้ดตัวอย่างต่อไปนี้แสดงการสร้าง, บันทึก, และอัปเดตอีเมล AMP ด้วย Aspose.Email API.

string dataDir = RunExamples.GetDataDir_Output();

AmpMessage msg = new AmpMessage();
msg.HtmlBody = "<html><body> Hello AMP </body></html>";

//add AmpAnim component
AmpAnim anim = new AmpAnim(800, 400);
anim.Src = "https://placekitten.com/800/400";
anim.Alt = "Test alt";
anim.Attribution = "The Go gopher was designed by Reneee French";
anim.Attributes.Layout = LayoutType.Responsive;
anim.Fallback = "offline";
msg.AddAmpComponent(anim);

//add AmpImage component
AmpImage img = new AmpImage(800, 400);
img.Src = "https://placekitten.com/800/400";
img.Alt = "Test alt";
img.Attributes.Layout = LayoutType.Responsive;
msg.AddAmpComponent(img);

//add AmpCarousel component
AmpCarousel car = new AmpCarousel(800, 400);
img = new AmpImage(800, 400);
img.Src = "https://amp.dev/static/img/docs/tutorials/firstemail/photo_by_caleb_woods.jpg";
img.Alt = "Test 2 alt";
img.Attributes.Layout = LayoutType.Fixed;
car.Images.Add(img);
img = new AmpImage(800, 400);
img.Src = "https://placekitten.com/800/400";
img.Alt = "Test alt";
img.Attributes.Layout = LayoutType.Responsive;
car.Images.Add(img);
img = new AmpImage(800, 400);
img.Src = "https://amp.dev/static/img/docs/tutorials/firstemail/photo_by_craig_mclaclan.jpg";
img.Alt = "Test 3 alt";
img.Attributes.Layout = LayoutType.Fill;
car.Images.Add(img);
msg.AddAmpComponent(car);

//add AmpFitText component
AmpFitText txt = new AmpFitText("Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.");
txt.Attributes.Width = 600;
txt.Attributes.Height = 300;
txt.Attributes.Layout = LayoutType.Responsive;
txt.MinFontSize = 8;
txt.MaxFontSize = 16;
txt.Value = "Lorem ipsum dolor sit amet, has nisl nihil convenire et, vim at aeque inermis reprehendunt.";
msg.AddAmpComponent(txt);

//add AmpAccordion component
AmpAccordion acc = new AmpAccordion();
acc.ExpandSingleSection = true;

Section sec = new Section();
sec.Header = new SectionHeader(SectionHeaderType.h2, "Section 1");
sec.Value = new SectionValue("Content in section 1.");
acc.Sections.Add(sec);

sec = new Section();
sec.Header = new SectionHeader(SectionHeaderType.h2, "Section 2");
sec.Value = new SectionValue("Content in section 2.");
acc.Sections.Add(sec);

img = new AmpImage(800, 400);
img.Src = "https://placekitten.com/800/400";
img.Alt = "Test alt";
img.Attributes.Layout = LayoutType.Responsive;

sec = new Section();
sec.Header = new SectionHeader(SectionHeaderType.h2, "Section 3");
sec.Value = new SectionValue(img);
acc.Sections.Add(sec);
msg.AddAmpComponent(acc);

//add AmpForm component
AmpForm form = new AmpForm();

form.Method = FormMethod.Post;
form.ActionXhr = "https://example.com/subscribe";
form.Target = FormTarget.Top;

FormField field = new FormField("Name:", "text");
field.Name = "name";
field.IsRequired = true;
form.Fieldset.Add(field);

field = new FormField("Email:", "email");
field.Name = "email";
field.IsRequired = true;
form.Fieldset.Add(field);

field = new FormField();
field.InputType = "submit";
field.Value = "Subscribe";
form.Fieldset.Add(field);
msg.AddAmpComponent(form);

msg.Save(dataDir + "AmpTest_1.eml");
MailMessage savedmsg = MailMessage.Load(dataDir + "AmpTest_1.eml");
AmpMessage ampMsg = savedmsg as AmpMessage;
if (ampMsg != null)
{
    DateTime dt = new DateTime(2019, 9, 27, 1, 1, 1, DateTimeKind.Utc);
    AmpTimeago time = new AmpTimeago(dt);
    time.Attributes.Width = 600;
    time.Attributes.Height = 300;
    time.Attributes.Layout = LayoutType.Fixed;
    time.Locale = "en";
    time.Cutoff = 600;
    ampMsg.AddAmpComponent(time);

    ampMsg.Save(dataDir + "AmpTest_2.eml");
}
การพิมพ์ข้อความอีเมล บทความเชิงเทคนิค