티스토리 블로그의 포스트 본문 우측에 위치하게 되는 사이드바에는 본문에 기재하지 못하는 블로그 설명글, 블로그 대표이미지, 카테고리 ,달력, 통계정보 등 블로그에 대한 많은 정보를 위치시킬 수 있습니다. 따라서 블로그를 방문한 이용자는 본문에서는 원하는 콘텐츠를 얻고, 사이드바 영역에서는 블로그의 전반적인 내용을 탐색할 수 있죠.
사이드바를 오로지 블로그 방문자를 위한 정보제공 공간으로 활용할 수도 있지만, 해당 영역을 수익창출을 위한 공간으로 탈바꿈시킬 수도 있습니다. 바로 애드센스에서 제공하는 광고단위를 통해서 말이죠. 포스트의 본문, 즉 콘텐츠가 충분히 만들어져 있다면 해당 페이지는 스크롤을 해야할 일이 생길 것이고 그럼 사이드바 전체를 통해서 광고를 노출시킬 수 있게됩니다.
지난 시간에 자동광고에서 '디스플레이 광고' 및 '콘텐츠 내 자동 삽입 광고'의 역할과 두 광고단위를 적용제외했을 때 발생하는 결과에 대해 알려드렸습니다.
포스트 본문에 수동으로 '디스플레이 광고'나 '콘텐츠 내 자동 삽입 광고'를 적용해 둔 상황이라면 '자동광고'의 동일한 두 가지 광고형태, 즉 '디스플레이 광고' 및 '콘텐츠 내 자동 삽입 광고'는 적용을 제외해두는 것이 좋습니다. 하지만, 자동광고에 포함되어있는 '디스플레이 광고'를 해제할 경우 포스트 본문 뿐만 아니라 '사이드바' 영역의 광고도 함께 사라지게 되는 문제가 있다고 말씀드렸었죠. 그럼 결국 사이드바에는 수동으로 '광고단위'를 통하여 광고를 게재하는 수 밖에 없겠군요.
▲ 사이드바는 적용된 스킨에 따라 형태가 다릅니다. 제 블로그와 여러분의 사이드바 형태가 다르다고 놀라지 마세요.
구글 애드센스에서 '디스플레이 광고' 코드 생성하기
◆ 구글 애드센스에서 '광고단위'를 활용하여 '디스플레이 광고'를 생성해보시죠.
▼ 애드센스 관리자페이지의 '광고'탭 하위 '광고단위' 탭을 클릭합니다.
▼ '디스플레이 광고'를 선택합니다.
▼ 우측상단에서 광고 크기를 설정할 수 있습니다. 광고크기는 '반응형'과 '고정'이 있습니다. 반응형은 기기에 따라 광고의 크기가 변하는 형태이고, 고정은 설정한 크기로만 게재되는 광고의 형태입니다.
▼ 요즘은 데스크탑 뿐만 아니라 모바일기기도 많이 사용하고 있죠. '반응형'으로 선택해보겠습니다.
▼ 사이드바에 들어갈 수 있도록 세로로 길쭉한 '수직형'을 선택합니다.
▼ 데모 광고를 볼수 있습니다. 아래와 같은 형태로 게재가 된다고 하네요.
▼ 만약, 광고크기를 '고정'으로 선택하면 어떻게 될까요? 너비와 높이를 제한할 수 있는데, 반응형 광고를 게재할 때보다 수익이 줄어들 수 있다고 하는군요.
▼ 너비와 높이를 각각 300픽셀로 적용했을 때의 데모 광고를 볼까요? 그럴듯 하군요.
▼ 하지만, 저는 '반응형'으로 선택하도록 하겠습니다.
▼ 좌측상단에서 해당 광고단위의 이름을 입력해주시구요.
▼ 설정이 완료되셨다면 '만들기' 버튼을 눌러주세요.
▼ 광고 작성이 완료되었군요. 하단의 '완료'버튼을 눌러서 마무리 해주세요.
▼ 이런 식으로 해서 세 개의 '디스플레이 광고'를 생성했습니다.
▼ 우측의 아이콘 도구모음에서 코드가져오기 아이콘(<>)을 클릭해주세요.
▼ 아래의 코드 복사 버튼을 눌러줍니다. 이제 티스토리로 이동해보실까요?
티스토리 '배너출력' 플러그인을 활용하여 사이드바에 광고 게재하기
◆ 티스토리의 '배너출력' 플러그인을 이용하면 사이드바의 원하는 위치에 광고를 게재할 수 있습니다.
▼ 티스토리 관리자페이지의 '플러그인' 탭을 클릭합니다.
▼ '배너출력' 플러그인을 선택해주세요.
▼ 우측 하단의 '적용'버튼을 누르면 설정완료!
▼ 티스토리 관리자페이지의 '꾸미기' 하위 '사이드바' 탭을 클릭해서 들어갑니다.
▼ 사이드바 좌측영역에 이미지 배너출력과 HTML 배너출력이 생성이 되었군요. 우리가 필요한 것은 'HTML 배너출력'입니다.
▼ 'HTML 배너출력' 좌측의 석삼(三) 버튼을 누른채로 우측 영역으로 드래그&드롭하여 플러그인을 원하는 곳으로 위치시킵니다.
◆ 그럼 제 블로그의 사이드바 영역에서 광고를 게재할 위치를 선정해보겠습니다. 광고 게재 위치는 사이드바 성격과 배치에 따라 정하시면 됩니다.
▼ 첫 번째로 블로그 소개(Blog Information)와 카테고리(Category) 사이에 하나 넣어두고 싶구요.
▼ 두 번째로 카테고리(Category)와 달력(Calendar) 사이에 위치시키면 보기 좋을 것 같네요.
▼ 세 번째로는 통계(Statistics) 아래의 비어있는 부분에도 하나 넣어 보고싶습니다.
▼ 그럼 사이드바의 원하는 위치에 'HTML 배너출력' 플러그인을 각각 위치시켜줍니다. 각각의 플러그인에 광고코드를 넣어주기 위하여 편집버튼을 눌러줍니다.
▼ 1. 배너의 이름을 입력하고, 2. 위에서 복사해둔 애드센스 '디스플레이 광고' 코드를 붙여넣습니다. 3. '사용자 모듈에 저장' 란을 체크하신 후에 4. 확인 버튼을 누르면 설정이 완료됩니다.
▼ 참고로 '사용자 모듈에 저장'에 체크를 하시면 나중에 필요한 위치에 넣게나 빼는 작업을 할 때 만들어진 모듈로 적용하면 되기 때문에 편리합니다.
▼ 나머지 두 개의 HTML 배너출력 플러그인에도 동일한 방법으로 적용시켜줍니다.
▼ 적용된 내용을 '변경사항 저장' 버튼을 눌러서 마무리 해줍시다.
◆ 그럼 광고가 적정위치에 게재되어있는지 확인하러 가보실까요? 두근두근...
▼ 첫 번째 광고가 원하는 위치에 게재되었군요.
▼ 두 번째 광고도 마찬가지구요.
▼ 세 번째 광고도 통계 사이드바 아래에 배치가 잘 되어 있습니다. 오늘도 임무완료!
마치며...
티스토리에서 제공하는 플러그인을 활용하면 사이드바에 광고를 설정하는 건 쉬운 편입니다. 구글 애드센스에서 광고를 생성한 후 'HTML 배너출력' 플러그인에 해당 광고내용을 넣어서 원하는 위치에 배치시키기만 하면 되거든요. 이 플러그인이 없었다면 HTML을 직접 편집해야하는 번거로움이 있었을테니 아주 유용한 플러그인인것 같네요. 티스토리 사이드바에 광고를 게재하는 방법을 배웠으니 여러분은 사이드바를 어떻게 활용할 지 결정하시면 되겠군요. 사이드바를 정보제공의 공간으로 활용하든 수익창출의 영역으로 사용하든 그것은 선택하기 나름이니 좋은 선택하시기 바랍니다. 오늘은 여기까지. 그럼 또 만나요!
