애드센스 게시글(본문) 중간에 광고 삽입하기

처음엔 호기심에서 출발해서 블로그에 애드센스 광고를 달았는데..

나름 어렵게 승인받아서 광고를 삽입하고,

그다지 특별하진 않지만 이것저것 포스팅하면서,

애드센스에 들어가서 자꾸 실적을 조회하게 되네요.ㅎㅎ

블로그 운영이 직업이 아님에도 불구하고,

실적 조회 화면의 수입을 보면서

액수에 집착하게 됩니다.

본말이 전도된 격일 수도 있겠어요.

 

방문자가 있어서 광고가 노출이 되어도 클릭이 없으면 수익이 없다는 사실에 좌절하기를 거듭하다가

광고의 위치에 따라 클릭이 더 잘 될 수 있다는 글을 읽고 이것저것 시도 해 보는 중이예요.

티스토리의 관리자 페이지에서 플러그인으로 광고코드를 넣으면 그냥 일괄적으로 게시글의 맨 위쪽이나 아래쪽에 광고가 게재됩니다.

글을 작성할 때 약간만 신경쓰면 게시글(포스팅 본문) 중간에 광고를 올릴 수가 있더라구요.

 

 

여러가지 방법이 있지만 그 중에서 2개만 소개 해 보겠습니다.

1. 포스팅을 작성할 때 원하는 부분에 광고코드를 그냥 입력해 주는 방법

2. 티스토리 관리 페이지의 'HTML/CSS 편집'으로 가서 HTML에 광고코드를 넣고, 포스팅 작성할 때 원하는 부분에 HTML에 넣어 놓은 코드 불러들이는 방법

이 있는데요.

 

 

각각 장단점이 있어요.

 

1번 방법은 포스팅을 작성할 때마다 광고코드를 복사해서 붙여넣기 해 주니까 좀 번거롭고, 광고를 삭제하려면 각각의 포스팅을 다 수정해야 합니다. 즉 일괄삭제가 불가능하죠.

하지만 광고코드를 여러개 만들어서 원하는 광고코드를 마음대로 삽입하기에는 좋은 거 같아요. 맞춤광고로 업체를 타게팅 했을 경우 포스팅의 내용에 맞는 광고를 게재하기에 좋겠지요.

 

 

2번 방법은 광고코드를 HTML에 넣어 놓고 포스팅 작성할 때 원하는 위치에 짧은 코드를 사용해서 불러들이기만 하면 되니까 매번 광고코드를 복사해서 붙여넣지 않아도 되어 편하고, 삭제할 때에도 HTML에서 지워버리면 되니까 일괄 처리가 가능해요.  일괄 삭제가 안되게 하려면 해당 글만 찾아서 글을 수정하면 되구요. 2번 방법이 훨씬 간편하죠.

 

하지만... 큰 단점이 있어요. 이 방법으로 광고를 올리면 모바일에서는 광고가 보이지 않습니다.

'HTML/CSS편집' 화면에서 style.css에 '.mobile{display:none}'을 넣어주고, 블로그에 포스팅할 때

<dis class="mobile"> 광고코드</div> 입력하면 이 광고는 모바일에서만 보이게 된다고 합니다. 그.러.나.. display:none코드는 애드센스에서 허용하지 않습니다. 그러니까 괜히 이거 사용하다가 애드센스 정책위반으로 되돌릴 수 없는 우울한 일을 겪어야 할지 몰라요. 절대 사용하면 안되겠지요.

 

또 다른 단점이 있어요. html에 광고코드를 넣고 본문 중간(원하는 위치)에 불러들이는 코드를 추가 하지 않으면 아래의 그림처럼 화면 제일 아래쪽에 광고가 올라가게 됩니다. 광고를 사이드바 쪽에 추가하기도 하니까 별 상관 없을 수도 있지만 1개의 페이지에 광고가 3개 이상이 되지 않도록 주의를 해야할 필요가 있어요. 보기에도 별로인 것 같아요.

 

 

 

-----------------------------------------------------------------------------------------

본문 중간에 광고 넣는 상세한 방법은 아래와 같습니다.

 

 

 

우선 정말 본문 중간에 있는 광고의 클릭율이 높은지 알고 싶으니까 본문 전용 광고 코드를 새로 만듭니다. 

 

 

 

1. 포스팅을 작성할 때 원하는 부분에 광고코드를 그냥 입력해 주는 방법입니다.

 

'코드 가져오기' 클릭해서 코드 복사한 다음,

아래의 사진처럼 글쓰기 화면의 오른쪽 'HTML' 체크하세요.  

 

 

 

그 다음 원하는 위치에 복사한 광고코드를 아래 그림처럼 붙여넣기 하시고 저장하면 됩니다.

이 때 그냥 광고코드만 붙여넣기 하면 광고가 본문의 왼쪽에 나와서 좀 보기 싫더라구요.

그래서 빨간 사각형 안의 제일 앞부분의 '<DIV align=center>와 제일 아래쪽의 </DIV> 태그를 추가해서 광고를 본문의 가운데에 위치하게 했어요.

<DIV align=center>와 </DIV> 사이에 광고코드를 붙여넣기 해서 본문의 원하는 부분에 넣고 저장하시면 광고가 왼쪽이나 오른쪽에 치우치지 않고 가운데에 올라갑니다.

 

 

블로그 관리자 - 플러그인 설정-수익 Google AdSense(모바일용) 에서 아래그림의 빨간 화살표 부분에 체크가 안되어 있어야 모바일에서 광고가 보입니다. 혹시 광고를 1번 방법으로 삽입했는데 모바일에서 보아지 않는다면 한 번 확인 해 보세요. 저는 이걸 몰라서 한참 고생했네요. 웹에서 볼 때만 본문 중간에 들어간 광고를 보이게 하고, 모바일에서는 광고를 안보이게 하고 싶으시다면 체크해 주시면 되구요.

 

 

 

 

 

2. 티스토리 관리 페이지의 'HTML/CSS 편집'으로 가서 HTML에 광고코드를 넣고, 포스팅 작성할 때 원하는 부분에 광고코드 삽입하는 방법입니다.

티스토리 관리 페이지의 'HTML/CSS 편집'으로 가서 'Ctrl+F'누르시고  '</body>' 검색하신 후에 '</body>'바로 위에

<div id="sun">

게재할 광고코드

</div>

<script>

document.getElementById('moon').appendChild(document.getElementById('sun'));

</script>

를 아래 그림처럼 입력하시고 저장하세요.

 

 

 

그런 다음 아래의 사진처럼 글쓰기 화면에서 HTML체크한 후에 원하는 위치에

<div id="moon" align=center></div>

태그를 입력하고 저장하시면 됩니다.

'align=center'는 그 라인의 가운데에 배열하라는 뜻이예요. center대신에 left를 입력하면 왼쪽에, right를 입력하면 오른쪽에 위치하게 됩니다.

 

 

 

 

 

 

짧게 정리해 보자면 게시글(본문) 중간에 광고를 삽입할 때

웹과 모바일 두 곳 모두에서 보이게 하고 싶으시다면 좀 번거로워도 1번 방법(직접 코드 넣기)을,

웹에만 보이고, 일괄 처리가 되게 하고 싶으시다면 2번 방법(html에 코드 넣고, 불러오기)을 사용하시면 되겠습니다.

여기까지 게시글 중간에 광고 삽입하는 방법을 알아봤습니다. ^^