การใช้ AMP สำหรับหน้า Landing Page ของ Google Ads

หน้า Landing Page ที่เร็วขึ้นมักจะนำไปสู่ Conversion ที่มากขึ้น และ AMP เป็นวิธีที่ยอดเยี่ยมในการสร้างหน้า Landing Page ของ Google Ads ที่น่าสนใจซึ่งโหลดได้เร็วขึ้น amp.dev มีทรัพยากรที่จำเป็นในการสร้างหน้าเว็บที่มีประสิทธิภาพสูงและน่าสนใจให้แก่นักพัฒนาเว็บ คำแนะนำทีละขั้นตอนนี้อธิบายวิธีใช้ Google Ads และเทคโนโลยีการโฆษณาอื่นๆ ในหน้า AMP

ขั้นตอนที่ 1: สร้างและตรวจสอบความถูกต้องของหน้า AMP

สร้างหน้า AMP

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

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

  • amp-bind: เพิ่มการโต้ตอบแบบเก็บสถานะที่กำหนดเองตามเหตุการณ์ที่คล้ายกับ JavaScript
  • amp-form: สร้างหน้า Landing Page ที่ผู้ใช้ต้องป้อนข้อมูล
  • amp-list: ดึงเนื้อหาแบบไดนามิกจากปลายทาง JSON ของ CORS
  • amp-carousel: ภาพหมุนสำหรับการเลื่อนแกลเลอรีรูปภาพ
  • amp-lightbox: แสดงมุมมองเต็มหน้าจอของคอมโพเนนต์เมื่อมีการโต้ตอบกับคอมโพเนนต์
  • amp-call-tracking จะแทนที่หมายเลขโทรศัพท์ในไฮเปอร์ลิงก์สำหรับการติดตามการโทรแบบไดนามิก
  • amp- Mustache: อนุญาตการแสดงผลด้วย Mustache.js
  • amp-date-picker: มีวิดเจ็ตสำหรับเลือกวันที่ เครื่องมือเลือกวันที่สามารถแสดงเป็นการวางซ้อน ซึ่งสัมพันธ์กับช่องป้อนข้อมูล หรือเป็นวิดเจ็ตปฏิทินแบบคงที่

ตรวจสอบหน้า AMP

ในระหว่างการพัฒนา โปรดตรวจสอบว่าหน้า AMP ใช้งานได้ AMP มีหลายวิธีในการตรวจสอบเอกสาร วิธีที่ใช้กันมากที่สุดในการตรวจสอบหน้า AMP คือการใช้โปรแกรมตรวจสอบเว็บหรือโปรแกรมตรวจสอบเครื่องมือของผู้ดูแลเว็บของ Google นอกจากนี้คุณยังใช้ปลั๊กอิน เบราว์เซอร์ Chrome และ Developer Console หรือผสานรวมโมดูล amphtml-validator npm ในบิลด์ของคุณได้ด้วย

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

สำหรับการสนับสนุนเกี่ยวกับการทดสอบ AMP โปรดไปที่หน้าการรับการสนับสนุนของโครงการ AMP

ขั้นตอนที่ 2: ตั้งค่า AMP สำหรับเครื่องมือวัด Conversion และการวิเคราะห์

ใช้คอมโพเนนต์ amp-analytics เพื่อติดตาม Conversion ของ Google Ads ทําตามขั้นตอนในหัวข้อตั้งค่าการวัด Conversion ของ Google Ads สําหรับหน้า Landing Page แบบ AMP เพื่อดูวิธีการตั้งค่านี้

Google Analytics

Google Analytics เป็นหนึ่งในโซลูชันข้อมูลวิเคราะห์ที่รองรับโดย amp-analytics หากต้องการทำให้เซสชันรวมกันในหน้า AMP และหน้าที่ไม่ใช่ AMP ให้ทำตามขั้นตอนในตั้งค่าการรวมเซสชันของ Google Analytics สำหรับ AMP

Google Tag Manager

คอมโพเนนต์ amp-analytics มีการรองรับ Google Tag Manager ในตัว นอกจาก Conversion ของ Google Ads แล้ว คุณยังสามารถใช้ Google Tag Manager เพื่อเพิ่มรีมาร์เก็ตติ้ง, DoubleClick Floodlight, Google Universal Analytics และผลิตภัณฑ์การวัดผลที่คล้ายกันได้อีกด้วย ดูรายการแท็กที่เข้ากันได้ทั้งหมด

Adobe Analytics (ก่อนหน้านี้เรียกว่า Omniture)

Adobe Analytics นำเสนอ 2 วิธีในการปรับใช้โซลูชันการติดตามประสิทธิภาพเว็บไซต์ของตนกับ คอมโพเนนต์ amp-analytics ได้แก่ การใช้ iframe (adobeanalytics_nativeConfig) และไม่ใช่ iframe (adobeanalytics) อ่านข้อดี/ข้อเสียและรายละเอียดการใช้งานของแต่ละวิธีการ

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

การวิเคราะห์ AMP ยังใช้การแทนที่ตัวแปรที่ยืดหยุ่นได้ โปรดดูรายละเอียดในเอกสารประกอบการแทนที่ตัวแปร

ขั้นตอนที่ 3: เปิดใช้การแสดง AMP ใน UI ของ Google Ads

แม้ว่าหน้า AMP ใน Google Search จะค้นพบโดยอัตโนมัติผ่านลิงก์จากหน้าเว็บ แต่ผู้ลงโฆษณาจะต้องป้อน URL ของหน้า AMP ใน Google Ads อย่างชัดแจ้ง อ่านวิธีใช้ AMP กับ Google Ads เพื่อดูรายละเอียดการตั้งค่า URL ของ AMP ใน UI ของ Google Ads

ปัจจุบันการแสดงผลแคชมีให้บริการสำหรับโฆษณาแบบข้อความในหน้าผลการค้นหาของ Google ที่แสดงบนเบราว์เซอร์หลักส่วนใหญ่ ได้แก่ Android Chrome, แอป Google Search สำหรับ Android และ Safari ในอุปกรณ์เคลื่อนที่ เราจะเพิ่มการใช้งานให้ครอบคลุมมากขึ้นตลอดช่วงไม่กี่เดือนข้างหน้านี้

หากต้องการทดสอบว่าหน้า AMP มีลักษณะอย่างไรเมื่อส่งจากแคช AMP ของ Google ภายในโปรแกรมดู Google Search ให้ป้อนบทความ AMP ในเครื่องมือทดสอบ AMP ของ Search แล้วคลิกลิงก์แสดงตัวอย่าง

นอกจากนี้ หากคุณต้องการให้การเข้าชม Google Ads ไปยังหน้า Landing Page แบบ AMP แต่ไม่ต้องการให้หน้าเหล่านั้นปรากฏในผลการค้นหาทั่วไป ให้เพิ่มคำสั่ง Disallow สำหรับหน้า AMP ที่เกี่ยวข้องลงใน robots.txt เช่นเดียวกับที่คุณทำกับหน้าเว็บทั่วไป

การอัปเดตเนื้อหา AMP ในหน้า Landing Page

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

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

การจัดการหน้า AMP ไม่ถูกต้อง

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