모바일에서 구글 애드센스 광고를 보면 상단 또는 하단에서 슬며시 등장하는 앵커 광고가 있습니다. 이 앵커 광고는 구글 애드센스에서 자동 광고 설정한 경우 나타납니다. 다른 광고 단위와는 다르게 스크롤을 계속 내리더라도 방문자가 블로그에 머무는 동안 계속 노출됩니다.
그런데 아직 최적화가 안 되어 있어서 그런지 앵커 광고가 나타날 때 원래 기존의 다른 요소들을 밀어내고 빈 공간을 만듭니다. 헤더 메뉴 위치가 아래로 이동하고 레이아웃이 엉망이 되어버립니다.
정상적으로 앵커 광고를 표시하려면 어떻게 해야 할까요? 상단에 여백을 수정해서 앵커 광고가 내려올 때도 레이아웃이 고정되도록 해봅시다.
앵커 광고가 나타날 때 헤더 위치를 고정하는 방법
이 방법은 한 줄의 코드만 적으면 끝납니다.
1. 먼저 구글 애드센스 앵커 광고를 활성화했는지 확인합니다.
2. 그런 다음 테마-HTML 편집으로 이동하여 CSS 코드 중에서 body를 찾습니다.
3. 기존의 코드를 제거하지 않고 아래의 코드를 추가합니다.
padding:0px !important;
4. 결과는 다음과 같습니다.
5. 변경 사항을 저장합니다.
왜 이런 현상이 나타나는지?
2021년 7월 19일부터 구글 애드센스 앵커 광고가 PC 화면에서도 나타나도록 업데이트되었습니다. 애드센스 스크립트가 작동하면 구글에서 자동으로 CSS를 추가해 주는데 최적화가 되지 않은 것 같습니다.
자동으로 추가된 CSS는 body(본문) 영역의 padding(안쪽 여백) 속성입니다. 따라서 구글 애드센스에서 추가한 CSS 코드의 영향을 받지 않으려면 '!important'가 필요합니다.
제 테마는 기본 테마인데 아마 다른 테마도 그럴 겁니다. 다른 테마도 똑같이 CSS body 코드를 찾아서 위 방법대로 수정하시면 됩니다.
헤더 메뉴가 광고에 의해 가려지지 않도록 앵커 광고를 하단에 배치하는 것도 좋은 방법일 수 있겠네요.
유용하기를 바랍니다.