이번 포스트에서는 티스토리에서 제공하는 플러그인 중 '배너 출력'을 이용하여 사이드 바에 구글 애드센스를 적용하는 방법을 설명합니다.
0. 배경
티스토리를 운영하면서 소소한 자기 보상을 얻고자 구글 애드센스를 적용하였습니다. 사이드바(Sidebar)에는 별도 설정없이 구글 애드센스에서 제공하는 '사이트 기준' 광고를 사용하고 있었는데 랜덤하게 출력되다보니 간혹 원하지 않는 곳에 광고가 배치되거나 출력이 되지 않는 경우가 있었습니다. 이런 부분을 개선하고자 검색하다보니 티스토리에서 플러그인으로 '배너 출력' 모듈을 제공하고 있었고 해당 플러그인을 이용하면 원하는 위치에 배너를 출력할 수 있다는 것을 알게되어 공유하게 되었습니다.
1. 사전 준비
1) 구글 애드센스 코드 준비
먼저 구글 애드센스(Google AdSense)에서 발급받은 '광고 단위 코드'를 준비해야 합니다. '광고 단위 코드'는 '[구글 애드센스] > [광고] > [광고 단위 기준]' 탭에서 생성된 광고의 < >를 선택하여 확인할 수 있으며 해당 코드를 복사하여 메모장에 옮겨 놓으시면 됩니다.
참고로 제 블로그 사이드바에는 '콘텐츠 내 자동 삽입 광고'를 적용하고 있습니다.
2) 블로그관리 홈에서 '배너 출력' 플러그인 사용하기
'배너 출력' 플러그인 적용은 아래 메뉴에서 선택 가능하며, 첨부된 이미지를 확인하시어 진행하시면 됩니다.
- 경로 : [블로그관리 홈] > [플러그인] > [배너 출력]
3) 사이드바 에 플러그인 적용
이번 단계에서는 '1)'에서 준비한 준비한 '구글 애드센스 광고 코드'를 사이드바에 적용해 보겠습니다. 사이드바 구성은 블로그관리 홈에서 수정가능하며, 메뉴는 아래 위치에서 접근 가능합니다.
- 경로 : [블로그관리 홈] > [꾸미기] > [사이드바]
사이드바 관리메뉴의 좌측 상단 '기본 모듈'은 티스토리에서 제공하는 적용 가능한 모듈 리스트를 보여주며, 우측 '사이드바1'은 현재 블로그에 적용된 사이드바 모듈 리스트을 나타냅니다. 저희가 이번에 적용할 모듈은 '기본 모듈'의 '[플러그인] HTML 배너 출력'이며 우측 +를 누르면 해당 모듈이 우측에 적용됩니다.
우측에 적용된 모듈 위에 마우스를 올리면 '편집' 버튼이 활성화 됩니다. 편집 버튼을 누르면 아래 이미지와 같이 'HTML 배너출력' 팝업 화면이 뜨는데, '이름'에는 원하는 모듈 이름을 기입하시고 'HTML 소스'에는 '구글 애드센스 광고 코드'를 붙여넣기 하시면 됩니다.
참고로 하단 '사용자 모듈에 저장'을 체크하면 지금 설정한 값들이 적용된 '사용자 모듈'을 생성하여 재사용할 수 있으며, 생성된 '사용자 모듈'은 '기본 모듈' 하단에 배치하게 됩니다. (하단 이미지 참고)
3. 결과 확인
이제 적용된 결과를 확인해 보겠습니다. 위에서 설명한 절차대로 동일하게 진행하셨다면, 아래 이미지(제 블로그)와 같이 '최근 글' 리스트 하단에 광고가 적용되셨을 겁니다. (환경에 따라 적용되는데 일정 시간이 소요되는 경우도 있습니다)
해당 과정을 통해 이해하신 내용을 기반으로, 다른 광고 코드를 넣어보거나 추가적인 광고 모듈을 적용해 보시면서 자신만의 효과적인 배치를 찾아보시면 좋을 것 같습니다.
4. 참고 링크
[1] 구글 애드센스 사이드바 광고 넣기 성공했습니다.