이 블로그는 더이상 운영되지 않고 Archive 용도로 사용되고 있습니다.
새로운 블로그를 방문해주세요.

[stamp 3.0] 애드센스 설정 안내


광고 단위 추가 전 안내

stamp 3.0부터 애드센스 위치를 미리 잡아놓고 코드를 짜놨습니다.

광고가 출력되는 위치는 "본문 상단", "본문 하단", "사이드바" 입니다.


구글 애드센스 정책상 한 화면에 광고는 최대 3개까지만 출력해야 합니다.

반응형 코드 관련해서도 포럼에 질문을 남겨놨는데 답글이 안달리네요.


따로 메일을 보낼 수도 없었습니다. 매주 25달러 이상 버는 사람만 이메일로 문의가 가능하더군요.

계정만 있는 저로썬 이메일 문의는 사실상 불가능했습니다.


이메일 지원https://support.google.com/adsense/answer/2581949?hl=ko&ref_topic=1348133&rd=1



그래서 애드센스 도움말에 적힌 반응형 광고 코드 수정방법에 적힌 코드를 살짝만 손봐서 사용했습니다.


미디어 쿼리를 지원하지 않는 IE8에선 상단 광고가 300x50 크기로 보이고, 하단 광고는 300x250 크기로 보입니다.

사이드바는 특정 화면을 제외하고는 무조건 300x600 그대로 보입니다.


해상도 500px 이상은 상단 320x100, 하단 300x250을 출력하고

해상도 800px 이상은 상단 728x90, 하단 728x90을 출력합니다.


그리고 해상도 961px 이상 1024px 이하는 상단 300x250, 하단 300x250을 출력합니다.


마지막으로 해상도 960px 이하의 기기에선 사이드바가 숨겨지기 때문에 사이드바에 있는 애드센스 광고도 같이 숨김 처리됩니다.


애드센스 도움말에 적힌 방법으로 숨긴 거니 문제 없을 겁니다.


특정 화면 크기에 대해 광고를 숨기는 광고 코드의 예https://support.google.com/adsense/answer/6307124?hl=ko&ref_topic=1307438



그럼 이제 stamp 3.0 에 반응형 애드센스 광고 단위를 추가하는 방법을 설명해드리겠습니다.



반응형 광고단위 만들기

우선 애드센스 홈페이지에서 반응형 광고 단위를 만들어주세요.


이미 만든게 있다면 그걸 쓰셔도 됩니다.


만들고 나오는 광고 코드를 잘 보관하시고 다음으로 넘어가주세요.



본문 상/하단 광고 추가

skin.html 파일 192 ~ 218번째 줄 까지 다음 소스가 있습니다.


						<div class="adsense_top">
							<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
							<!-- 반응형 -->
							<ins class="adsbygoogle ads_top"
							style="display:inline-block"
							data-ad-client="ca-pub-"
							data-ad-slot=""></ins>
							<script>
							(adsbygoogle = window.adsbygoogle || []).push({});
							</script>
						</div>

<div class="article"> [#_article_rep_desc_#] </div>
<div class="adsense_bottom"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- 반응형2 --> <ins class="adsbygoogle ads_bottom" style="display:inline-block" data-ad-client="ca-pub-" data-ad-slot=""></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div>


우리가 추가해야 할 부분은 노랗게 강조한 부분의 코드입니다.

※ 다른 부분도 수정하면 안되지만, 파랗게 강조한 부분은 특히 절대 수정하면 안됩니다.


저 코드는 어디서 보냐구요?


반응형 광고 코드


빨간 박스로 표시한 부분에 있습니다.


상/하단에 저 코드를 넣은 후 저장을 눌러주면 완료입니다.

상단과 하단에 각각 다른 반응형 코드를 넣어주는게 좋습니다.



사이드바 광고 추가

사이드바에 광고를 추가하기 위해선 위와 다른 방법을 써야합니다.


우선 플러그인 설정에서 "태그 입력기"를 활성화 해주세요.


태그 입력기


활성화가 됐다면 사이드바 설정 화면으로 자동으로 넘어갈겁니다.


이미 설정해둔 분이라면 사이드바 설정으로 넘어와주세요.


태그 입력기 추가


태그 입력기 옆에 + 버튼을 눌러 추가하면 사이드바 1에 태그 입력기가 생기고 편집을 할 수 있습니다.


편집 버튼을 눌러 애드센스 반응형 광고 단위 코드를 넣되 다음과 같은 방법으로 넣어야합니다.


<div class="widget adsense">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 반응형 -->
<ins class="adsbygoogle ads300x600"
     style="display:inline-block;"
     data-ad-client="ca-pub-4212xxxxxxxx4883"
     data-ad-slot="75xxxxxx17"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>


이해되셨나요?


반응형 광고 단위 코드를 <div class="widget adsense"> </div> 로 감싸고, insads300x600 이라는 class 를 추가했습니다.


※ 반드시 위와 동일하게 광고 코드를 넣어주세요. 특히 파란 부분 잊으면 안됩니다.


입력을 마쳤다면, 혹시 모르니 사용자 모듈에 저장을 체크하고 확인을 눌러주세요.


사이드바 광고 단위 추가


마지막으로 애드센스가 출력될 위치를 적당히 고르고 저장을 눌러주면 됩니다.



마치며

애드센스는 알아가면 알아갈수록 굉장히 민감하고 애매하다고 생각합니다. (물론 전문가가 아니기에)


조금만 이상해도 바로 정지를 먹이죠.


stamp 3.0 에서 사용한 방법은 애드센스 도움말 센터에 있는 코드를 거의 그대로 사용한 거라 아무런 문제가 없으리라 생각합니다.

(수정한 거라고는 광고 단위가 숨겨지는 크기와 특정 해상도 구간 뿐)


그래도 애드센스는 무슨 트집을 잡고 광고를 중단 할지 모르기 때문에 언제나 언제나 조심하고 정책 관련은 꼭 자주 확인해야 합니다.

한번 정지되면 언제 다시 복구해줄지 모르니까요. (영원히 못 할지도...)



이상으로 stamp 3.0 스킨에 애드센스 추가 설명을 마칩니다.

티스토리 툴바