การแจ้งเตือน

โปรดอย่าลืมไปที่หน้า AdSense ของคุณ ซึ่งมีข้อมูลที่ปรับให้เกี่ยวข้องกับบัญชีของคุณเพื่อช่วยให้ประสบความสำเร็จจากการใช้ AdSense

หน่วยโฆษณา

วิธีการปรับเปลี่ยนโค้ดโฆษณาที่ปรับเปลี่ยนตามพื้นที่โฆษณา

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

สำคัญ:

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

ตัวอย่างของขนาดหน่วยโฆษณาที่แน่นอนตามความกว้างของหน้าจอ

ตัวอย่างนี้แสดงถึงวิธีการแก้ไขโค้ดที่ปรับเปลี่ยนตามอุปกรณ์เพื่อกำหนดขนาดหน่วยโฆษณาที่ต้องการสำหรับความกว้างหน้าจอ 3 ช่วง ได้แก่ โทรศัพท์มือถือ แท็บเล็ต และเดสก์ท็อป คุณไม่จำเป็นต้องมีประสบการณ์เกี่ยวกับ CSS Media Queries หรือการแก้ไขโค้ดโฆษณา AdSense มาก่อนในการทำตามตัวอย่างนี้

นี่คือบางส่วนของโค้ดโฆษณาที่ปรับเปลี่ยนตามอุปกรณ์ที่มีการแก้ไข ซึ่งกำหนดขนาดหน่วยโฆษณาที่แน่นอนตามความกว้างของหน้าจอต่อไปนี้

  • สำหรับความกว้างหน้าจอไม่เกิน 500px: หน่วยโฆษณา 320x100
  • สำหรับความกว้างหน้าจอระหว่าง 500px ถึง 799px: หน่วยโฆษณา 468x60
  • สำหรับความกว้างหน้าจอ 800px ขึ้นไป: หน่วยโฆษณา 728x90
<style>
.example_responsive_1 { width: 320px; height: 100px; }
@media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .example_responsive_1 { width: 728px; height: 90px; } }
</style>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- example_responsive_1 -->
<ins class="adsbygoogle example_responsive_1"
     style="display:block"
     data-ad-client="ca-pub-1234567890123456"
     data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

วิธีการนำโค้ดตัวอย่างมาปรับใช้ในเว็บไซต์ของคุณเอง

  1. สร้างหน่วยโฆษณา Display ในบัญชี AdSense โดยดูให้แน่ใจว่าเลือกปรับเปลี่ยนตามพื้นที่โฆษณาไว้ในส่วน "ขนาดโฆษณา" จดบันทึกข้อมูลต่อไปนี้จากโค้ดโฆษณาที่ปรับเปลี่ยนตามพื้นที่โฆษณา:
    • รหัสผู้เผยแพร่โฆษณา เช่น ca-pub-1234567890123456
    • รหัสของหน่วยโฆษณา (data-ad-slot) เช่น 1234567890
  2. ในโค้ดตัวอย่าง ให้ทำดังนี้
    • แทนที่ example_responsive_1 ทุกอินสแตนซ์ด้วยชื่อที่ไม่ซ้ำ เช่น Home_Page, front_page_123 ฯลฯ
      หมายเหตุ:
      • ชื่อเฉพาะที่คุณใช้ต้องประกอบด้วยตัวอักษรภาษาอังกฤษ (A-Z) ตัวเลข และขีดล่างเท่านั้น และอักขระตัวแรกต้องเป็นตัวอักษรภาษาอังกฤษ
      • คุณต้องใช้ชื่อที่ไม่ซ้ำกันในแต่ละครั้งที่นำโค้ดตัวอย่างมาปรับใช้
    • แทนที่ ca-pub-1234567890123456 ด้วยรหัสผู้เผยแพร่โฆษณาของคุณเอง
    • แทนที่ 8XXXXX1 ด้วยรหัสของหน่วยโฆษณาของคุณเอง
  3. กำหนดขนาดหน้าจอที่คุณต้องการสำหรับหน่วยโฆษณาต่อความกว้างหน้าจอ ดังนี้
    • หากคุณพอใจกับขนาดหน่วยโฆษณาที่มีอยู่ในโค้ดตัวอย่างแล้ว คุณก็ไม่จำเป็นต้องทำการเปลี่ยนแปลงใดๆ
    • หากคุณต้องการกำหนดขนาดหน่วยโฆษณาตามความกว้างหน้าจอที่แตกต่างกัน ให้ทำดังนี้ในโค้ดตัวอย่าง
      • แทนที่ 320px และ 100px ด้วยความกว้างและความสูงของหน่วยโฆษณาที่คุณต้องการใช้สำหรับความกว้างหน้าจอไม่เกิน 500px
      • แทนที่ 468px และ 60px ด้วยความกว้างและความสูงของหน่วยโฆษณาที่คุณต้องการใช้สำหรับความกว้างหน้าจอระหว่าง 500px และ 799px
      • แทนที่ 728px และ 90px ด้วยความกว้างและความสูงของหน่วยโฆษณาที่คุณต้องการใช้สำหรับความกว้างหน้าจอ 800px ขึ้นไป
  4. คัดลอกและวางโค้ดโฆษณาที่คุณแก้ไขไว้ในซอร์สโค้ด HTML ของหน้าเว็บที่ต้องการให้โฆษณาปรากฏ
    หมายเหตุ: เมื่อวางโค้ดโฆษณาแล้ว เราขอแนะนำให้คุณทดสอบโฆษณาในอุปกรณ์และหน้าจอต่างๆ เพื่อให้แน่ใจว่าลักษณะการทำงานที่ปรับเปลี่ยนตามอุปกรณ์นั้นถูกต้องแล้ว

