23 ส่วนประกอบ AMP ที่คุณอาจไม่รู้ว่าคุณสามารถเพิ่มไปยังหน้า AMP ได้

ที่ส่องประกายไม่ใช่ทองเสมอไป...หรือป่าว?

AMP ถูกสร้างขึ้นเพื่อทำให้เว็บบนมือถือเร็วขึ้น แต่การทำเช่นนั้น มีการบังคับใช้ข้อจำกัด เช่น ข้อจำกัดเกี่ยวกับโค้ดที่กำหนดเอง, HTML/CSS และ JavaScript ขีดจำกัดสไตล์ชีต CSS 75kb เป็นหลักฐานว่าเนื่องจากหน้าเว็บใดก็ตามที่เกินจะทำให้การตรวจสอบ AMP ล้มเหลว

แม้จะมีข้อจำกัด นักการตลาดดิจิทัลก็สามารถปรับแต่งหน้าเว็บที่มีส่วนประกอบ AMP จำนวนมากได้ แท็ก HTML เฉพาะทางเหล่านี้ทำงานคล้ายกับแท็ก HTML แบบเดิม (ด้วยแท็กเปิดและปิด คุณลักษณะ และความสามารถในการจัดรูปแบบ CSS บางอย่าง) และสามารถระบุได้ง่าย โดยเริ่มต้นด้วยคำนำหน้า amp- เสมอ

รายชื่อทั้งหมดจะถูกเพิ่มเข้าไปอย่างต่อเนื่อง แต่ส่วนประกอบ 23 AMP ต่อไปนี้จะช่วยให้คุณมีความคิดที่ดีว่าหน้า AMP ที่ปรับแต่งได้นั้นเป็นอย่างไร

(ตอนนี้ Instapage มีโค้ดที่กำหนดเองของ AMP เพื่อเปิดใช้คอมโพเนนต์ที่หลากหลาย ไปที่นี่เพื่อดูรายละเอียดทั้งหมด)

23 ส่วนประกอบ AMP เพื่อปรับแต่งเพจของคุณ

1. หีบเพลง

การเพิ่ม amp-accordion ให้กับหน้าของคุณจะเป็นการแสดงโครงร่างของเนื้อหาและช่วยให้ผู้เยี่ยมชมสามารถข้ามไปยังส่วนใดส่วนหนึ่งของหน้าได้ "ลูก" ของ AMP แต่ละตัวในหีบเพลงถือเป็นส่วนในหีบเพลง (แต่ละส่วนต้องมี "ลูก" โดยตรงเพียงสองคนเท่านั้น) และลูกคนแรกของส่วนนี้ถือเป็นส่วนหัวของส่วน การคลิกที่หัวเรื่องจะขยายหรือยุบส่วน:

ตัวเลือกเพิ่มเติม 2 อย่างสำหรับส่วนประกอบ AMP accordion คือ nested accordion (เพื่อซ้อนหรือซ้อนกันหลาย accordion ภายในกัน) และ accordion ที่ยุบอัตโนมัติ (ซึ่งอนุญาตให้ขยายได้ครั้งละหนึ่งส่วนเท่านั้น)

2. เสียง

แทนที่จะใช้แท็กเสียง HTML5 แบบเดิม AMP ใช้เวอร์ชันของตัวเอง: amp-audio คอมโพเนนต์เสียง AMP ใช้ได้กับการฝังไฟล์เสียง HTML5 โดยตรงเท่านั้น โดยจะปรากฏบนหน้าเว็บดังนี้

แม้ว่าตัวควบคุมเสียงที่แสดงด้านบน (เล่น/หยุดชั่วคราว เสียง/ปิดเสียง และดาวน์โหลด) จะถูกเพิ่มโดยค่าเริ่มต้น ปุ่มดาวน์โหลดทางด้านขวาสามารถปิดใช้งานได้:

3. ติดตามการโทร

