프롤로그
티스토리 북클럽 스킨에서 홈이나 카테고리의 글 리스트 사이에 광고가 일정하게 들어가게 하는 방법입니다.
애드센스의 인피드 광고만 만들면 안 되며 추가 코딩이 필요한데 인터넷 상에 수많은 설명들이 있으나 제대로 동작하지 않습니다. 이 번 글에서 잘 동작하는 방법을 자세히 설명드리도록 하겠습니다.
인피드 광고 단위 생성
먼저 애드센스 홈페이지 왼쪽 광고 메뉴를 누르고 다시 인피드 광고를 클릭합니다.
tistory.com, 모바일은 https://***.tistory.com/m을 입력하고 페이지를 스캔하면 화면 구성을 분석한 후 적당한 인피드를 광고를 제시해 주는데 이것을 수정해서 사용하면 됩니다.
아래 오른쪽 그림에서와 같이 본인 블로그 홈페이지 주소를 Desktop은 https://***.
스캔 분석이 잘 안될 경우에는 아래의 '광고 스타일 직접 만들기'를 누른 후 아래의 왼쪽 그림에서와 같이 본인의 블로그에 맞게 이미지 크기, 글자 폰트, 마진 등을 수정하면 됩니다.
완료 후 오른쪽 상단에 적당한 '광고 단위 이름'을 넣고 하단의 파란색 '저장 및 코드 생성'을 누르면 아래의 오른쪽 그림에서와 같이 코드가 생성되며 세 개의 코드만 필요합니다.
data-ad-layout-key="************" --> (1) 광고 단위 환경 설정 값입니다.
data-ad-client="ca-pub-********" --> (2) 본인의 애드센스 계정 코드입니다.
data-ad-slot="32*******" --> (3) 여기서 만들어진 인피드 광고 단위의 숫자 ID입니다.
이 세 가지 값을 아래에 삽입할 코드에서 본인의 값으로 넣어주어야 합니다.
HTML 수정
'스킨 편집/html 편집'으로 들어가서 <head> 다음에 아래 내용을 넣어 줍니다.
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script> var InfeedCount = 0; </script>html의 417행 부근의 </s_index_article_rep> 다음 행으로 이동합니다. (아래 코드 참조)
<span class="title">['##_article_rep_title_##']</span>
<span class="excerpt">['##_article_rep_summary_##']</span>
<span class="meta">
<span class="date">['##_article_rep_simple_date_##']</span>
</span></a></div>
</s_index_article_rep>위 </s_index_article_rep> 다음 행에 아래 코드에서 (1), (2), (3) 내용을 본인 것으로 수정하여 삽입합니다.
<center style="margin-bottom: 36px;">
<script>
if(window.innerWidth<660){
// 모바일
InfeedCount ++;if ( InfeedCount % 5 == 2 ){
document.write('<ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="(1)" data-ad-client="(2)" data-ad-slot="(3)"></ins>');
(adsbygoogle = window.adsbygoogle || []).push({});}
}
else {
// 데스크탑
InfeedCount ++;if ( InfeedCount % 5 == 2 ){
document.write('<ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="(1)" data-ad-client="(2)" data-ad-slot="(3)">');
(adsbygoogle = window.adsbygoogle || []).push({});}
}
</script>
</center>수정 완료 및 '적용' 후 스킨 편집 창의 왼쪽 화면은 '새로고침'을 해도 수정 내용이 제대로 업데이트 안 되는 경우가 많으니 반드시 다른 인터넷 창을 띄우고 본인 블로그 주소로 접속하여 변경 사항 업데이트를 확인해야 합니다.
추가로 수정이 필요성이 있는 부분은 InfeedCount % 5 == 2인데 2개 글 리스트 후 3번째에 광고가 나오고 이후 5개의 글 리스트 후에 다시 광고가 나오도록 하는 세팅이니 참조해서 본인에 맞게 수정하면 됩니다.
'// 모바일'과 '// PC'가 동일한 인피드 광고를 사용해도 문제가 없으면 다행이지만 화면 크기가 달라 둘 중에 어느 하나가 문제가 될 경우가 있는데 이 때에는 추가로 인피드 광고를 만들어 주어야 합니다.
문제가 되는 인피드 광고 단위를 수정하여 다른 이름으로 '저장 및 코드 생성' 하고 해당하는 (1), (3) 내용을 수정해야 합니다.
