Home

구글 애드센스 반응형 모바일 광고 여백 설정하기

과거의 비해 애드센스의 정책 허용범위도 대폭 늘어나고 많은 기능들이 추가되어 사이트에 광고 구현하기가 한결 편해졌는데요. 


반응형 광고를 적용할 경우 변화하는 환경에 대응하여 웹문서의 폭에 맞추어 자동적으로 폭에 맞는 광고가 나오게 됩니다. 여기서 문제는 크기가 지정되지 않은 반응형 자동 광고의 경우 현재 모바일에서 스킨의 여백이 지정되어 있음에도 이를 무시하고 자체 적으로 폭을 100% 맞추어 게시를 하게 됩니다.


모바일 화면에서 옆트임?? 꽉 찬 광고

반응형 스킨으로 상단 본문 부분의 좌우 여백이 10% 정도씩이 있지만 아래 광고는 100% 꽉 찬 광고가 나오고 있습니다. 위 같은 이미지 광고의 경우는 별 거부감 없이 조화를 잘 이루어지는 편이라 어떤 면으로는 의도할 수도 있는 방식일 수 있습니다.



이런 종류의 텍스트 광고나 가로 형식으로 혼자 전체 폭으로 차지할 때 보기가 살짝 애매하다는 문제가 발생합니다. 실제로 스마트폰으로 보는 것보단 깔끔하게 보이지만 폰으로 보면 여간 불편한 게 아니더군요.



이리저리 사방팔방 알아보니 구글 애드센스(https://support.google.com/adsense/answer/7569699? hl=ko)에 해결책을 있더군요. 자동 삽입 광고 레이아웃이라고 되어있지만 일반 반응형 광고도 전체 폭으로 나오는 경우 위 내용이 적용 가능합니다.



data-full-width-responsive="false"

위 코드를 광고 코드에 추가로 적용해주면 스킨에 적용된 여백을 적용하여 깔끔하게 나오게 됩니다. 



코드를 추가해주면 여백이 잘 적용되어 본문 폭에 맞추어 깔끔하게 적용이 됩니다.



사이트의 구성이나 광고 배치, 취향에 따라서 전체 폭을 차지하는 디자인이 더 효율적일 수도 있지만 개인적으로 광고를 그때그때 효과적으로 배치를 하지 않는 타입이라 일체감을 주기 위해 'data-full-width-responsive="false"'코드를 추가하는 것이 보다 좋아 보이네요.

'블로그&인터넷/기타' 카테고리의 다른 글 : more

댓글을 달아 주세요

.

Secret

티스토리 툴바