การติดตามการโทรด้วย AMP จะแทนที่หมายเลขโทรศัพท์คงที่ด้วยหมายเลขโทรศัพท์ที่ออกแบบมาสำหรับการวิเคราะห์การติดตามการโทร

4. ม้าหมุน

คอมโพเนนต์ภาพหมุน AMP จะแสดงรูปภาพหลายภาพตามแกนแนวนอน โดยมีรูปแบบ amp-carousel ให้เลือกหลากหลาย

คุณสามารถใช้ type=”carousel” เพื่อแสดงรายการรูปภาพเป็นแถบต่อเนื่องได้:

หรือพิมพ์=”สไลด์”เพื่อแสดงรายการรูปภาพเป็นสไลด์:

คุณยังสามารถเลือกใช้แอตทริบิวต์เล่นอัตโนมัติ (type=slides only) ซึ่งจะเลื่อนผ่านสไลด์โดยอัตโนมัติในช่วงเวลา 5 วินาทีโดยไม่ต้องโต้ตอบกับผู้ใช้

5. Facebook

คอมโพเนนต์ AMP Facebook จะฝังโพสต์ รูปภาพ และวิดีโอของ Facebook ลงในหน้า AMP โดยต้องใช้ URL ของ Facebook เท่านั้น

6. คอมเม้นเฟสบุ๊ค

AMP-facebook-comments อนุญาตให้ฝังความคิดเห็นของ Facebook ลงในหน้า AMP

7.ไลค์เฟสบุ๊ค

AMP-facebook-like อนุญาตให้ฝังปุ่ม Facebook like ลงในหน้า AMP

8. เพจเฟสบุ๊ค

AMP-facebook-page ฝังเพจ Facebook ลงในไฟล์ AMP ต้องใช้ href ของเพจ Facebook เท่านั้น คอมโพเนนต์ AMP Facebook Page ยังช่วยให้คุณแสดงแท็บต่างๆ บนเพจ Facebook ได้อีกด้วย ตัวอย่างเช่น คุณสามารถแสดงไทม์ไลน์และแท็บเหตุการณ์โดยระบุ data-tabs=”timeline, events:”

9. แบบอักษร

คอมโพเนนต์แบบอักษร AMP ช่วยให้คุณออกแบบหน้าเว็บด้วยแบบอักษรที่กำหนดเองในเนื้อหาหรือส่วนหัวของเอกสารได้

ไม่รองรับฟอนต์ที่เลือก มันแสดงเป็นข้อความธรรมดาสีแดง:

10. แบบฟอร์ม

คอมโพเนนต์แบบฟอร์ม AMP ช่วยให้คุณออกแบบหน้า AMP พร้อมแบบฟอร์มการจับลูกค้าเป้าหมายโดยละเอียด ส่วนขยายยังช่วยให้คุณตอบสนองความสำเร็จและข้อผิดพลาดด้วยแอตทริบิวต์พิเศษ การส่งสำเร็จ และข้อผิดพลาดในการส่ง:

11. Geo

ส่วนขยายทางภูมิศาสตร์ของ AMP อนุญาตให้มีเนื้อหาส่วนเล็กๆ ตามการประมาณตำแหน่งของผู้ใช้ (ระดับประเทศเท่านั้น ซึ่งคล้ายกับระดับของรหัสประเทศ ISO) นอกจากนี้ยังมีตัวเลือกในการจัดกลุ่มสถานที่ต่างๆ เข้าด้วยกัน ทำให้ง่ายต่อการใช้แอตทริบิวต์กับหลายพื้นที่ในคราวเดียว

12. iFrame

AMP-iframe ฝังเนื้อหาลงในหน้า AMP ผ่าน iFrame ซึ่งเหมาะอย่างยิ่งสำหรับการแสดงเนื้อหาที่ AMP ยังไม่รองรับ (Vimeo, Giphy, Google Maps เป็นต้น)

