[티스토리] 글의 우측 상단에 애드센스 광고 설치하기

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

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

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

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

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

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

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

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

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

위와 같은 구글 애드센스 광고코드를 확인 할 수 있다. 우측 상단에 광고를 배치하기 위해서는 위 코드를 모두 사용하는 것이 아니라, 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 소스를 확인하면 다음과 같이 볼 수 있다. '저장' 버튼을 클릭하면, 내 티스토리의 글들에 우측상단 광고가 적용이 된다. 추가 설정없이 기존에 작성된 글도 변경이 되니 확인 가능하다.