Google เองก็รับทราบถึงปัญหานี้ดี และได้ออกโฆษนาแบบใหม่ที่สามารถรองรับการแสดงผลบนมือถือได้ (แต่ ณ. ปัจจุบันที่เขียนบทความนี้ โฆษณานี้ยังเป็นรุ่น เบต้าอยู่)
การติดตั้ง Adsense
ขั้นตอนแรก login ไปยัง https://www.google.com/adsense/app เลือก สร้าง หน่วยโฆษนาใหม่ ในหน้านี้ให้เลือกขนาดโฆษณา เป็น หน่วยโฆษณาแบบโต้ตอบ (Responsive ad unit) หลังจากตั้งค่าต่างๆ เรียบร้อยแล้ว ให้กดปุ่ม บันทึกและรับโค้ด
ในขั้นตอนนี้จะมีการเปิดหน้าต่างใหม่ขึ้นมา ให้เลือกไปที่โหมด ขั้นสูง ครับ จะได้โค้ดตัวอย่างมา ประมาณนี้
<style>
.responsive-ads { width: 320px; height: 50px; }
@media(min-width: 500px) { .responsive-ads { width: 468px; height: 60px; } }
@media(min-width: 800px) { .responsive-ads { width: 728px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Responsive ADS -->
<ins class="adsbygoogle responsive-ads" style="display:inline-block" data-ad-client="ca-pub-7053011825528736" data-ad-slot="6901780943"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>การนำโค้ดที่ได้ไปติดตั้งบนเว็บไซต์
Template ของ WebShopReady มีการรองรับ Responsive ADS แล้วครับ ดังนั้น โค้ด CSS ไม่ต้องนำไปใช้ครับ สิ่งที่ต้องนำไปใช้มีเพียงโค้ด script และ ins เท่านั้น<head>
.....
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
.....
</head>โค้ด script นำไปแทรกไว้ในส่วน head ได้เลยครับ ในกรณีที่มีโฆษณาหลายหน่วย ก็ให้ติดตั้งโค้ดนี้เพียงชุดเดียวเท่านั้นครับ
<!-- Responsive ADS -->
<ins class="adsbygoogle responsive-ads" data-ad-client="ca-pub-7053011825528736" data-ad-slot="6901780943"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>โค้ดด้านบนคือโค้ดของหน่วยโฆษณาในแต่ละหน่วย ซึ่งจะแสดงผลในแบบ Responsive
ในกรณีที่มีหลายหน่วย หรือ ใช้ร่วมกับโฆษณาในแบบอื่นๆ ก็สามารถแทรกโค้ดโฆษณาปกติตามตำแหน่งที่ต้องการได้เลยครับ