AMP-iframe อนุญาตให้ปรับขนาด iFrame ขณะรันไทม์ — ไม่ว่าจะในการโหลดหน้าเว็บ (iFrame ที่ฝังไว้จะปรับขนาดตัวเองเป็น 200x200px) หรือเมื่อผู้ใช้โต้ตอบ (การกดปุ่มจะปรับขนาด iFrame เป็น 300x300px) ข้อจำกัดเพียงอย่างเดียวของคอมโพเนนต์ AMP นี้คือต้องอยู่ห่างจากด้านบนสุด 600px หรือไม่อยู่ภายใน 75% แรกของวิวพอร์ตเมื่อเลื่อนขึ้นไปด้านบน แล้วแต่จำนวนใดจะน้อยกว่า

13. ไลท์บ็อกซ์รูปภาพ

คอมโพเนนต์ไลท์บ็อกซ์รูปภาพ AMP ช่วยให้ผู้ใช้ขยายรูปภาพ AMP เพื่อเติมวิวพอร์ตได้ คุณยังสามารถเลือกที่จะแสดงคำบรรยายภาพที่ด้านล่างของวิวพอร์ตได้ดังนี้:

14. อินสตาแกรม

วิดีโอและรูปภาพ Instagram สามารถฝังลงในหน้า AMP ของคุณด้วย amp-instagram โดยใช้ data-shortcode ที่พบในทุก URL รูปภาพ/วิดีโอ คุณยังสามารถใส่คำอธิบายภาพด้วยแอตทริบิวต์คำอธิบายภาพ:

15. แกลเลอรีไลท์บ็อกซ์

AMP-lightbox-gallery มอบประสบการณ์ "ไลท์บ็อกซ์" สำหรับส่วนประกอบ AMP อื่นๆ เช่น amp-img และ amp-carousel (ปัจจุบันรองรับเฉพาะรูปภาพเท่านั้น) เมื่อผู้เข้าชมโต้ตอบกับองค์ประกอบ AMP คอมโพเนนต์ UI จะขยายเพื่อเติมเต็มวิวพอร์ตจนกว่าจะปิดอีกครั้ง หากหน้าเว็บของคุณมีหลายองค์ประกอบ เพียงเพิ่มแอตทริบิวต์ไลท์บ็อกซ์ให้กับรูปภาพแต่ละรูปที่คุณต้องการให้ผู้ใช้ดูในไลท์บ็อกซ์

16. Pinterest

การใช้ amp-pinterest การเพิ่มปุ่ม "ปักหมุด" ในหน้าของคุณจะช่วยให้ผู้เยี่ยมชมสามารถปักหมุดเนื้อหาต่างๆ จากไซต์ของคุณ:

หากต้องการเพิ่มปุ่ม "ปักหมุด" คุณจะต้องมีแอตทริบิวต์เหล่านี้:

• data-url: URL ที่จะแชร์
• data-media: URL รูปภาพที่จะปักหมุด
• data-description: คำอธิบายเริ่มต้นที่ปรากฏในพิน

หรือคุณสามารถฝังวิดเจ็ตพินแบบสมบูรณ์ได้:

ในกรณีนี้ แอตทริบิวต์ data-url ต้องมี URL ที่มีคุณสมบัติครบถ้วนของทรัพยากร Pinterest

17. Pixel

คอมโพเนนต์พิกเซล AMP เป็นวิธีที่รวดเร็วในการติดตามการดูหน้าเว็บ พิกเซล AMP เป็นองค์ประกอบในตัวที่ไม่ต้องโหลดส่วนขยาย

18. Reddit

โพสต์และความคิดเห็นของ Reddit สามารถรวมไว้ในหน้า AMP ด้วย amp-reddit คุณต้องระบุองค์ประกอบ AMP Reddit ระหว่างโพสต์หรือความคิดเห็น และแหล่งที่มาของการฝัง เมื่อฝังความคิดเห็น ให้รวมความคิดเห็นหลักโดยระบุ data-embedparent=”true” และรวมความคิดเห็นที่อัปเดตด้วยการระบุ data-embedlive=”true”

19. SoundCloud

