7 วิธีที่คุณสามารถใช้ AMP สำหรับอีคอมเมิร์ซเพื่อสร้างยอดขายเพิ่มขึ้น (ตัวอย่าง)

หน้าเว็บที่ช้าทำให้อัตราการแปลงต่ำ การวิจัยพบว่าแม้ความเร็วในการโหลดที่ช้าลง 100 มิลลิวินาทีก็สามารถส่งผลกระทบต่อการแปลงบนหน้าเว็บได้ ท้ายที่สุดแล้ว ผู้ใช้ไม่ต้องการรอ เป็นความจริงที่ทำให้ Google เร่งความเร็วเว็บบนมือถือด้วย Accelerated Mobile Pages เมื่อหลายปีก่อน

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

การใช้ AMP สำหรับอีคอมเมิร์ซ

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

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

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

แล้ว AMP ทำอย่างไร? และคุณทำได้อย่างไร? ตั้งแต่ amp-bind ไปจนถึง amp-selector และอื่นๆ ต่อไปนี้เป็นส่วนประกอบบางส่วนที่คุณสามารถใช้เพื่อสร้างหน้าผลิตภัณฑ์ หน้าหมวดหมู่ ตะกร้าสินค้า และอื่นๆ

องค์ประกอบที่เป็นประโยชน์สำหรับ AMP สำหรับอีคอมเมิร์ซ

1. หน้าสินค้า

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

การสร้างภาพเหล่านี้ด้วย AMP เกี่ยวข้องกับองค์ประกอบต่างๆ เช่น amp-carousel และ amp-video ซึ่งคุณสามารถใช้เพื่อสร้างช็อตเด็ดที่โดดเด่น รูปภาพที่ให้ข้อมูล และวิดีโอที่ครอบคลุม

หากต้องการใช้คำอธิบายผลิตภัณฑ์แบบยาวประกอบกับรูปภาพของคุณ ให้ลองใช้ amp-accordion เพื่อเพิ่มและลดขนาดเนื้อหา แบบฟอร์มแอมป์องค์ประกอบจะช่วยให้คุณสร้างระบบแสดงความคิดเห็นเพื่อให้ผู้เยี่ยมชมเขียนรีวิวผลิตภัณฑ์ของคุณ:

สำหรับบางสิ่งที่ง่ายกว่าเล็กน้อย CSS ที่กำหนดเองจะทำให้สามารถเปิดใช้งานระบบตรวจสอบดาวสำหรับการให้คะแนนผลิตภัณฑ์ได้:

และด้วยองค์ประกอบ amp-social-share คุณสามารถเสนอให้ผู้ใช้แชร์ผลิตภัณฑ์ไปยังโซเชียลมีเดียได้

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

2. หน้าหมวดหมู่สินค้า

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

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

มีประโยชน์อย่างยิ่งในหน้าหมวดหมู่ผลิตภัณฑ์คือองค์ประกอบต่างๆ เช่น amp-carousel และ amp-bind ซึ่งทำให้ผู้เยี่ยมชมสามารถสร้างแกลเลอรีที่พวกเขาสามารถเรียกดูผลิตภัณฑ์และหมวดหมู่ย่อยได้ สิ่งเหล่านี้อาจรวมถึงคำอธิบายภาพสั้นๆ ที่อธิบายภาพได้

เมื่อพวกเขาต้องการค้นหาผลิตภัณฑ์ใดผลิตภัณฑ์หนึ่ง คุณสามารถใช้ amp-form เพื่อสร้างแถบค้นหา และคุณสามารถแสดงผลลัพธ์เหล่านั้นในหน้าอื่นหรือหน้าเดียวกัน คุณสามารถเติมข้อความอัตโนมัติได้:

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

AMP นำเสนอตัวอย่างหน้าผลิตภัณฑ์ที่มีฟังก์ชันการค้นหาและการจัดระเบียบผลิตภัณฑ์:

ต่อไปนี้คือข้อบ่งชี้ที่ดีกว่าสำหรับหน้าหมวดหมู่ผลิตภัณฑ์ที่คุณสร้างด้วย AMP ได้

