티스토리에 구글 애드센스를 배치하는 방법 중에서, 이번에는 글의 우측 상단에 광고를 설치하는 방법을 확인해보자. 좌측에는 글이 나오고 우측에는 애드센스 광고가 나오는 구조여서, 광고가 더 많이 눈에 띈다는 장점이 있다. 그리고 글의 흐름을 막지 않는 선에서 적절한 광고 배치라고도 할 수 있다.

광고를 어떤 곳에 배치할지에 대한 것은 각자의 판단이다. 

혹시, 사이드바에 애드센스 광고를 설치하고 싶은가? 이곳에 있다.

바로가기 : 사이드바에 애드센스 광고 설치

혹시, 본문 중간에 애드센스 광고를 설치하고 싶은가? 이곳으로 가면 된다.

바로가기 : 본문 중간에 애드센스 광고 설치

다시 원래 계획대로 우측 상단에 애드센스 광고를 설치하는 방법을 확인해보자. 글의 우측 상단에 애드센스 광고를 설치하고자 하는 사람은 해당 방법을 따라서 설치를 하면 된다. 

먼저 구글 애드센스에서 광고 코드를 가져와야 한다. 반응형 광고 코드를 가져와서 사용할 수 있다. 혹시 광고 코드를 생성하는 방법을 모르고 있다면 이곳으로 가서 확인 할 수 있다.

바로가기 : 애드센스에서 광고코드 생성하는 방법

위와 같은 구글 애드센스 광고코드를 확인 할 수 있다. 우측 상단에 광고를 배치하기 위해서는 위 코드를 모두 사용하는 것이 아니라, client와 slot 값만 사용할 것이다. 각 애드센스에 맞게 고유의 값이 들어있기 때문에 지금부터 각 값을 다음으로 바꿔서 설명한다.

data-ad-client="12345", data-ad-slot="67890"

이 광고 코드를 적용하기 위해서는, 스킨의 HTML을 수정해야 한다. '꾸미기-HTML/CSS편집'에 들어가면, HTML 수정할 수 있는 부분이 나온다. HTML에서 광고코드 수정을 위해서 본문이 들어가는 부분을 찾아야 한다. ##_article_rep_desc_## 로 검색을 해보면 본문이 들어가는 부분을 쉽게 찾을 수 있다.

##_article_rep_desc_##  부분은 <div> </div> 구문으로 쌓여져 있다. 이 안에 우리가 작성하고자 하는 코드를 넣어야 한다. ##_article_rep_desc_## 윗부분에 <div> </div> 구조를 사용하여서 다음과 같이 넣어보자. <!-- 본문 우측상단 광고 --> 로 표기되는 부분이 해당 광고를 입력하는 코드이다. 해당 소스를 직접 입력할 수도 있겠지만, 번거로운 작업이 될것이다. 아래 소스 복사가 불가하면, 사용 가능한 해당 코드는 글 하단 댓글에서 확인이 가능하다.

<!-- 본문 우측상단 광고 -->

<div style="float:right; margin:5px 0px 0px 5px;">

<script>

if(window.getWindowCleintWidth()>=768){

document.write('<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"><\/script><ins class="adsbygoogle" data-language="ko" style="display:inline-block;width:336px;height:280px" data-ad-client="12345" data-ad-slot="67890"></ins>');

(adsbygoogle = window.adsbygoogle || []).push({});

}

</script>

</div>

내용을 잠시 보자면, 768보다 큰 사이즈일 경우에는 336-280 사이즈의 광고를 넣겠다는 것이다. 물론 그 광고는 구글 애드센스에서 가져온 data-ad-client="12345", data-ad-slot="67890"이다. 이 값은 예시로 사용한 것이고, 실제로 구글 애드센스에서 가져오는 코드에 있는 본인의 값들을 사용해야 한다. 

실제로 적용된 HTML 소스를 확인하면 다음과 같이 볼 수 있다. '저장' 버튼을 클릭하면, 내 티스토리의 글들에 우측상단 광고가 적용이 된다. 추가 설정없이 기존에 작성된 글도 변경이 되니 확인 가능하다.

티스토리에 광고를 삽입하는 다양한 방법중에서, 이번에 알아볼 것은 본문 중간에 애드센스 광고를 넣는 방법이다.

애드센스를 티스토리에 넣는 방법 중, 간편하게 본문 중간에 광고를 적용할 수 있는 방법을 알아보자.

