구글 애드센스(AdSense) 사용 시 생기는 빈 공간 현상, 해결코드, 디테일, 종류별로 설명함
출력할 광고가 없을 때(data-ad-status="unfilled")
자동 or 수동으로 특정 위치에 광고가 삽입되었으나, 애드센스 매커니즘으로 인해 적절한 광고가 매칭되지 않았을 때 해당 광고는 data-ad-status="unfilled" 속성을 가지게 된다.
이 때 단순히 무 조건으로 빈 공간을 없애려면 아래 코드를 css에 넣으면 끝이고, 디테일을 알고 싶으면 그 아래 내용까지 참조하면 됨.
ins.adsbygoogle[data-ad-status="unfilled"] {
display: none !important;
}이 채워지지 않은 광고는 랜더링된 위치에 따라 확률적(엄밀히는 랜더링 구조와 로드 타이밍에 따라 유동적이지만, 같은 조건 하에는 고정적. 뭔 소린지 모르면 그냥 확률적이라고 이해하면 됨)으로 빈 공간이 생기게 됨.
보통 ATF(Above-the-fold content, 스크롤 없이 볼 수 있는 콘텐츠) 에서는 높은 확률(위와 같음)로 빈 공간으로 결정되고, BTF(Below-the-fold content, 스크롤 후 볼 수 있는 콘텐츠) 에서는 높은 확률로 빈 공간이 제거되어 출력됨.
이건 의도적 설계인데, CLS(Cumulative Layout Shift, 누적 레이아웃 이동)를 고려해, 접근성 면에서 ATF에서는 빈 공간으로 두고, BTF에서는 없애는게 적절하기 때문에 그런 것.
하지만 말했다시피 사이트 구조에 따라 동적인 부분이기 때문에, 애드센스의 기본값 대로면 의도한 대로 작동하지 않을 있다.
때문에 위 처럼 하면 모든 상황에 빈 광고를 없애고, 반대로 모든 상황에 빈 공간을 출력하려면
ins.adsbygoogle[data-ad-status="unfilled"] {
display: block !important;
}하면 될 일이고, 명확하게 상단 ATF콘텐츠에 고정하는 상단광고가 있고, 그 외에는 빈 공간을 없애고 싶을 때에는, 상단 광고의 애드센스 코드를 삽입할 때
<ins class="adsbygoogle"
...광고코드 생략...이 부분에 클래스명을 추가해 아래처럼 만든 뒤 삽입하고
<ins class="adsbygoogle AD_Fixed"
...광고코드 생략...그에 따라 CSS 파트에서 아래처럼 설정하면, AD_Fixed 클래스를 직접 지정한 광고는 어떤 상황이든 고정영역을 가지게 되어 CLS점수를 떨어트리지 않고, 그 외에 상황에서는 빈 공간을 없애 쾌적한 레이아웃 구성이 가능하다.
ins:not(.AD_Fixed)[data-ad-status="unfilled"] {
display: none !important;
}알 수 없는 빈 공간(fencedframe, #ps_caff)
애드센스 발동을 위한 기본 코드를 헤더에 넣으면, 확률적으로 페이지 하단에 빈 공간(300x150)이 형성되는 현상.
마찬가지 단순한 해결법은 아래 코드를 CSS에 넣으면 끝이고, 디테일은 이하 참조.
fencedframe#ps_caff{display:none!important}정확히 분석하면 원인을 찾을 수 있겠지만, 어쨌든 애드센스 or 애드센스 자동광고 시스템 or 애드센스로 인한 리캡챠 등의 서드파티로 인해, 사이트 하단 HTML을 보면 아래처럼 특정 영역이 생성된다.
<fencedframe id="ps_caff" style="border: 0px;"></fencedframe>말했다 시피 정확한 원인은 모르지만 애드센스 이하의 동작구현에서 발동되는 코드(광고추천 매커니즘을 위한 부분으로 추측됨, 아마도 이 기능일듯)가 만들어 내는 영역이다.
어차피 애드센스에서 자체적으로 수정해 주지 않는 이상 이유를 안다고 해도 해결법이 같기 때문에(저 코드를 써야됨) 면밀한 분석은 하지 않았다.