티스토리 카테고리별로 다른 광고 표시하기
하나의 블로그에 완전히 상반된 주제의 카테고리를 운영하고 있을 때 애드센스의 광고 타게팅 때문에 고민하시는 분들이 있습니다.
또는 카테고리별로 광고의 성적을 분석하여 부족한 카테고리에 조금더 힘을 실어주는 방향도 생각해 볼 수 있습니다.
애드센스 정책때문에 일부 카테고리에만 광고를 게재하지 않고 싶은 경우도 있습니다.
아래부터는 카테고리를 인식하여 카테고리별로 다른 광고를 게재하는 방법에 대해 알아보겠습니다.
그렇게 쉽지만은 않습니다.
※스킨마다 카테고리 인식 구조가 다를 수 있습니다. 이 글은 Material T mark 5 기준으로 설명합니다.
먼저 준비해야 할 것
사용할 광고단위를 메모장 같은 곳에 붙여넣어둡니다. 카테고리별 광고단위를 생성했다면 모두 메모장에 붙여넣습니다.
</script>와 </ins> 등에 들어있는 '/'를 모두 '\/'으로 바꿔줍니다.
그리고 광고단위 1개마다 1줄이 되도록 줄바꿈을 모두 지웁니다. 이때 괄호같은게 지워지지 않도록 조심해주세요.
완성 예)<script async src="\/\/pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script><!-- life is an egg 반응형 본문 하단 --><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-0" data-ad-slot="2" data-ad-format="auto"><\/ins><script>(adsbygoogle = window.adsbygoogle || []).push({});<\/script>
카테고리별로 다른 광고단위 사용하기
기존에 사용하던 광고위치 중 카테고리별로 다르게 하고 싶은 부분을 골라 광고를 삭제합니다.
정확히 애드센스에서 제공하는 광고코드부분만 제거하고 그 대신 다음을 붙여넣으세요.
<div id="nubiz_my_ad"></div>
(nubiz_my_ad는 임의로 정한 이름입니다.)
</body>윗줄에 다음을 붙여넣습니다.
<script>
var CN = $(".category").text().trim();
if (CN == "카테고리1") {
$("#nubiz_my_ad").append('<script async src="\/\/pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script><!-- 카테고리1광고 --><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-0" data-ad-slot="2" data-ad-format="auto"><\/ins><script>(adsbygoogle = window.adsbygoogle || []).push({});<\/script>');
} else if (CN == "카테고리2"){
$("#nubiz_my_ad").append('<script async src="\/\/pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script><!-- 카테고리2광고 --><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-0" data-ad-slot="2" data-ad-format="auto"><\/ins><script>(adsbygoogle = window.adsbygoogle || []).push({});<\/script>');
} else {
$("#nubiz_my_ad").append('<script async src="\/\/pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script><!-- 나머지카테고리광고 --><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-0" data-ad-slot="2" data-ad-format="auto"><\/ins><script>(adsbygoogle = window.adsbygoogle || []).push({});<\/script>');
}
</script>
파란색으로된 부분을 수정해서 사용하시면됩니다.
카테고리 이름은 보통 글 제목 옆에 있으며, 하위카테고리는 "/"으로 구분됩니다. 예)iTIPs/광고
append뒤 괄호와 따옴표 사이에 위에서 만들어둔 1줄로된 광고코드를 넣으시면됩니다.
카테고리 수를 더 추가하고싶다면?
진하게 표시한 부분을 복사해서 여러개 반복하시면 되겠죠? (else if (~~) {~~} 까지입니다)
특정카테고리에 해당 위치 광고를빼고싶다면?
append뒤에 괄호만남기고 광고코드를 지우시면됩니다. 예) append();
광고 1개가 아니라 3개 다 이런 식으로 바꾸고 싶다면
나머지 광고도 삭제한 뒤 그 자리에 빈 div를 삽입합니다. 이때 id값은 서로 다르게 넣습니다.
예)<div id="nubiz_my_ad_123"></div>
각 append문 아래 한줄씩 추가합니다.
예)
$("#nubiz_my_ad").append('<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script><!-- 카테고리1광고1 --><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-0" data-ad-slot="2" data-ad-format="auto"><\/ins><script>(adsbygoogle = window.adsbygoogle || []).push({});<\/script>');
$("#nubiz_my_ad_123").append('<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script><!-- 카테고리1광고2--><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-0" data-ad-slot="2" data-ad-format="auto"><\/ins><script>(adsbygoogle = window.adsbygoogle || []).push({});<\/script>');
다른 스킨에서도 적용하려면
※본 스크립트는 jQuery를 사용합니다. 스크립트가 작동하지 않는다면 스크립트 윗줄에 다음을 추가해주세요.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!--[if lte IE 8]> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <![endif]-->
var CN = $(".category").text().trim(); 여기서 .category를 수정하면 됩니다.
크롬브라우저 기준으로 본인의 스킨에서 제목 옆 카테고리가 표시되는 곳에서 마우스 오른쪽버튼 클릭하여 검사를 누르면 카테고리명이 위치한 class가 보일것입니다.
class에 해당하는 값을 category대신 넣으시면됩니다.
