Cách ẩn quảng cáo Adsense khi không hiển thị, hoặc hiển thị vùng trống

Đôi khi do một số vấn đề về phân phối quảng cáo (chẳng hạn như thiếu quảng cáo phù hợp,…) mà quảng cáo của Adsense không hiển thị trên website của bạn. Nó tạo ra một vùng không gian trống khá khó chịu. Để khắc phục vấn đề này, Adsense đã hướng dẫn các Admin của Website một mẹo nhỏ để chỉnh sửa.

Các đơn vị quảng cáo AdSense sẽ cập nhật sau khi một yêu cầu quảng cáo được tạo để cho biết liệu một đơn vị quảng cáo đã được thực hiện bằng một mẫu quảng cáo hay chưa được thực hiện. Bạn có thể kiểm tra tỷ lệ phần trăm đơn vị quảng cáo chưa được thực hiện bằng cách xem lại mức độ phù hợp trung bình trong báo cáo AdSense.

Sau khi một đơn vị quảng cáo đã hoàn tất việc yêu cầu một quảng cáo, AdSense sẽ thêm thông số data-ad-status vào phần tử <ins>. Lưu ý: bạn không nên nhầm lẫn giữa thông số data-ad-status với thông số data-adsbygoogle-status – thông số này được mã quảng cáo của chúng tôi sử dụng cho mục đích xử lý quảng cáo.

Tùy thuộc vào việc quảng cáo có được trả về hay không, thông số này sẽ cập nhật thành một trong các thông số sau:

AdSense sẽ làm gì với đơn vị quảng cáo không được thực hiện

Với những đơn vị quảng cáo AdSense “không được thực hiện”, chúng tôi sẽ cố gắng thu gọn đơn vị quảng cáo hoặc hiển thị một không gian trống. Chúng tôi chỉ thu gọn đơn vị quảng cáo khi việc này không kéo theo việc phải chỉnh lại trang, tức là chỉ thu gọn những đơn vị quảng cáo bên ngoài khung nhìn. Đối với tất cả những đơn vị quảng cáo không được thực hiện khác, chúng tôi sẽ giữ lại kích thước đơn vị quảng cáo và hiển thị một không gian trống.

Cách ẩn đơn vị quảng cáo không được thực hiện

Bạn có thể quyết định tăng cường hoạt động này bằng cách sử dụng CSS hoặc JavaScript. Ví dụ: nếu muốn ẩn tất cả những đơn vị quảng cáo không được thực hiện, bạn có thể sử dụng CSS để áp dụng kiểu display: none !important; cho phần tử này.

Ví dụ 1: Ẩn đơn vị quảng cáo không được thực hiện bằng cách sử dụng CSS

Bạn có thể thêm kiểu CSS sau vào trang của mình để tự động ẩn những đơn vị quảng cáo không được thực hiện:

HTML

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-1234567890"
     data-ad-slot="1234567890"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>CSS
ins.adsbygoogle[data-ad-status="unfilled"] {
    display: none !important;
}

Ví dụ 2: Chỉ hiển thị hình ảnh khi đơn vị quảng cáo không được thực hiện

Nếu một đơn vị quảng cáo không hiển thị quảng cáo, bạn có thể chọn hiển thị quảng cáo cho cùng một công ty:

HTML

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-1234567890"
     data-ad-slot="1234567890">
    <a href="/page"><img src="/backup.jpg" width="300px" height="250px"></a>
</ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

CSS

ins.adsbygoogle a {
    display: none !important;
}
ins.adsbygoogle[data-ad-status="unfilled"] a {
    display: block;
}

Ngoài ra, nếu muốn sử dụng JavaScript để cập nhật trang của mình, bạn có thể sử dụng MutationObserver để phát hiện các thay đổi trong thông số data-ad-status và thực thi mã JavaScript dựa trên những thay đổi đó.