티스토리 본문 상하단에 반응형 광고를 배치하니 PC에서는 적절하게 보이는데 모바일에서는 상단 광고의 크기가 너무 커서 콘텐츠의 내용을 보려면 스크롤을 해야 하는 애드센스 정책에도 맞지 않습니다.
그래서 PC에서 광고 단위와 모바일 환경에서의 광고 단위를 서로 다르게 하여 적절한 크기로 출력되도록 해보았습니다.
PC 본문 상단 : 반응형 / 하단 : 336*280(큰 사각형) 2개 배치
모바일 본문 상단 : 320*100(큰 모바일 배너) / 하단 : 반응형
위와 같이 애드센스 광고를 배치하기 위해서는 반응형 광고 단위 1개, 336*280 광고 단위 1개, 320*100 광고 단위 1개가 필요합니다.
하지만 저는 반응형 2개, 336*280 1개, 320*100 1개의 광고 단위를 생성하여 배치하였습니다. 이유는 PC와 모바일의 광고 단위를 다르게 하여 실적 보고서에서 확인할 때 PC와 모바일의 실적을 구분하기 위해 광고 단위를 따로 만들었습니다.
각각 원하시는 형태로 광고 단위를 생성하시고 아래의 코드를 이용해서 PC와 모바일에서 보일 광고 단위를 다르게 설정해보세요.
1. 우선 PC와 모바일 본문 상단에 삽입할 광고 단위를 생성 후 "코드 가져오기"를 하여 "웹게시자"와 "광고단위ID"를 메모장 등에 붙여넣기 합니다.
팁) "광고 단위" 코드를 삽입하실 때 보통은 가장 위에 있는 소스(파란색 1번 라인)는 삭제하셔도 무방합니다. 이유는 애드센스 승인 단계에서 이미 head 태그에 이미 삽입하셨기 때문에 중복으로 삽입할 필요가 없습니다. 중복으로 삽입을 하시면 페이지 로딩 시간만 길어집니다.
2. 위에서 확인한 "웹게시자"와 "광고단뒤ID"를 아래 소스에 웹게시자와 광고단위ID 위치에 치환합니다.
(아래의 소스 중 "\" 문자를 삭제하지 마세요.)
<script>
// 본문 상단 소스
var currentM;
currentM = location.href.split('/')[3];
if(currentM == 'm'){
// 모바일 본문 상단 광고 단위 삽입
document.write('<!-- tistoryM_contents_up -->');
document.write('<ins class="adsbygoogle" style="display:inline-block;width:320px;height:100px" data-ad-client="웹게시자" data-ad-slot="광고단위ID"><\/ins>');
document.write('<script>(adsbygoogle = window.adsbygoogle || []).push({});<\/script>');
}
else {
// PC 본문 상단 광고 단위 삽입
document.write('<!-- tistory_contents_up_a -->');
document.write('<ins class="adsbygoogle" style="display:block" data-ad-client="웹게시자" data-ad-slot="광고단위ID" data-ad-format="auto" data-full-width-responsive="true"><\/ins>');
document.write('<script>(adsbygoogle = window.adsbygoogle || []).push({});<\/script>');
}
</script>
*소스 설명
ⓐ location.href.split('/')[3] (현재 페이지의 URL을 가지고 와 "/"단위로 문자열을 자르기 하고 그중 4번째(0~3) 문자열을 반환합니다.
ⓑ if(currentM == 'm') (1번에서 반환된 문자열과 "m"을 비교하여 같으면 "모바일 페이지" 다르면 "PC"페이지입니다.
3. 본문 하단 소스도 동일한 소스 코드입니다. 위 방법으로 본문 하단에 삽입할 "광고 단위"를 생성하시고 동일하게 하나 더 만드시면 됩니다. 저는 PC용 본문 하단 소스는 336*280 사이즈 광고를 좌우 나란히 2개를 배치하기 위해 table 태그를 추가하였습니다. 하단에도 상단과 동일하게 1개의 광고가 들어간다면 위에 소스를 이용하시면 됩니다.
<script>
// 본문 하단 소스
var currentM;
currentM = location.href.split('/')[3];
if(currentM == 'm'){
// 모바일 하문 상단 광고 단위 삽입
document.write('<!-- tistoryM_contents_dn_a -->');
document.write('<ins class="adsbygoogle" style="display:block" data-ad-client="웹게시자" data-ad-slot="광고단위ID" data-ad-format="auto" data-full-width-responsive="false"><\/ins>');
document.write('<script>(adsbygoogle = window.adsbygoogle || []).push({});<\/script>');
}
else {
document.write('<table border="0" width="100%" style="margin: 0px; padding: 0px; cellspacing: 0px; border-spacing: 0px; border-collapse: collapse;"><tr><td width="50%" style="background-color: #fff; text-align: left; margin: 0px; padding: 0px; cellspacing: 0px;">');
// PC 본문 하단 광고 단위1 삽입
document.write('<!-- tistory_contents_dn -->');
document.write('<ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="웹게시자" data-ad-slot="광고단위ID"><\/ins>');
document.write('<script>(adsbygoogle = window.adsbygoogle || []).push({});<\/script>');
document.write('<\/td><td width="50%" style="background-color: #fff; text-align: right; margin: 0px; padding: 0px; cellspacing: 0px;">');
// PC 본문 하단 광고 단위2 삽입
document.write('<!-- tistory_contents_dn -->');
document.write('<ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="웹게시자" data-ad-slot="광고단위ID"><\/ins>');
document.write('<script>(adsbygoogle = window.adsbygoogle || []).push({});<\/script>');
document.write('<\/td><\/tr><\/table>');
}
</script>
4. 티스토리 관리자 페이지 - 플러그인 - 구글 애드센스(반응형)을 선택하고 "광고 형태"를 본문 상하단을 선택합니다. 위에서 생성한 2개의 소스 코드를 각각 입력합니다.
위와 같이 소스 코드를 플러그인을 통해 삽입하시면 PC와 모바일의 광고 단위가 서로 다르게 적용됩니다.
