코딩팩토리 님의 '효율적인 애드센스 광고배치 전략' 글을 보고 동기부여 받아 '친절한 효자손' 님 가이드에 맞춰 제 블로그에 적용 과정을 정리한 글 입니다.
블로그를 운영하면서 작더라도 지속적인 개선이 될 수 있도록 능력자 분들의 블로그를 돌아다니며 공부하고 있습니다. 최근 두 블로그(친절한 효자손님 블로그, 코딩팩토리님 블로그)에서 공부하고 있었는데, 두 블로그 모두 상단에 2개의 애드센스 배너가 적용되어 있는 것을 알게 되었습니다.
호기심이 생겨 좀더 검색하다보니 '코딩팩토리'님이 작성하신 '효율적인 애드센스 광고배치 전략' 글에서 상단 애드센스 2개 배치 효과에 대해 알 수 있었고, 실제 적용 방법에 대한 안내는 없어 '친절한효자손'님 블로그에 소개된 방법으로 적용하였습니다.
상단 애드센스 2개 배치 전략
친절한효자손님의 접근은 아래와 같습니다.
상단 2개 광고 배치를 위해 총 3개의 광고 블럭 사용
.adsense_1: 실제 광고가 적용될 블럭1.adsense_2: 실제 광고가 적용될 블럭2.adsense_empty:.adsense_1과.adsense_2사이의 공간 활용을 위한 블럭
접속 환경에 따라 광고 블럭의 크기 및 개수 조정
- 가로 넓이(min-width)가 799 이하 :
.adsense_1블럭만 표시 - 가로 넓이(min-width)가 800 이상 :
.adsense_empty과.adsense_2블럭 추가 표시
※ 크기는 min-width 값에 따라 변경되지만 각 블럭은 최대 width: 336px, height: 280px을 넘지 않음
- 가로 넓이(min-width)가 799 이하 :
1. 반응형 애드센스 생성 및 코드 추출
상단 2개 애드센스를 적용하기 위해서는 구글 애드센스의 반응형 애드센스 코드가 필요합니다. 제 애드센스 코드 샘플은 아래와 같으며 해당 코드에서 data-ad-client와 data-ad-slot의 값을 추출해야 합니다.
추출이 필요한 부분
data-ad-client= "ca-pub-16자리숫자"data-ad-slot= "10자리숫자"
반응형 애드센스 코드 샘플
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 반응형-수평 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxx"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>2. 상단 2개 애드센스 배치를 위한 애드센스 코드 생성
위에서 추출한 data-ad-client와 data-ad-slot의 값은 아래 파일을 받아 수정하여 주시면 됩니다. 수정이 필요한 위치는 총 4군데로 data-ad-client와 data-ad-slot를 각 2번씩 변경해 주시면 됩니다.
(참고 : 첨부파일 내의 53째 줄과 121째 줄에 수정할 부분이 있습니다.)
예제 코드
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle adsense_1" data-ad-client="<mark>ca-pub-xxxxxxxxxxxxxxxx</mark>" data-ad-slot="<mark>xxxxxxxxxx</mark>">3. 티스토리 수정된 애드센스 코드 적용
이제 마지막 단계입니다. 반응형 애드센스 코드에서 필요한 값을 추출하여(#1) 내려받은 첨부파일에 반영하였다면(#2), 수정된 최종 코드를 티스토리에서 적용하시면 됩니다.
- 적용위치 : 티스토리 > 블로그관리 > 플러그인 > 구글 애드센스 (반응형)
상단 그림에서 광고 형태는 자유롭게 선택하시면 되지만, 이번은 상단 2개 애드센스 배치가 목적이기에 첫번째 또는 세번째 광고형태를 선택하시면 됩니다. 광고 형태를 선택한 다음, 아래 박스에는 위에서 수정한 코드 전체를 복사하여 빨간색 박스 부분에 붙여넣기 하고 적용하시면 최종 완료 됩니다.
구글 애드센스의 가이드에 따르면 적용 결과가 반영되기 까지는 최대 1시간 정도 소요된다고 하니 참고하셔서 시간을 가지고 확인해보시면 됩니다. (저 같은 경우, 기존 애드센스 코드를 수정하였더니 약 5분만에 적용된 것을 확인하였습니다.)
출처
[1] 친절한효자손님 블로그 - 친효애드온 : 티스토리 상단 PC 2개 모바일 1개 애드센스 광고 넣는 방법
[2] 코딩팩토리 - [블로그] 효율적인 애드센스 광고배치 전략