เทคนิคการติดตั้ง Adsense แบบ Responsive

เนื่องจาก Google มีโฆษนาอยู่หลายรูปแบบ ซึ่งมีการแสดงผลแตกต่างกัน ทำให้การนำโฆษณาต่างๆมาแสดงผลบนเว็บไซต์ที่เป็น Responsive ต้องคำนึงถึงการเลือกประเภทของโฆษนาที่เหมาะสมด้วย ยกตัวอย่างเช่น
 

สังเกตุการแสดงผล Adsense ที่ส่วนหัวจากรูปตัวอย่างนะครับ จะเห็นว่า ในหน้าจอบางขนาด (ตำแหน่งที่ 1) การแสดงผล Adsense อาจให้ผลไม่สมบูรณ์ เนื่องจากการตรวจจับขนาดของ Adsense จะอิงตามขนาดของจอภาพ ดังนั้นที่ขนาดหน้าจอขนาดใหญ่ เช่น 800px ขึ้นไป Google ยังมองว่าพื้นที่ในการแสดงผล Adsense เป็นขนาดใหญ่ เลยส่ง Adsense ขนาดใหญ่มาแสดง ซึ่งเป็นผลให้การแสดงผลที่ได้ไม่ถูกต้องนัก (เนื่องจากในตำแหน่งดังกล่าว Adsense จะต้องมีการแบ่งพื้นที่ในการแสดงผลกับส่วนที่เป็น logo ของเว็บไซต์)

ในขณะที่ การแสดงผลในตำแหน่งที่ 2 จะแสดงผลได้อย่างถูกต้องมากกว่า เนื่องจากขนาดของ Adsense มีขนาดเต็มความกว้างของจอภาพ ทำให้ Adsense เมื่อเลือกขนาดใหญ่สุดมาแสดงผล จะแสดงผลได้อย่างสมบูรณ์

ดังนั้น คำแนะนำในการวางตำแหน่งที่เหมาะสมของ Adsense ก็คือ เลือกตำแหน่งของ Adsense ให้สามารถแสดงผลได้เต็มจอ
<header>
.....
</header>
<div class=center>
    <!-- Responsive ADS -->
    <ins class="adsbygoogle responsive-ads" data-ad-client="ca-pub-7053011825528736" data-ad-slot="6901780943"></ins>
    <script>(adsbygoogle = window.adsbygoogle || []).push({});</script> 
</div>
<div class=warper_top_bg>
.....
</div>

คำสั่งด้านบนเป็นการกำหนดให้แสดงผล Adsense ในแบบ Responsive โดยจะมีรูปแบบการแสดงผลในแบบแนวนอนเท่านั้น เช่นขนาด 320*50 468*60 และ 728*90 โดย class responsive-ads เป็นการกำหนดให้แสดงผลในแบบ Responsive

ในกรณีอื่นๆ เราอาจต้องการแสดงผล Adsense ลงในแถบข้าง ซึ่งตำแหน่งนี้โดยส่วนใหญ่จะมีพื้นที่ขนาดเล็ก ดังนั้นก็ควรกำหนดให้มีการแสดงผล Adsense ที่มีลักษณะเป็นสี่เหลี่ยมจตุรัสแทน เช่น 320*250 250*250 หรือ 200*200
 

ในกรณีนี้ เราสามารถกำหนดความสูงของ Adsense ที่ต้องการใช้งานลงไปในโค้ดได้ครับ ซึ่งจะเป็นการบังคับ ให้ Adsense ทำการเลือกโฆษณาที่มีความสูงเท่ากับพื้นที่แสดงผลเท่านั้นมาแสดง
<aside>
  .....
  <section class=center>
       <!-- Square ADS -->
       <ins class=adsbygoogle style="height:250px;" data-ad-client="ca-pub-7053011825528736" data-ad-slot="6901780943"></ins>
       <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

  </section>
</aside>

สิ่งที่แตกต่างจากโค้ดแรก คือมีการกำหนดความสูงของพื้นที่โฆษณาเพิ่มเข้ามา และไม่มีการระบุ class responsive-ads

ตัวอย่างเว็บไซต์ขายหนังหรือ แผ่นซีดี ที่มีการติดโฆษณา Adsense http://movie.webshopready.com

Relate