data-ad-status 매개변수를 사용하여 잔여 광고 단위 숨기기

광고 요청이 이루어지면 광고 단위가 광고 소재로 채워졌는지 아니면 채워지지 않고 남아 있는지를 나타내기 위해 애드센스 광고 단위가 업데이트됩니다. 애드센스 보고서에서 평균 노출 범위를 검토하여 잔여 광고 단위의 비율을 확인할 수 있습니다.

광고 단위에서 광고 요청을 완료하면 애드센스에서 data-ad-status라는 <ins> 요소에 매개변수를 추가합니다. 참고: data-ad-status를 광고 코드에서 광고 처리 목적으로 사용하는 data-adsbygoogle-status와 혼동해서는 안 됩니다.

이 매개변수는 광고가 반환되었는지 여부에 따라 다음 중 하나로 업데이트됩니다.

data-ad-status="filled"	광고가 광고 단위로 반환되어 현재 게재 중입니다.
data-ad-status="unfilled"	반환된 광고가 없으며 광고 단위가 비어 있습니다.

애드센스에서 잔여 광고 단위가 처리되는 방식

애드센스 광고 단위가 '채워지지 않은' 경우 광고 단위가 접힌 상태 또는 빈 공간으로 표시됩니다. 광고 단위가 페이지 리플로우를 유발하지 않을 때만 광고 단위가 접힙니다. 즉, 표시 영역 바깥의 광고 단위만 접히는 것입니다. 다른 모든 잔여 광고 단위의 경우 광고 단위 크기가 유지되고 대신 빈 공간이 표시됩니다.

잔여 광고 단위를 숨기는 방법

 (고급) CSS 또는 자바스크립트를 사용하여 이 동작을 보강할 수 있습니다. 예를 들어 모든 잔여 광고 단위를 숨기려는 경우 CSS를 사용하여 요소에 display: none !important; 스타일을 적용하면 됩니다.

예 1: CSS를 사용하여 잔여 광고 단위 숨기기

페이지에 다음 CSS 스타일을 추가하여 잔여 광고 단위를 자동으로 숨길 수 있습니다.

HTML
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-1234567890123456"
     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;
}

예 2: 광고 단위가 채워지지 않은 경우에만 이미지 표시하기

광고 단위에 광고가 표시되지 않으면 대신 하우스 광고를 게재할 수 있습니다.

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-1234567890123456"
     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;
}

또는 자바스크립트를 사용하여 페이지를 업데이트하려는 경우 MutationObserver를 사용하여 data-ad-status 매개변수의 변경사항을 파악하고 이러한 변경사항을 기준으로 자바스크립트 코드를 실행할 수 있습니다.

제한사항

data-ad-status 매개변수는 상단 창에 있는 광고 단위에만 추가됩니다. 즉, 교차 도메인 창을 통해 게재되는 광고 단위의 경우 data-ad-status 매개변수가 광고 단위에 추가되지 않습니다.

또한 data-ad-status 매개변수 변경 시 애드센스 광고 단위가 표시되도록 하기 위해 처음부터 광고 단위를 숨기는 것은 권장하지 않습니다. 처음에 광고 단위가 페이지에 표시되지 않으면 이 광고 단위에 대해서는 광고 요청이 실행되지 않을 수 있습니다.