Google Adsense error - No Slot Size For Availablewidth

Google Adsense cung cấp cho các nhà xuất bản nội dung các loại Quảng cáo, kích thước và định dạng khác nhau có thể được sử dụng cho các vị trí Quảng cáo của họ để làm cho AD kết hợp tốt trong bố cục trang web hoặc chủ đề. Một bước quan trọng trong cấu hình đó là chọn Kích thước quảng cáo phù hợp, vì có một số kích thước AD thực sự hoạt động rất tốt và các kích thước này tự nhiên phù hợp với trang web khiến nó hấp dẫn khách truy cập, do đó mang lại tỷ lệ nhấp tốt hơn.

Đối với các trang web bố cục cố định, việc chọn kích thước tốt nhất là dễ dàng dựa trên phương pháp dùng thử và phản hồi. Nhưng đối với một trang web phản hồi, việc chọn các kích thước Quảng cáo khác nhau cho các độ rộng màn hình thiết bị khác nhau là một nỗi đau thực sự. Vì vậy, để tránh quyết định thủ công này về hiệu suất AD & kích thước tốt nhất, Google Adsense error đã giới thiệu các đơn vị Quảng cáo đáp ứng.
Làm thế nào nó hoạt động ?
Khi trang được tải bị lỗi thế này " adsbygoogle.push() error: No slot size for availableWidth=0 ", các Đơn vị quảng cáo phản hồi này sẽ đọc kích thước của ngăn chứa cha mẹ để có không gian có sẵn (chiều rộng * chiều cao) và sau đó, nó sẽ tự động hiển thị kích thước AD tốt nhất phù hợp chính xác và hoạt động tốt hơn cho kích thước màn hình đó. Đây thực sự là một tính năng tuyệt vời giúp tích hợp Adsense đơn giản hơn trên các trang web đáp ứng. Các đơn vị AD Responsive cũng có thể được sử dụng trên các bố cục trang web cố định mà không có bất kỳ vấn đề nào vì màn hình của nó dựa trên bộ chứa chính.

Sự cố với bố cục đáp ứng làm bật chế độ hiển thị của phần AD
Khi bạn có yêu cầu thiết kế để chỉ hiển thị một AD đáp ứng trên các chế độ xem trên máy tính để bàn và ẩn nó trên chế độ xem trên thiết bị di động do hạn chế về không gian. Yêu cầu hiển thị mâu thuẫn trực tiếp với chính sách Quảng cáo Adsense, vì ẩn quảng cáo bằng cách sử dụng hiển thị: không có hoặc sử dụng phần tử HTML nào khác không được phép bất cứ lúc nào trên trang của bạn.
Tập lệnh AD đáp ứng sẽ đưa ra lỗi sau trong bảng điều khiển dành cho nhà phát triển

Uncaught TagError: adsbygoogle.push() error: No slot size for availableWidth=0

Lưu ý: Lỗi này có thể xảy ra khi vùng chứa cha không có chiều rộng vì

hoặc nó được ẩn bằng cách sử dụng display: none hoặc
phần tử cha (div) không có thứ nguyên (nghĩa là chiều rộng hoặc chiều cao) vì định vị CSS của nó được đặt là tuyệt đối hoặc nổi.
Tôi đã phải đối mặt với vấn đề này trong khi ẩn đơn vị AD phản hồi hiện đang hiển thị ở phía bên phải của trang web này, trên màn hình thiết bị vừa và nhỏ.

Chính thức cho phép sửa đổi mã
Để giải quyết yêu cầu tầm thường này, Google Adsense đã cho phép một số sửa đổi chính thức đối với tập lệnh Quảng cáo thông qua các truy vấn phương tiện CSS3. Các sửa đổi như sau

1. Bạn không thể sử dụng tính năng kiểm soát định dạng hiển thị AD phản hồi, tức là, bạn nên xóa thuộc tính AD nâng cao `data-ad-format`. [Thẻ này dùng để điều khiển hiển thị AD, tức là, hiển thị AD dọc, ngang hay hình chữ nhật trên khe]
2. Thêm tên lớp CSS (ví dụ: bộ chọn, phải_side_ad) vào thẻ chèn chèn AD.
3. Sau đó, trong CSS (thẻ kiểu), thêm truy vấn phương tiện cho bộ chọn đơn vị AD của bạn chỉ định các điểm dừng khi AD sẽ hiển thị và không nên. Cũng xác định chiều rộng và chiều cao nếu AD nằm trong cha mẹ tuyệt đối.
Dưới đây là tập lệnh Adsense và CSS hiện đang được sử dụng bởi Quảng cáo bên phải trong trang web này., Được cung cấp bên dưới để bạn tham khảo.

<!-- index.html -->
<div class="push-rightbar">
 .... content ...
 <div align="center" class="push-rightbar-holder">
  <!-- RightBar_Unit -->
  <ins class="adsbygoogle rightbar-unit"
    data-ad-client="ca-pub-XXXXXXXXXXXXXXXXX"
    data-ad-slot="YYYYYYYYYY"></ins>
  <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
  </script>
 </div>
</div>

/* style.scss */
$rightbar-lg-adsize: 160px;
$rightbar-xllg-adsize: 300px;
$rightbar-lg-adsize-gutter: $rightbar-lg-adsize + $grid-gutter-width;
$rightbar-xllg-adsize-gutter: $rightbar-xllg-adsize + $grid-gutter-width;
.push-rightbar {
    position: relative;
    @media(min-width:$screen-lg-min) {
        padding-right: $rightbar-lg-adsize-gutter;
    }
    @media(min-width:$screen-xllg-min) {
        padding-right: $rightbar-xllg-adsize-gutter;
    }
    &-holder {
        display: none;
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        padding: $gutter-half;
        width: $rightbar-lg-adsize-gutter;
        @media(min-width:$screen-lg-min) {
            display: block;
        }
        @media(min-width:$screen-xllg-min) {
            width: $rightbar-xllg-adsize-gutter;
        }
        .rightbar-unit {
            display: block;
            width: $rightbar-lg-adsize;
            min-height: 600px;
            @media(max-width:$screen-md-max) {
                display: none;
            }
            @media(min-width:$screen-xllg-min) {
                width: $rightbar-xllg-adsize;
            }
        }
    }
}

Hoặc trong CSS đơn giản

.push-rightbar {
    position: relative
}
.push-rightbar-holder {
    display: none;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    padding: 15px;
    width: 190px
}
@media (min-width: 1200px) {
    .push-rightbar {
        padding-right: 190px
    }
    .push-rightbar-holder {
        display: block
    }
}
@media (min-width: 1366px) {
    .push-rightbar {
        padding-right: 330px
    }
    .push-rightbar-holder {
        width: 330px
    }
}
.push-rightbar-holder .rightbar-unit {
    display: block;
    width: 160px;
    min-height: 600px
}
@media (max-width: 1199px) {
    .push-rightbar-holder .rightbar-unit {
        display: none
    }
}
@media (min-width: 1366px) {
    .push-rightbar-holder .rightbar-unit {
        width: 300px
    }
}

 Nếu bạn có bất kỳ truy vấn nào về thiết lập CSS hoặc liên quan đến sửa đổi. Vui lòng liên lạc thông qua ý kiến.