การใช้ 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-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 และคอนโซลของนักพัฒนาซอฟต์แวร์ หรือผสานรวมโมดูล npm ของ amphtml-validator ในบิลด์ได้ด้วย

นอกจากนี้ คุณยังใช้ 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 Analytics มาพร้อมกับการสนับสนุนแบบดั้งเดิมจากผู้ให้บริการข้อมูลวิเคราะห์กว่า 40 ราย เฟรมเวิร์กนี้มีความยืดหยุ่นและช่วยให้คุณวัดผลและทริกเกอร์ URL ได้โดยใช้การกําหนดค่าที่กําหนดเองเพื่อส่งข้อมูลวิเคราะห์ไปยังเซิร์ฟเวอร์ของคุณเองหรือผู้ให้บริการที่ไม่มีการสนับสนุน AMP ในตัว หากคุณใช้เทคโนโลยีที่ระบบยังไม่รองรับในขณะนี้ โปรดขอให้ผู้ให้บริการเพิ่มการรองรับ

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

ขั้นตอนที่ 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 ภายในโปรแกรมดู AMP ของ Google Search ให้ป้อนบทความ AMP ในเครื่องมือทดสอบ AMP ของ Search แล้วคลิกลิงก์แสดงตัวอย่าง

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

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

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

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

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

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