구글 애드센스 승인 획득 후 티스토리 블로그에서 플러그인을 이용하여 광고를 삽입해 보았습니다. 기본적으로 보이는 광고로도 충분하지만 광고의 삽입 개수, 위치, 크기와 같은 레이아웃에 의해 노출되는 빈도수는 같더라도 클릭 반응 회수가 다르다는 의견이 많아서 다양한 방법으로 광고를 삽입하는 방법을 배워보기로 했습니다.
위의 타이틀 이미지는 운영 중인 블로그입니다. 학습을 위해 운영 중인 블로그는 그대로 두고 기존에 애드센스 운영 목적이 아닌 티스토리 블로그를 이용하여 광고를 삽입해 보겠습니다. 우선 애드센스 사용을 위해 애드센스 승인 요청에 사용했던 코드를 삽입합니다. 승인 요청 코드는 HTML의 <head></html> 태그 사이에 삽입하고 저장합니다. 승인 요청과 관련된 내용은 아래 이전 글에서 확인 가능합니다.
블로그 본문 우측 상단에 광고를 삽입하기에 앞서 애드센스에서 상단 광고의 크기를 정하고 광고를 생성합니다. 시간 단축을 위해 광고는 미리 생성해 두었습니다. 광고의 생성 과정과 방법은 아래 이전 글에서 확인이 가능합니다.
오늘 우측 상단에 삽입할 광고는 텍스트/이미지, 300*250 크기의 광고입니다. 지금까지 사전 학습한 내용을 정리하면 상단에 2개의 박스형 광고, 좌측 상단에 1개의 박스형 광고, 우측 상단에 1개의 박스형 광고, 또는 상단에 반응형 배너 광고 등을 삽입할 수 있습니다. 사용자마다 기호에 따라 선택할 수 있지만 대체로 우측 상단에 박스형 광고 1개를 삽입했을 때 대체로 광고의 클릭률이 높았다고 합니다.
이유는 책 읽는 방향과 마우스를 사용하는 습관 때문일 것으로 추정을 합니다. 인류는 오래전부터 왼쪽에서 오른쪽으로 글을 읽어 내려가는 것에 익숙해져 있고, 또 마우스는 오른손으로 대부분 조작하기 때문에 커서의 위치가 오른쪽에 있을 가능성이 높습니다. 때문에 오른쪽에 광고를 두는 것이 클릭률이 높다는 것에 동의를 합니다.
이러한 이유로 저도 제일 먼저 오른쪽 상단에 광고를 삽입하는 방법을 배워보기로 했습니다. 이제 본격적으로 오른쪽 상단에 광고를 삽입해 보겠습니다. 오늘은 미리 생성한 텍스트/이미지, 300*250 크기의 고정형 광고를 이용해서 광고를 삽입하려 합니다.
먼저 티스토리 블로그의 관리 페이지에서 HTML/CSS를 클릭합니다. 아래 그림과 같이 CSS를 클릭 후 body 아래 다음 코드를 삽입합니다.
.adsenseR {float:right;margin-left:좌측 간격 넓이;margin-bottom:하단 간격 높이}
광고 왼쪽 편의 글자와 광고 사이의 간격과, 광고 아래쪽의 글자와 광고 사이의 간격을 조절하는 값입니다. 아래 그림을 보시면 쉽게 이해가 될 겁니다.
보통 아래와 같은 값을 사용합니다.
.adsenseR {float:right;margin-left:22px;margin-bottom:12px}
이제 HTML 코드를 이용하여 애드센스에서 미리 생성한 광고를 삽입해 보겠습니다. 먼저 광고를 삽입할 위치를 찾기 위해 Ctrl + F 키를 누르시고 _article_rep_desc_ 를 검색합니다. 아래 그림을 참조해서 검색된 위치 위쪽에 아래의 코드를 삽입합니다.
<div class="adsenseR">
애드센스 광고를 여기에 삽입합니다.
</div>
아래 그림에서와 같이 HTML 클릭 후
구글 애드센스 승인 획득 후 티스토리 블로그에서 플러그인을 이용하여 광고를 삽입해 보았습니다. 기본적으로 보이는 광고로도 충분하지만 광고의 삽입 개수, 위치, 크기와 같은 레이아웃에 의해 노출되는 빈도수는 같더라도 클릭 반응 회수가 다르다는 의견이 많아서 다양한 방법으로 광고를 삽입하는 방법을 배워보기로 했습니다.
위의 타이틀 이미지는 운영 중인 블로그입니다. 학습을 위해 운영 중인 블로그는 그대로 두고 기존에 애드센스 운영 목적이 아닌 티스토리 블로그를 이용하여 광고를 삽입해 보겠습니다. 우선 애드센스 사용을 위해 애드센스 승인 요청에 사용했던 코드를 삽입합니다. 승인 요청 코드는 HTML의 <head></html> 태그 사이에 삽입하고 저장합니다. 승인 요청과 관련된 내용은 아래 이전 글에서 확인 가능합니다.
블로그 본문 우측 상단에 광고를 삽입하기에 앞서 애드센스에서 상단 광고의 크기를 정하고 광고를 생성합니다. 시간 단축을 위해 광고는 미리 생성해 두었습니다. 광고의 생성 과정과 방법은 아래 이전 글에서 확인이 가능합니다.
오늘 우측 상단에 삽입할 광고는 텍스트/이미지, 300*250 크기의 광고입니다. 지금까지 사전 학습한 내용을 정리하면 상단에 2개의 박스형 광고, 좌측 상단에 1개의 박스형 광고, 우측 상단에 1개의 박스형 광고, 또는 상단에 반응형 배너 광고 등을 삽입할 수 있습니다. 사용자마다 기호에 따라 선택할 수 있지만 대체로 우측 상단에 박스형 광고 1개를 삽입했을 때 대체로 광고의 클릭률이 높았다고 합니다.
이유는 책 읽는 방향과 마우스를 사용하는 습관 때문일 것으로 추정을 합니다. 인류는 오래전부터 왼쪽에서 오른쪽으로 글을 읽어 내려가는 것에 익숙해져 있고, 또 마우스는 오른손으로 대부분 조작하기 때문에 커서의 위치가 오른쪽에 있을 가능성이 높습니다. 때문에 오른쪽에 광고를 두는 것이 클릭률이 높다는 것에 동의를 합니다.
이러한 이유로 저도 제일 먼저 오른쪽 상단에 광고를 삽입하는 방법을 배워보기로 했습니다. 이제 본격적으로 오른쪽 상단에 광고를 삽입해 보겠습니다. 오늘은 미리 생성한 텍스트/이미지, 300*250 크기의 고정형 광고를 이용해서 광고를 삽입하려 합니다.
먼저 티스토리 블로그의 관리 페이지에서 HTML/CSS를 클릭합니다. 아래 그림과 같이 CSS를 클릭 후 body 아래 다음 코드를 삽입합니다.
.adsenseR {float:right;margin-left:좌측 간격 넓이;margin-bottom:하단 간격 높이}
광고 왼쪽 편의 글자와 광고 사이의 간격과, 광고 아래쪽의 글자와 광고 사이의 간격을 조절하는 값입니다. 아래 그림을 보시면 쉽게 이해가 될 겁니다.
보통 아래와 같은 값을 사용합니다.
.adsenseR {float:right;margin-left:22px;margin-bottom:12px}
이제 HTML 코드를 이용하여 애드센스에서 미리 생성한 광고를 삽입해 보겠습니다. 먼저 광고를 삽입할 위치를 찾기 위해 Ctrl + F 키를 누르시고 _article_rep_desc_ 를 검색합니다. 아래 그림을 참조해서 검색된 위치 위쪽에 아래의 코드를 삽입합니다.
<div class="adsenseR">
애드센스 광고를 여기에 삽입합니다.
</div>
아래 그림에서와 같이 HTML 클릭 후 위쪽에 애드센스 광고를 삽입 후 저장을 클릭합니다.
아래 그림과 같이 본문의 우측 상단에 광고가 나타납니다.
오늘 하루 다양한 레이아웃으로 애드센스 광고를 삽입하는 방법을 시도해 보았습니다. 최종 선택은 지금 보고 있는 레이아웃인 우측상단에 큰박스형 광고 하나를 넣고, 본문 중간과 끝에 배너형 광고를 하나 삽입한 형태입니다. 박스형 광고를 많이 넣으려 했는데 스마트 폰에서 보기에는 박스형 광고 보다 배너형 광고가 더 보기 좋았습니다. 제가 이 레이아웃으로 선택한 근거는 애널리틱스의 통계정보입니다. 일단 이 상태로 두고 당분간은 콘텐츠의 양과 질을 올리는 데 신경을 써야 할 것 같습니다.
아래 그림과 같이 본문의 우측 상단에 광고가 나타납니다.
오늘 하루 다양한 레이아웃으로 애드센스 광고를 삽입하는 방법을 시도해 보았습니다. 최종 선택은 지금 보고 있는 레이아웃인 우측상단에 큰박스형 광고 하나를 넣고, 본문 중간과 끝에 배너형 광고를 하나 삽입한 형태입니다. 박스형 광고를 많이 넣으려 했는데 스마트 폰에서 보기에는 박스형 광고 보다 배너형 광고가 더 보기 좋았습니다. 제가 이 레이아웃으로 선택한 근거는 애널리틱스의 통계정보입니다. 일단 이 상태로 두고 당분간은 콘텐츠의 양과 질을 올리는 데 신경을 써야 할 것 같습니다.