구글 애드센스 세로길이(사이즈) 고정 시키는 방법

모바일 화면에 적합한 화면 구성을 하고 싶었다.
여러군데 글을 읽으며 공감했던 부분은
모바일 브라우저에서 첫 화면이 열렸을때, 
광고가 화면의 절반 이상을 채우게 되면 이탈률이 매우 높다는 것이였다.

생각해보면 당연한 현상이다.
수익을 위해서 힘들게 컨텐츠를 만드는 것은 이해하지만,
보려고 하는 컨텐츠가 있는지 조차 알 수 없게 가려버리면
금방 발걸음을 돌리게 될 것이다.

네이버 메인화면이나 카카오톡의 상단 광고를 보더라도
거의 80px 에서 120px 사이로 짐작되는 작은 크기이다.
해외에서 가장 애드센스 수익이 높다고 알려진
위키하우의 경우에도 첫번째 나오는 본문광고의 크기가
대략 100px에서 120px사이 정도로 추측된다.
눈짐작으로 잰거라 정확한 픽셀사이즈는 모르겠으나,
핵심은 고객이 접하는 첫화면을 광고로 도배하는 것이 좋지 않다는 사실이였다.

내가 원했던 위치는 최상단 바로 밑이였다.
사이트 제목과 타이틀 사이.
카카오톡 채팅창의 광고가 예뻐보여서 그렇게 해보고 싶었다.
지금도 완성형은 아니지만, 
대략 원하는 위치에 적용하는데에 성공했다.
검색하고, 적용해보고 하다보니 두시간을 훌쩍 넘겨버렸다.
비슷한 고민을 하는 분들을 위해 기록을 남겨보려 한다.

1) 구글 애드센스에서 '디스플레이 광고' 새로 만들기
2) 복사한 코드를 세로 사이즈 고정 되도록 수정하기
3) 티스토리 블로그 타이틀 위에 추가하기
4) 새로고침 해보며 마음에 드는 크기로 조절하기

순서를 정해보면 이정도로 정리가 될 것 같다.

1) 구글 애드센스에서 '디스플레이 광고' 새로 만들기
이 부분은 워낙 많은 블로그에서 기술해 놓아서 그냥 검색해보면 될 듯 하다.

2) 복사한 코드를 세로 사이즈 고정 되도록 수정하기

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 사자고구미 상단1 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxx"
     data-ad-slot="xxxxxx"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

반응형 광고로 새로 생성한 코드는 대략 이런 식일 것이다.
여기서 변경해줘야 하는 부분은
style / format / responsive 정도이다.

아래의 첨부화면처럼
height: 100px; 추가 (세로 길이를 의미하며, 숫자를 조정하여 높이를 조정하면 됨)
data-ad-format = "horizontal" 로 변경
data-full-width-responsive = "false" 로 변경한다.

3) 티스토리 블로그 타이틀 위에 추가하기
이 부분이 좀 힘들었는데,
<s_article_rep> 를 찾으면 된다고 한다.
블로그 관리자 > 스킨편집 > html편집으로 클릭하여 들어가면,
위와 같은 코드들이 잔뜩 있는데, 
ctrl + F 를 눌러 검색창을 키고, 
<s_article_rep> 를 찾으면 쉽다.
내가 사용하는 매거진 스킨에서는 544라인 정도에서 찾아졌다.
<!-- sub page --> 태그 위쪽에
수정한 애드센스 코드를 붙여넣기 하면 된다.

4) 새로고침 해보며 마음에 드는 크기로 조절하기
이후에는 상단의 적용 버튼을 눌러서 반영된 크기를 보면서 조절해가면 된다.
아래의 화면은 코드 옆에 붙어 있는 미리보기 화면이다.
해당 화면에서 새로고침 하며 확인해도 되고,
직접 스마트폰을 통해 확인해도 된다.
바로바로 반영되니 확인하기는 편해서 좋다.

최종 결과화면

개인적으로는 타이틀 위쪽 여백이 마음에 들지 않아서
이 부분을 더 붙이려고 노력중이다.
매거진 스킨의 디자인이 원래 이런건데,
css를 잘 모르는 입장에서 수정하기가 쉽지 않다.
이 부분도 성공하면, 추가로 기록해 놓을 생각이다.

---

글을 마무리하고, 대략 1시간 정도가 더 지난듯 하다.
자야 하는데...
일단, 모바일은 css 변경하는 위치를 찾았다.
반응형 디자인이라 크기별 설정하는 위치가 다른 것 같다.

모바일은 아래의 화면처럼,
padding: 40px 24px 0 24px;
이 코드를 아래처럼,
padding: 10px 24px 0 24px; 
이런식으로 변경해서 조절하면 되는 듯 하다.

최종 완성화면

원하는 모양과 비슷하게 만들어져서 뿌듯하다.