개발
구글 애드센스 반응형 광고 높이 설정하기
지난번 글에서 구글 애드센스 광고 코드를 반응형으로 지정 한 이후 div 태그를 통해 광고가 들어갈 위치에 애드센스 코드를 넣는 방식과
data-full-width-responsive
등의 태그 속성으로 제어하는 코드를 알아보았다.
구글 애드센스 모바일 반응형 광고 높이 조정하기
본 글은 구글 애드센스의 반응형 광고를 달때 로딩되는 광고가 원하는 크기보다 너무 큰 광고가 로딩될때 이를 해결하기위한 내용입니다. 모바일 반응형 광고우리가 구글 애드센스에서 광고 단위 기준으로 디스플레...
https://erulabo.com/270
하지만 이런 코드를 이용하면 애드센스 입장에서는 그냥 화면에 광고를 "크게", "잘보이게" 로드하는 특징을 지녀서 모바일의 경우에는 여전히 크기가 부담스러운 광고들이 많이 뜬다.

물론 솔직히 이정도 높이(250px)의 광고가 그렇게 부담이 되진 않지만, 문제는 반응형 코드는 모바일 광고 로딩이 드럽게 안된다는 부분이다.
거의 세번에 한번정도는 저 영역 로딩이 안되서 내가 세팅해둔 플레이스홀더 이미지가 보이는 경우가 많고 심지어 저 광고 높이만큼 영역만 잡아먹게되어서 처음으로 페이지를 방문하는 유저 입장에선 여간 좋은 경험을 시켜주기가 힘들다고 매번 느꼈다.
난 데스크탑뷰에서는 728x90의 광고가 보여주길 희망하고 모바일에서는 가로는 반응형, 세로는 90~200px 사이의 광고가 나와줬으면 좋겠는데 완전 자유 반응형으로 하면 해당하는 광고가 잘 안나오긴한다.
관련내용해서 검색을 좀 해봤는데, 어쩔수없다라는 글과 여러 블로거들의 시도글을 보게되었고 나도 반복적으로 이거저거 시도해보다가 먹히는게 나와서 한번 여기에 그 코드를 공유해보고자 한다.
<div class="grp_main_ad">
<div align="center" class="ad">
<ins class="adsbygoogle" style="display:block;min-width:300px;max-width:728px;width:100%;min-height:90px;max-height:200px;height:100%" data-ad-client="ca-pub-000000" data-ad-slot="00000000"></ins>
</div>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
Copy
나는 광고 코드를 이렇게
div.ad
태그안에 두고 쓰는데, 핵심 코드는 광고 태그인 ins에 인라인으로 직접적으로 광고 크기를 전달하는 방법이다.display: block;
min-width: 300px;
max-width: 728px;
width: 100%;
min-height: 90px;
max-height: 200px;
height: 100%
Copy
실제 적용한 스타일은 위와 같다.
태그를 블록 태그로 바꾸고 가로와 세로높이를 100%로 가득차게 세팅해주고 그 가로와 세로의 최소/최대높이값을 지정해주는 것이다.
나같은경우는 모바일화면의 최소값을 300px로 잡고 피시화면의 최대는 728px로 잡았고, 높이는 최소 90으로 잡았다.
생각보다 가로는 원하는대로 잘 작동해주는데, 세로의 경우에는
min-height
수치만 정상적으로 먹히는것 같다.div 내부요소의 높이가 변동폭이라 div 태그에 나는 min-height: 90px 를 적용해 두었고 위 코드를 바탕으로 랜더링 되는 광고는 아래와 같다.


이제 모바일에서도 높이 90px에 맞춘 작은 광고가 나와서 드디어 좀 볼만해진것 같다.
How to restrict height of Google responsive Ads? - Google AdSense Community
https://support.google.com/adsense/thread/155394399/how-to-restrict-height-of-google-responsive-ads?hl=en
실제 테스트할때 제대로 들어 맞았던 사례 예시다.
근데 이 답변내용에도 있듯이 코드 구현으로인한 결과는 각자의 사이트의 스타일이나 구성에 따라서 다를수가 있어서...
결국 본인 사이트에 맞는 답을 찾아내야 하는게 정답인것 같다.
끝
#블로그 #광고
0
개의 댓글
개발 카테고리의 다른 글

02/18
AWS Route53 DKIM 입력시 뜨는 CharacterStringTooLong 오류 해결 방법
문제 발생여느때와 같이 서버 만지작 거리며 일을하다가 관리하는 업체에서 네이버 웍스 메일을 사용한다고 DNS에 웍스의 MX 레...

02/12
일일 조회수 변동치 추적을 위한 테이블 설계
게시글 조회수 카운터데이터베이스 테이블을 이용해 게시글이나 아티클을 구현하다보면 게시글의 조회수를 따로 저장해 두는 경...

02/05
구글 검색 상위 순위를 위한 리치 스니펫 작성
검색엔진을 위해서 우리는 각종 SEO에 필요한 메타정보를 페이지 상단에 배치해서 사용한다.대표적으로 SNS 공유를 위한 오픈그...