티스토리 블로그 마크쿼리 반응형웹 스킨으로 교체-장단점과 유의사항
tistory blog skin을 반응형웹 스킨으로 교체를 하고, 애드센스 광고 단위도 전부 반응형 광고 단위(베타)로 변경을 했습니다.
기존의 블로그가 사이드바가 왼쪽 오른쪽에 있던것도 이제는 오른쪽에만 부착을 하게 되었는데, 광고 배치를 바꾸는데 이것도 좀 헷갈리더군요...-_-;;
위 처럼 현재 구성을 하고 있는데, 제 블로그에는 기존의 구글 애드센스 3개 외에 adx라고 4개를 더 추가할수 있습니다.(다만 앞으로는 더 이상 블로그의 가입은 받지 않는다고 하네요.)
그러다보니 좀 배치에 대해서 생각을 해보게 되는데, 문제는 adx는 반응형 광고단위가 없어서 좀 애매하기는 합니다.
데스크톱 페이지 상단에는 두개를 배치하고, 모바일 페이지 상단에는 어쩔까 하다가 300*250으로 배치를 했습니다.
왼쪽이 반응형 웹 스킨에서 보여지는 300*250 단위이고, 오른쪽은 티스토리 모바일 웹 스킨에서 320*100 광고 단위를 삽입한 모습입니다.
애드센스 측에서 모바일에 336*280은 위반이지만, 300*250은 컨텐츠가 충분히 보이면 된다는 약간 애매한 기준이지만, 이정도면 어느정도 기준에 충족하지 않을까 싶은 생각이 듭니다.
불필요한 이름, 날짜, 카테고리, 댓글 등의 항목을 모바일 페이지에서는 숨겨 버려서 300*250을 부착하고도 티스토리 모바일 스킨보다 본문 영역이 더 제대로 보여지는데, 설마 이걸로 경고나 제재 조치를 받지는 않을듯 합니다.
속임수가 있는 광고 구현으로 애드센스 정책위반시 해결 방법, 모바일 300*250을 300*50으로 교체후 수익 급락
애드센스 320*100 큰 모바일 배너 광고 단위 추가로 수익증대 기대와 티스토리는?
예전에 한번 경고를 받기는 했는데, 모바일 페이지에서 받은것이고, 혹시나 이 문제로 경고를 받는다면 또 알려드리겠지만, 뭐 위 정도의 화면이라면 크게 문제는 없지 않을까 싶은데, 블로그 타이틀로 날려버릴까요...-_-;;;
수학방님이 알려주셨는데, 몇일전 구글 애드센스 팀에서 고급형 휴대기기 상단에 300*250을 게재하는것은 정책 위반으로 간주된다고 하네요...-_-;;
결국 수정을 하고, 360이상의 페블릿에서만 300*250을 노출을 하도록 했습니다. 근데 정책위반이다가 아니라, 간주한다는 말이 좀 애매하네요.
암튼 잡설이 길었고, 저같이 반응형 웹스킨을 사용하지 않고, 티스토리 모바일 스킨을 사용하시는 분들도 반응형 광고단위를 사용해도 된다고 합니다.
반응형 광고 단위를 만들려고 하면 위와 같이 이 광고 단위는 반응형 디자인으로 구축된 사이트에만 사용할 수 있습니다 라고 나와서 반응형 스킨이 아니면 안되겠지라는 생각이 듭니다.
근데 얼마전에 google adsense 측에서 오늘의 애드센스 팁: 애드센스에서 수익을 높이는 방법이라는 메일이 한통이 왔더군요.
위처럼 모바일 페이지에서 광고 단위를 더 넣으면 수익을 올릴수 있다고 하더군요.
이건 제가 반응형웹 스킨으로 바꾸기 전인데, 저기에 광고를 넣으려면 본문에 애드센스 반응형 광고단위를 삽입해야 하는것 외에는 방법이 없더군요.
그래서 구글 애드센스팀에 문의를 넣었더니 답변이 왔네요.
이런식으로 반응형 광고 단위를 삽입해도 된다고 합니다.
데스크탑 PC나 테블릿에서 모바일 페이지로 들어오는 경우가 그리 많지는 않지만, 사용을 해도 된다는 점이 중요한듯 합니다.
뭐 그렇다고 크게 달라질것은 없겠지만, 예를 들어 본문 중간에 광고를 삽입하는 경우 PC에서는 336*280을 보여주고, 모바일에서는 300*250을 넣어주는 식으로 활용을 하시면 좋을듯 하네요~
물론 PC의 상단의 광고 또한 1200px 이상의 경우에는 336*280 2개를 넣고, 이하에서는 300*250 2개를 넣는 방식처럼 활용을 하셔도 될듯 합니다.
티스토리 모바일 페이지 CSS 스타일 문제와 애드센스 광고 데스크탑용이 중복되지 않게 본문에 삽입하는 방법
물론 그냥 코드를 삽입하시지 마시고, 남무님의 블로그 글을 참고해서 javascript 파일로 넣어주시면 되며, 이부분은 애드센스 정책에 위배되지 않는다고 합니다.
위처럼 자바스크립트를 넣지 않고, 그냥 코드를 넣었는데, 만약 계정위반으로 수정을 하라고 하면 자바스크립트 파일 하나만 수정을 하면 되지만, 코드를 넣은 경우 블로그 글이 천개라면 일일이 다 수정을 하셔야 합니다.
참고로 스킨을 바꾼다고 해도 js파일은 그대로 적용이 되는데, 안보이는 경우 다시 올리시면 됩니다.
(function() {
document.writeln('<st' + 'yle>');
document.writeln(' .danbi-middle { width: 300px; height: 250px; } ');
document.writeln(' @media(min-width: 993px) { .danbi-middle { width: 0px; height: 0px; } }');
document.writeln('</st' + 'yle>');
document.writeln('<sc' + 'ript async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></sc' + 'ript>');
document.writeln('<!-- danbi_middle -->');
document.writeln('<ins class="adsbygoogle danbi-middle"');
document.writeln(' style="display:inline-block"');
document.writeln(' data-ad-client="ca-pub-23426915809xxxx"');
document.writeln(' data-ad-slot="1574882438"></ins>');
document.writeln('<sc' + 'ript>');
document.writeln('(adsbygoogle = window.adsbygoogle || []).push({});');
document.writeln('</sc' + 'ript>');
})();
ad_code.txt이건 제가 사용하는 js 파일인데, 위와 같은 방식으로 넣으시면 됩니다.
물론 위 코드를 복사하는게 아니고, 자신의 반응형 광고 단위 코드를 위 처럼 수정하시면 됩니다.
남무님의 코드는 danbis.net/m 처럼 모바일 페이지인 경우에만 출력이 되는 코드지만, 이건 모든 페이지에서 출력이 되는 방식입니다.
간혹 광고가 안나온다고 하시는 분들이 있는데, 광고를 생성하고나면 바로 나오지 않기도 하고, 위 중에서 철자가 하나만 틀려도 나오지 않으니 잘 확인해 보시길 바라겠습니다
물론 본문에 덕지덕지 광고를 넣는게 좋은것은 아니라는 점은 참고하시고, 위 코드는 993px 이상의 화면에서는 광고가 출력이 되지 않고, 그 이하의 화면에서만 출력이 되는 방식입니다.
이건 반응형웹 스킨에 대한 설명과 애드센스 코드 삽입시에 미디어퀴리를 수정하는 방법에 대한 설명인데 참고하시길 바라겠습니다.
이건 본문에 js파일을 만들어서 올리는 방법에 대한 설명이니 참고하세요~
■ 반응형 웹스킨에서 애드센스 광고 삽입하는 방법
<style>
.danbi-topm { width: 320px; height: 100px; }
@media(min-width: 769px) { .danbi-topm { width: 0px; height: 0px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- danbi_topm -->
<ins class="adsbygoogle danbi-topm"
style="display:inline-block"
data-ad-client="ca-pub-2342691580xxxxx"
data-ad-slot="8662340432"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<style>
.danbi-top1 { width: 0px; height: 0px; }
@media(min-width: 769px) { .danbi-top1 { width: 336px; height: 280px; } }
@media(min-width: 993px) { .danbi-top1 { width: 300px; height: 250px; } }
@media(min-width: 1200px) { .danbi-top1 { width: 336px; height: 280px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- danbi_top1 -->
<ins class="adsbygoogle danbi-top1"
style="display:inline-block"
data-ad-client="ca-pub-2342691580xxxxx"
data-ad-slot="4807550436"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<style>
.danbi-top2 { width: 0px; height: 0px; }
@media(min-width: 993px) { .danbi-top2 { width: 300px; height: 250px; } }
@media(min-width: 1200px) { .danbi-top2 { width: 336px; height: 280px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- danbi_top2 -->
<ins class="adsbygoogle danbi-top2"
style="display:inline-block"
data-ad-client="ca-pub-2342691580xxxxx"
data-ad-slot="1714483235"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
이건 현재 제 블로그 상단에 달려있는 반응형 광고 단위인데, 2개가 아니라 3개를 넣어두었습니다.
두개를 가지고 사용을 해도 되지만, 이렇게 해놓으면 수익이 어디에서 발생을 하는지 쉽게 알수 있습니다.(물론 보고서에서 플랫폼을 확인하시면 되지만 번거롭지요)
첫번째것은 모바일에서만 출력이 되고, 두번째와 세번째 광고 단위는 PC와 테블릿 사이즈에서 출력되는 사이즈입니다.
물론 본문 하단에 또 하나 달려있고, 본문 중간에도 삽입이 되어 있는데, 많은 경우 광고단위가 5개가 삽입이 되어서 계정정책에 위반일것 같지만, 화면 사이즈에 따라서 최대 3개까지만 출력이 되기 때문에 계정 정책에는 위반이 되지 않습니다.(아래는 구글 애드센스 직원에게 들은 답변입니다.)
구글 애드센스, 블로그에 광고 3개 초과 노출시 약관 위반으로 계정 비활성화가 될수 있으며, 문제 발생시에 해결하는 방법
물론 여러개를 부착해도 노출이 되는것은 3개까지 밖에 안되지만, 위처럼 경고를 받을수 있으니 유의하시길 바라겠고, 반응형에 애드센스 광고를 적절하게 보이기 위해서는 맨위의 사진처럼 PC와 모바일 화면을 그려놓고, 어떻게 출력을 할것인지를 설계해보시면 좋을듯 하네요~
암튼 참고해서 잘 활용해 보시길 바라겠습니다!