มาจาก Myntra แบรนด์แฟชั่นออนไลน์ที่ใหญ่ที่สุดในอินเดีย เมื่อพวกเขาลงทุนใน AMP พวกเขาพบว่าความเร็วเพิ่มขึ้น 60% และอัตราตีกลับลดลง 40% ในหน้า Landing Page ที่สำคัญที่สุดหลังการคลิก และด้วยความช่วยเหลือของ amp-bind พวกเขาไม่จำเป็นต้องประนีประนอมกับประสบการณ์ของผู้ใช้ ผู้เข้าชมสามารถจัดเรียงและกรองผลิตภัณฑ์และขนาดได้เหมือนกับที่ทำบนหน้าที่ไม่ใช่ AMP พวกเขาได้รับประสบการณ์การใช้งานที่ยอดเยี่ยมในพริบตา

3. แสดงเนื้อหาส่วนบุคคล

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

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

พฤติกรรมเริ่มต้นของ amp-mustache สำหรับการแสดงข้อมูลรายการ amp คือการวนรอบวัตถุสิ่งของ การเพิ่ม amp-carousel ภายในเทมเพลตจะทำให้เทมเพลตแสดงผลหลายภาพหมุน วิธีหนึ่งในการแก้ไขปัญหานี้คือให้ amp-list endpoint ส่งคืนรายการเดียวในรายการ

พวกเขายังสามารถใช้ amp-list เพื่อส่งคืนเนื้อหาส่วนบุคคลให้กับผู้ใช้ด้วยความช่วยเหลือของคุกกี้ (โดยใช้แอตทริบิวต์ credentials=”include”) หรือรหัสไคลเอ็นต์ของ AMP:

อีกวิธีในการแสดงเนื้อหาส่วนบุคคล AMP กล่าวคือใช้ amp-bind กับปลายทาง JSON สิ่งนี้มีประโยชน์อย่างยิ่งเมื่อจำเป็นต้องอัปเดตข้อมูลหลังจากการโต้ตอบกับผู้ใช้ เช่น โรงแรมแสดงห้องว่างหลังการจอง

4. ตะกร้าสินค้า

ขณะนี้รองรับตะกร้าสินค้าใน AMP แล้ว ในการสร้าง Google แนะนำให้ใช้ amp-list ซึ่งสามารถแสดงรายการแบบไดนามิกของสิ่งที่พวกเขาได้เพิ่มเข้าไป:

amp-list จำเป็นต้องส่งคุกกี้เซสชันที่ส่วนหัวของคำขอ เพื่อให้เซิร์ฟเวอร์สามารถดึงเนื้อหาของรถเข็นในเซสชันได้ ด้วยเหตุนี้ เราจึงใช้ credentials=”include” เป็นแอตทริบิวต์เพิ่มเติม

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

5. ขั้นตอนการชำระเงินและการชำระเงิน

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

ใน Chrome คุณสามารถใช้ API คำขอการชำระเงิน ซึ่งจะทำให้ผู้ใช้สามารถชำระเงินผ่านกล่องโต้ตอบในเบราว์เซอร์ได้ นี่คือตัวอย่างด่วน

อีกทางเลือกหนึ่งคือสร้างขั้นตอนการชำระเงินภายใน AMP ด้วย amp-form หากการชำระค่าผลิตภัณฑ์ต้องเข้าสู่ระบบ คุณสามารถรวมองค์ประกอบเหล่านี้เข้ากับการเข้าถึงแอมป์ได้

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

6. การวิเคราะห์

วัดประสิทธิภาพของการใช้ AMP สำหรับอีคอมเมิร์ซด้วย amp-analytics องค์ประกอบนี้สนับสนุนทั้งเครื่องมือวิเคราะห์ของบุคคลที่สามและภายในองค์กร ซึ่งรวมถึงโซลูชันยอดนิยม เช่น Google Analytics, Adobe Analytics, Nielsen, Quantcast และอื่นๆ

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

• การดูหน้าเว็บ
• Anchor Clicks
• ตัวจับเวลา
• เลื่อน
• การเปลี่ยนแปลง AMP Carousel
• รูปร่าง

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

7. และอื่นๆ…

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

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

แอป AMP ที่มีประสิทธิภาพมากที่สุดสำหรับ Shopify สามารถสร้างเพจได้หลายประเภท เช่น หน้าสินค้า คอลเลกชั่น หน้าแรก และบล็อก โดยปกติแล้วจะมีราคาไม่แพงหรือฟรี และมาพร้อมกับการสนับสนุนที่เชื่อถือได้:

