본 글은 티스토리에 구글 애드센스의 디스플레이 광고를 적용하는 방법에 대한 내용이다.
북클럽 스킨 기준으로 화면 상단과 하단, 목록 상단, 본문 상단과 중간 및 하단 그리고 사이드바에 적용하는 방법을 설명한다.
1] 디스플레이 광고 코드 생성
구글 애드센스 ▶ 광고 ▶ 개요 ▶ 광고 단위 기준에서 디스플레이 광고를 클릭한다.
디스플레이 광고는 아래와 같이 사각형 & 반응형, 수평형 & 반응형, 수직형 & 반응형이 있다. 적용할 위치의 레이아웃 따라 맞는 형태를 선택하면 된다.
반응형을 선택하면 페이지 레이아웃과 사용자 기기에 맞게 광고 크기가 자동적으로 조정된다.
그리고 아래와 같이 원하는 크기를 직접 정할 수도 있다.
크기를 고정하면 게재 가능한 광고 수가 제한될 수 있고, 이에 따라 수익이 줄어들 수도 있으니 참고 바란다.
크기를 직접 정할 때는 아래의 정책 및 제한에 따른 크기를 참고 바란다.
만들기를 누르면 아래와 같이 디스플레이 광고 코드가 생성된다.
파란색 박스 부분은 HTML의 <head> ~ </head> 사이에 삽입하고, 빨간색 박스 부분은 광고를 나오게 할 위치에 삽입한다.
지금부터 설명할 모든 예시는 '사각형 & 반응형'으로 진행했음을 참고 바란다.
2] 화면 상단 적용
화면 상단에 적용하려면 코드를 </head> 위에 삽입한다.
아래와 같이 화면 상단에 광고가 나오는데 왼쪽으로 정렬되서 나온다.
광고의 화면 중앙 정렬을 위해서 아래와 같이 <center>와 </center> 를 추가 삽입한다.
아래와 같이 목록 및 본문 페이지의 상단에 광고가 나온다. 반응형이기 때문에 Mobile에서도 정상적으로 나온다.
3] 화면 하단 적용
화면 하단에 적용하려면 코드를 </footer> 아래 또는 </body> 위에 삽입한다.
이 역시 광고의 화면 중앙 정렬을 위해서 아래와 같이 <center>와 </center> 를 추가 삽입한다.
아래와 같이 목록 페이지와 본문 페이지의 하단에 광고가 나온다.
4] 목록 상단 적용
목록 상단에 적용하려면 코드를 <div class="post-item"> 위에 삽입한다.
광고와 목록 간의 간격을 위해 아래 예시를 참고해서 margin 값을 추가 삽입한다.
아래와 같이 목록 상단에 적용되어 결과적으로 목록 사이사이에 광고가 나온다.
5] 본문 상단 적용
본문 상단에 적용하려면 코드를 <div class="entry-content"> 위에 삽입한다.
글과의 간격을 위해 아래 예시를 참고해서 margin 값을 추가 삽입한다.
아래와 같이 본문 상단에 광고가 나온다.
6] 본문 중간 적용
본문 중간에 적용하려면 코드를 글 작성 중 HTML 모드에서 원하는 위치에 삽입한다.
글과의 간격을 위해 아래 예시를 참고해서 margin 값을 추가 삽입한다.
아래와 같이 본문 중간에 광고가 나온다.
7] 본문 하단 적용
본문 하단에 적용하려면 코드를 ##_article_rep_desc_## 아래 또는 </div> 아래에 삽입한다.
간격을 위해 아래 예시를 참고해서 margin 값을 추가 삽입한다.
아래와 같이 본문 하단에 광고가 나온다.
8] 사이드바 적용
사이드바에 적용하려면 '사이드바 설정'에서 'HTML 배너출력'에 코드를 삽입한다.
배너 크기 고정과 간격을 위해 아래 예시를 참고해서 width, height, margin 값을 추가 삽입한다.
<ins class="adsbygoogle"
style="display:inline-block; width:250px; height:auto; margin-bottom:30px;"
data-ad-client="★"
data-ad-slot=" ★ "
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
아래와 같이 목록 및 본문 페이지의 사이드바에 광고가 나온다.
9] 한 눈에 보기
상기 모든 광고를 적용하면 아래와 같이 나온다.
