Cách ẩn các vị trí quảng cáo INPAGE của google adsense nếu không có quảng cáo hiển thị

Các bạn sẽ gặp trường hợp nếu không có quảng cáo hiển thị thì bị khoảng trống lớn làm mất thẩm mỹ website.

Dưới đây là các dạng format giúp ẩn khoảng trống nếu không có quảng cáo.

Dựa vào thông số trạng thái trả về của google adsense là data-ad-status=“unfilled”

Code Ẩn / hiển thị dạng inpage adsense chiều cao 600px, rộng 300px

Bản thân định dạng inpage là do dev phải code chứ mặc định google adsense không hỗ trợ, bạn chỉ có thể tạo ads với kích thước cao 600px, rộng 300px rồi dùng nó chèn vào code inpage do bạn tạo ra.

<div id=”ad-container” class=”inpage_area hide-pc”>
<div class=”inpage_content”>
<center>
<div class=”ads-position ads-inpage mt20 mb20″ data-device=”mobile”>
<!–adsense inpage–>
<script async src=”https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<!– wikiany-mobile-inpage-300×600 –>
<ins id=”adsense-ad” class=”adsbygoogle”
style=”display:inline-block;width:300px;height:600px”
data-ad-client=”ca-pub-6071525676516988″
data-ad-slot=”9763160948″></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</center>
</div>
</div>

<style>
@media screen and (min-width: 1000px) {
.hide-pc {
display: none; /* Hide on large screens */
}
}
.inpage_area {
height: 666px;
width: 100%;
display: none; /* Hide by default */
}
.inpage_content {
position: absolute;
width: 90%;
height: 666px;
clip: rect(0px, 390px, 666px, -10.5px);
}
.ads-inpage {
display: inline-block;
width: 390px;
height: 666px;
position: fixed;
top: 0;
left: 0;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);
}
</style>

<script>
window.onload = function() {
var i = 0;
setTimeout(function checkAdStatus() {
var adsenseAd = document.getElementById(‘adsense-ad’);
var adStatus = adsenseAd.getAttribute(‘data-ad-status’);

if (adsenseAd && (adStatus === ‘unfilled’ || adStatus === null)) {
var inpageArea = document.querySelector(‘.inpage_area’);
inpageArea.style.display = ‘none’; // Hide when ad is unfilled or status is null
} else {
var inpageArea = document.querySelector(‘.inpage_area’);
inpageArea.style.display = ‘block’; // Show if ad is filled
}
i++;
console.log(‘Iteration inpage adsense check ‘, i, ‘: data-ad-status = ‘, adStatus);

// Stop looping after 10 iterations
if (i < 10) {
setTimeout(checkAdStatus, 500);
}
}, 500);
};
</script>

<!–remove ads code when active on a pc device–>
<script>
function handleAdDisplay() {
var adContainer = document.getElementById(‘ad-container’);
var screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

if (screenWidth > 400 && adContainer) {
adContainer.parentNode.removeChild(adContainer);
}
}

// Call the function when the page loads
handleAdDisplay();

// Call the function when the screen size changes
window.onresize = function() {
handleAdDisplay();
};
</script>

<style>
/* Setup auto-hide empty space when all Adsense positions with data-ad-status = unfilled */
ins.adsbygoogle[data-ad-status=”unfilled”] {
display: none !important;
}

</style>

Code ẩn tất cả các quảng cáo adsense nếu không hiển thị quảng cáo với data-ad-status = unfilled

Bạn chèn vào đầu thẻ head đoạn css dưới là sẽ ok, code dưới do google cung cấp.

<style>
/* Ẩn tất cả vị trí ads của adsense nếu data-ad-status = unfilled */
ins.adsbygoogle[data-ad-status=”unfilled”] {
display: none !important;
}

</style>

Xem thêm nguồn tại https://support.google.com/adsense/answer/10762946?hl=en