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

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

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

สร้างหน้า AMP

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

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

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

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

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

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

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

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

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

Google Analytics

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

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

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

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

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

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