การติดตั้งโค้ดโฆษณา

วิธีสร้างหน่วยโฆษณาที่ใช้ได้กับ AMP

คู่มือนี้แสดงวิธีสร้างหน่วยโฆษณาที่ใช้ได้กับ AMP เพื่อแสดงโฆษณา AdSense ในหน้าเว็บ AMP

หน่วยโฆษณา AMP ใน AdSense อาจปรับเปลี่ยนตามอุปกรณ์หรือมีขนาดคงที่ก็ได้ เราขอแนะนำให้คุณใช้หน่วยโฆษณา AMP ที่ปรับเปลี่ยนตามอุปกรณ์ โดยมีเหตุผลดังต่อไปนี้

  • หน่วยโฆษณา AMP ที่ปรับเปลี่ยนตามอุปกรณ์จะปรับขนาดตัวเองให้พอดีกับอุปกรณ์ที่กำลังแสดงอยู่โดยอัตโนมัติ และใช้ความกว้างเต็มหน้าจอของผู้ใช้
  • Google จะเพิ่มประสิทธิภาพขนาดโฆษณาเพื่อให้แน่ใจว่าจะทำงานได้ดีในหน้าเว็บของคุณ
ฟีเจอร์ทั้งหมดของ AdSense (เช่น การควบคุมการบล็อก ดุลยภาพของโฆษณา รายงาน ฯลฯ) รองรับโฆษณา AMP

ก่อนจะเริ่มต้น

โปรดตรวจสอบให้แน่ใจว่าคุณได้เพิ่มสคริปต์ AMP ที่จำเป็นลงในหน้าเว็บที่ต้องการให้แสดงโฆษณา AMP

  • คัดลอกและวางโค้ดต่อไปนี้ไว้ระหว่างแท็ก <head></head> ของ AMP HTML เพื่อเพิ่มสคริปต์

    <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>

สคริปต์นี้จะโหลดไลบรารี amp-ad ที่จำเป็น แต่ไม่ทำให้โฆษณาปรากฏในหน้าเว็บ AMP ของคุณด้วยตัวเอง คุณต้องเพิ่มโค้ดโฆษณาที่ใช้ได้กับ AMP ด้วยจึงจะแสดงโฆษณาได้ อ่านข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบของ amp-ad ได้ที่ https://www.ampproject.org/docs/reference/components/amp-ad

สร้างหน่วยโฆษณาที่ใช้ได้กับ AMP ที่ปรับเปลี่ยนตามอุปกรณ์

ปัจจุบันการสร้างหน่วยโฆษณา AMP ที่ปรับเปลี่ยนตามอุปกรณ์เป็นกระบวนการที่ต้องทำด้วยตัวเอง โดยต้องปฏิบัติตามขั้นตอนต่อไปนี้

  1. สร้างหน่วยโฆษณาที่ปรับเปลี่ยนตามอุปกรณ์ใหม่ในบัญชี AdSense
  2. ในโค้ดโฆษณาของหน่วยโฆษณาที่ปรับเปลี่ยนตามอุปกรณ์ที่คุณสร้างขึ้นในขั้นตอนที่ 1 ให้ค้นหาและจดบันทึกข้อมูลต่อไปนี้
    • รหัสผู้เผยแพร่โฆษณา (data-ad-client) เช่น ca-pub-1234567891234567
    • รหัสหน่วยโฆษณา (data-ad-slot) เช่น 1234567890

    ดูตัวอย่าง

    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <ins class="adsbygoogle"
         style="display:inline-block;width:120px;height:600px"
         data-ad-client="ca-pub-1234567891234567"
         data-ad-slot="1234567890"></ins>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
  3. สร้างโค้ดโฆษณา AMP
    คัดลอกโค้ดโฆษณาต่อไปนี้และแทนที่ค่า data-ad-client และ data-ad-slot ด้วยค่าของคุณเองจากขั้นตอนที่ 2
    <amp-ad width="100vw" height=320
      type="adsense"
      data-ad-client="ca-pub-1234567891234567"
      data-ad-slot="1234567890"
      data-auto-format="rspv"
      data-full-width>
        <div overflow></div>
    </amp-ad>
    เราไม่แนะนำให้แก้ไขส่วนอื่นๆ ของโค้ดโฆษณาข้างต้น เนื่องจากอาจทำให้โค้ดโฆษณาหยุดทำงาน
  4. วางโค้ดโฆษณา AMP ไว้ในซอร์สโค้ด HTML ของหน้าเว็บบนอุปกรณ์เคลื่อนที่ที่คุณต้องการให้โฆษณาปรากฏ โปรดทราบว่าระบบยอมรับตำแหน่งโฆษณาทั้งแบบครึ่งหน้าบนและครึ่งหน้าล่าง อย่าลืมว่านโยบายโปรแกรม AdSense จะยังคงมีผลบังคับใช้กับหน้าเว็บที่มีหน่วยโฆษณา AMP ด้วย 
    โปรดตรวจสอบว่าคุณไม่ได้วางโค้ดโฆษณาไว้ในคอนเทนเนอร์ระดับบนสุด (<div>, <iframe> ฯลฯ) ที่มีความสูงคงที่หรือจำกัด มิฉะนั้นโฆษณาอาจเปลี่ยนขนาดและทำให้การออกแบบหน้าเว็บเกิดความเสียหาย
  5. (ไม่บังคับ) หลังจากวางโค้ดโฆษณา AMP แล้ว เราขอแนะนำให้คุณทดสอบโฆษณาบนอุปกรณ์เคลื่อนที่ที่ต่างกันหลายๆ เครื่องเพื่อให้แน่ใจว่าโฆษณาปรับเปลี่ยนไปตามขนาดหน้าจอของอุปกรณ์ต่างๆ อย่างถูกต้อง
    เมื่อดูโฆษณาในหน้าเว็บ AMP ของคุณเอง อาจใช้เวลาสักพักก่อนที่โฆษณาจะเริ่มแสดง เนื่องจาก AMP จะจัดลำดับความสำคัญให้กับเนื้อหาก่อน อ่านข้อมูลเพิ่มเติมเกี่ยวกับวิธีแคชหน้าเว็บ AMP

กรณีการใช้งานขั้นสูง: โฆษณา AMP ที่มีขนาดคงที่ การจัดรูปแบบโฆษณา AMP ฯลฯ

หากต้องการให้หน่วยโฆษณา AMP มีความกว้างหรือความสูงคงที่ ให้ปฏิบัติตามวิธีการแก้ไขโค้ดโฆษณา AMP ที่ปรับเปลี่ยนตามอุปกรณ์เหล่านี้

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

ติดตามประสิทธิภาพของหน่วยโฆษณา AMP

ดูรายงานแพลตฟอร์มเนื้อหาเพื่อติดตามประสิทธิภาพของหน่วยโฆษณา AMP

บทความนี้มีประโยชน์ไหม
เราจะปรับปรุงได้อย่างไร