มีปลั๊กอินที่คล้ายกันสำหรับผู้ใช้ WordPress และสำหรับผู้ใช้ Magento เช่นกัน

AMP สำหรับตัวอย่างอีคอมเมิร์ซ

คุณได้เห็นองค์ประกอบแล้ว ตอนนี้เรามาดูกันว่าแบรนด์ออนไลน์ที่ใหญ่ที่สุดบางแบรนด์ใช้ AMP สำหรับอีคอมเมิร์ซอย่างไร นี่เป็นการแสดงสั้นๆ ที่รวบรวมโดย Plumrocket

หน้าผลิตภัณฑ์ Newegg

1-800-หน้าหมวดหมู่ดอกไม้

หน้าผลิตภัณฑ์ Eventbrite

หน้าหมวดหมู่สินค้าลังโคม

แบรนด์ประสบความสำเร็จกับ AMP สำหรับอีคอมเมิร์ซหรือไม่

จากข้อมูลของ Forrester ไซต์ของ AMP ที่มีการเข้าชมมากอาจคาดว่าจะเห็นอัตรา Conversion การขายที่เพิ่มขึ้น 20% ในหน้า AMP, การเข้าชมไซต์ AMP เพิ่มขึ้น 10% เมื่อเทียบเป็นรายปี และเพิ่มขึ้น 60% ในหน้าต่อ เยี่ยม. ดังนั้นแบรนด์ในชีวิตจริงเป็นอย่างไร?

AMP สำหรับผู้ใช้อีคอมเมิร์ซ โดยตัวเลข

• Advance Create เว็บไซต์เปรียบเทียบประกันที่ใหญ่ที่สุดของญี่ปุ่น ลดเวลาในการโหลดหน้าเว็บลง 61.2% และราคาต่อการดำเนินการ 36.8% ขณะที่เพิ่มอัตราการแปลงเป็น 28.9%
• Event Tickets Center เพิ่มอัตราการแปลง 20% และเวลาบนไซต์เพิ่มขึ้น 13% ในขณะที่ลดอัตราตีกลับลง 10%
• DiscoverCarHire.com สร้างการเข้าชมบนอุปกรณ์เคลื่อนที่เพิ่มขึ้น 22% และ Conversion จากอุปกรณ์เคลื่อนที่ผ่าน Google Ads เพิ่มขึ้น 29% พวกเขายังปรับปรุงการเข้าชมที่เกิดขึ้นเองบนมือถือของไซต์ได้ถึง 73% โดยใช้ AMP
• ลูกค้าของ Fastcommerce ได้รับ Conversion เพิ่มขึ้น 15% ในหน้า 2 ล้านหน้าเมื่อเปรียบเทียบหน้า AMP กับหน้าที่ไม่ใช่ AMP
• WompMobile เห็นอัตราการแปลงเพิ่มขึ้น 105% และอัตราตีกลับลดลง 31% ด้วยหน้า AMP ของอีคอมเมิร์ซเมื่อเทียบกับหน้าที่ไม่ใช่ AMP
• Wego.com สร้างอัตรา Conversion ของพันธมิตรเพิ่มขึ้น 95% และ Conversion โฆษณาเพิ่มขึ้น 3 เท่าหลังจากสร้างหน้า Landing Page หลักในเวอร์ชัน AMP
• Greenweez เห็นว่าทราฟฟิกออร์แกนิกบนอุปกรณ์เคลื่อนที่ครึ่งหนึ่งมาจาก AMP ระหว่างเดือนมกราคมถึงมีนาคม 2017 พวกเขายังเพิ่มอัตราการแปลงบนอุปกรณ์เคลื่อนที่ 80% ในขณะที่ลดต้นทุนการได้มาซึ่งอุปกรณ์เคลื่อนที่ลง 66%

เพิ่มอัตราการแปลงของคุณด้วย AMP สำหรับอีคอมเมิร์ซ

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

เช่นเดียวกับวิธีที่ Shopify, WordPress และ Magento รองรับแอป AMP Instapage ก็เช่นกัน นั่นหมายความว่า คุณสามารถสร้างหน้า Landing Page ของ AMP หลังการคลิกผ่านตัวสร้าง Instapage ได้เหมือนกับที่คุณทำกับหน้าอื่นๆ เรียนรู้วิธีการทำในวงกว้างด้วยการสาธิตของ Instapage