ตัวอย่างฟีเจอร์ขั้นสูงของโค้ดโฆษณาที่ปรับเปลี่ยนตามอุปกรณ์

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

หมายเหตุ: เราไม่แนะนำให้ใช้ฟีเจอร์ขั้นสูงเหล่านี้หากคุณไม่มั่นใจเรื่องการแก้ไขโค้ดโฆษณา

ระบุความกว้างที่ขยายได้และความสูงคงที่

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

ตัวอย่างของความกว้างที่ขยายได้โดยมีความสูงคงที่
ตัวอย่างนี้แสดงวิธีแก้ไขโค้ดโฆษณาที่ปรับเปลี่ยนตามพื้นที่โฆษณาเพื่อระบุความสูงคงที่ที่ 90px และความกว้างที่เปลี่ยนแปลงได้ ตั้งแต่ความกว้างต่ำสุด 400px ถึงความกว้างสูงสุด 970px:
<ins class="adsbygoogle"
   style="display:block;min-width:400px;max-width:970px;width:100%;height:90px"
   data-ad-client="ca-pub-1234567890123456"
   data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

ระบุขนาดที่แน่นอนตามความกว้างของหน้าจอ

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

ตัวอย่างของขนาดที่แน่นอนตามความกว้างของหน้าจอ
หากคุณทราบขนาดหน่วยโฆษณาที่แน่นอนตามอุปกรณ์ซึ่งเหมาะกับเว็บไซต์ที่ปรับเปลี่ยนตามอุปกรณ์มากที่สุด คุณสามารถใช้คิวรี่สื่อ CSS3 ในการกำหนดขนาดของหน่วยโฆษณาที่ปรับเปลี่ยนตามพื้นที่โฆษณาได้ ตัวอย่างต่อไปนี้แสดงวิธีการแก้ไขโค้ดโฆษณาเพื่อใช้คิวรี่สื่อ CSS3:
<style type="text/css">
.adslot_1 { width: 320px; height: 100px; }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }

@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
    style="display:block;"
    data-ad-client="ca-pub-1234567890123456"
    data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
กฎ @media เป็นไวยากรณ์ CSS3 ซึ่งเบราว์เซอร์ที่ทันสมัยทั้งหมดรองรับ โปรดจำไว้ว่าการกำหนดขนาดของหน่วยโฆษณาผ่าน CSS ในสไตล์ชีตภายนอกนั้นไม่ได้รับการรองรับอย่างเป็นทางการ

การซ่อนหน่วยโฆษณา

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

ตัวอย่างการซ่อนโฆษณาสำหรับหน้าจอบางขนาด
หากต้องการแสดงโฆษณาบนหน้าจอบางขนาดเท่านั้น คุณสามารถใช้ CSS ช่วยได้ ตัวอย่างต่อไปนี้แสดงวิธีการแก้ไขโค้ดโฆษณาเพื่อใช้คิวรี่สื่อ CSS3 เพื่อซ่อนโฆษณาสําหรับหน้าจอบางขนาด:
<style type="text/css">
.adslot_1 { display:block; width: 320px; height: 50px; }
@media (max-width: 400px) { .adslot_1 { display: none; } }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
   data-ad-client="ca-pub-1234567890123456"
   data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

ในตัวอย่างนี้ ระบบจะไม่แสดงโฆษณาหากหน้าจอมีความกว้างน้อยกว่า 400px

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

ข้อมูลนี้มีประโยชน์ไหม

เราจะปรับปรุงได้อย่างไร
true
หน้า AdSense ของคุณ

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

ค้นหา
ล้างการค้นหา
ปิดการค้นหา
แอป Google
เมนูหลัก
8838466133739937978
true
ค้นหาศูนย์ช่วยเหลือ
true
true
true
true
true
157
false
false