ผู้เยี่ยมชมสามารถเล่นแทร็ก SoundCloud บนหน้า AMP ของคุณได้เมื่อคุณใช้ส่วนประกอบ AMP SoundCloud (สิ่งที่คุณต้องการสำหรับ amp-soundcloud คือ trackid ที่พบในโค้ดฝังตัวของ SoundCloud):

คุณยังสามารถฝังเพลย์ลิสต์ SoundCloud แบบเต็มด้วย playlistid (พบได้ในโค้ดฝัง SoundCloud) โดยการแทนที่ data-trackid ด้วย data-playlistid:

20. ทวิตเตอร์

เช่นเดียวกับองค์ประกอบ AMP ของโซเชียลมีเดียอื่นๆ amp-twitter จะฝังทวีตลงในหน้า AMP ของคุณ:

หากไม่จำเป็นต้องใช้รูปภาพ หรือคุณกำลังพยายามประหยัดพื้นที่บนเพจของคุณ คุณสามารถเลือกที่จะปิดใช้งานการ์ด Twitter โดยใช้ data-cards=”hidden:”

21. ปุ่มโปรด

เฟรมเวิร์ก AMP ช่วยให้นักการตลาดเพิ่มปุ่มรายการโปรด/ชอบ/บุ๊กมาร์กได้ นอกจากนี้ยังมีเวอร์ชันที่ซับซ้อนยิ่งขึ้นซึ่งรวมถึงจำนวนที่ชื่นชอบ และอัปเดตหมายเลขนี้เมื่อคลิกปุ่ม:

22. การชำระเงินใน AMP

หน้า AMP รองรับการขอข้อมูลการชำระเงินโดยตรงจากเบราว์เซอร์ หากต้องการขอชำระเงินเป็น AMP คุณจะต้องใช้ amp-iframe ด้วย นี่คือ iFrame แบบฝังที่มีปุ่ม "ซื้อเลย" โดยมีตรรกะการชำระเงินจริงทั้งหมดอยู่ภายใน iframe src เอง:

อย่างไรก็ตาม เนื่องจาก AMP จำกัด JavaScript แหล่งที่มาของ iFrame จึงต้องจัดการอินสแตนซ์ที่ไม่มี PaymentRequest ด้วย ตัวเลือกอื่นๆ ได้แก่:

• สลับปุ่ม "ซื้อเลย" เป็นปุ่ม "หยิบใส่ตะกร้า"
• การเปลี่ยนเส้นทางผู้ใช้ไปยังแบบฟอร์มการชำระเงินมาตรฐาน

23. ระดับดาว

อาจมีการเพิ่มความสามารถในการให้ดาวในหน้า AMP ของคุณ พร้อมด้วยคุณลักษณะต่างๆ เช่น การเข้าถึงด้วยการแตะ เมาส์ และแป้นพิมพ์ และดาวที่เปลี่ยนสีได้เมื่อผู้ใช้วางเมาส์เหนือสิ่งเหล่านี้:

คุณจะเพิ่มองค์ประกอบ AMP ใดในหน้าของคุณ

แม้จะมีข้อจำกัดของ AMP แต่การออกแบบหน้าเว็บที่สวยงามและปรับแต่งได้ก็สามารถทำได้โดยสมบูรณ์ ส่วนประกอบ 23 อย่างข้างต้นเป็นเพียงส่วนเสริมบางส่วนที่คุณสามารถเพิ่มลงในหน้า AMP เพื่อเพิ่ม Conversion ได้สูงสุด

ด้วยฟีเจอร์ AMP ใน Instapage นักการตลาดสามารถสร้างหน้า Landing Page ที่ปรับให้เหมาะสมหลังการคลิกด้วยเครื่องมือสร้างที่เป็นมิตรต่อนักออกแบบ การวิเคราะห์ขั้นสูง เครื่องมือตรวจสอบในตัว และอื่นๆ เริ่มสร้างหน้า Landing Page ที่เร็วขึ้น ลงทะเบียนสำหรับการสาธิต Instapage วันนี้