본문 중간 광고는 다음과 같이 본문 중간에 나오는 광고를 의미한다. 

광고의 내용이 어떤것이 나올지는 우리가 선택할 수는 없지만,

어떠한 광고를 배치시키고, 어떤 상황에서 보여줄 것인가는 선택가능하다.

본문 중간에 애드센스 광고를 삽입하는 과정을 살펴보자.

애드센스 광고를 티스토리에 삽입하기 위해서는 당연히 구글 애드센스에 이미 가입이 되어 있어야 한다.

그리고 티스토리에 설치하기 위한, 광고단위를 구글 애드센스에서 만들어줘야 한다.

구글 애드센스에 로그인 해보자.

페이지 상단의 좌측을 보면 메뉴목록을 조회할 수 있는 버튼이 있다.

그것을 클릭하면, 다음과 같은 내광고를 설정할 수 있는 "내광고" 메뉴를 찾을 수 있다.

내광고 - 콘텐츠 - 광고단위를 클릭하면, 실제 광고 등록이 가능하다.

애드센스의 광고단위 페이지에는, 다음과 같이 활성화가 되어있는 나의 모든 광고리스트들이 조회가 된다.

티스토리에 다양한 광고를 설치해보면서, 본인에게 잘맞는 광고를 확인해보는 작업도 필요하다.

화면상단, 본문중간, 화면하단, 사이드 등 다양한 이름으로 광고단위를 만들어서, 

어떤 곳에서 수익이 가장 많이 발생하는지 확인해볼 수도 있다.

이제 실제로 새 광고를 추가해보자. 

화면 좌측상단에 보이는 " + 새 광고 단위 " 버튼을 클릭하여, 아래와 같은 내 광고를 새롭게 만들 수 있다.

다양한 크기의 광고를 선택할 수 있으며,

본문중간에 넣을 광고를 선택하려면, 아래에서 확인 가능한 300 X 250 크기가 적당하다.

이름과 광고크기를 정하고, 저장 및 코드생성 버튼을 누른다.

"광고 단위가 성공적으로 만들어졌습니다." 라는 메시지와 함께, 광고 만들기는 완료되었다.

내 광고를 확인 할 수 있는, 광고 단위 페이지에

방금 등록했던 본문중간광고가 등록되어 있음을 확인할 수 있다.

해당 광고를 보면,

광고이름 밑에 코드 가져오기가 있다.

코드 가져오기를 클릭해보면, 위에서 광고가 만들어졌을때 나오는 메시지와 비슷한 화면을 볼 수가 있다.

해당 광고코드를 복사해서, 티스토리에 적용시키는 방법으로 사용하는 것이다.

이제 구글 애드센스에서 할 수 있는 일들은 끝이났다.

다음으로 티스토리에서 해당 광고를 실제로 적용하는 절차만 남았다.

티스토리에서 본문 중간에 애드센스 광고를 삽입하는 방법은, 간단하게 서식을 이용할 수가 있다.

먼저 새로운 글을 작성하는 페이지를 띄운다.

글 제목 입력하는 란의 우측을 보면 서식이라는 선택가능한 항목이 있다.

서식을 선택하고, 글 작성하는 창으로 가기전에 우측을 보면 HTML 이라고 나와있는 부분을 확인 할 수 있다.

이 부분을 체크하고, HTML로 되어있는 광고코드를 입력한다.

여기에 애드센스에 등록해두었던, 두두패밀리 본문중간광고를 입력을 한다.

이제 이 서식을 발행하면 된다. 내가 사용할 수 있는 서식으로 해당 작업이 적용되었다.

이제 마지막 단계로, 만들어 놓은 서식을 글 작성시에 사용하면 된다.

새로운 글을 작성하게 되면, 우측에 글 정보를 관리하는 부분이 있는데,

가장 하단으로 내려가면 서식부분이 있다.

서식을 누르면, 지금껏 사용하고자 등록했었던 '본문중간광고'가 있음을 확인할 수 있다.

글 중간에 넣고 싶은 부분에 커서를 놓고, 해당 서식을 클릭하면 그 곳에 본문 중간광고가 들어가게 된다.

본문의 끝부분이지만, 실제 적용되는 것을 확인시켜주기 위해서, 나는 바로 윗 부분에 본문중간광고를 삽입하였다.

지금까지 등록하려고 했던 광고가 위와 같은 방식으로 삽입되는 것을 확인 할 수 있다.