애드센스 광고 2개 넣는 방법, 워드프레스 티스토리 상단 하단 광고 설정

01

of 05

준비작업

딱히 준비할 건 없지만

① 구글 애드센스 홈페이지에 접속해서 사용할 광고 2개를 만들어야 한다.

② 소스 코드를 삽입할 테마나 플러그인 (Ad Inderter 등)을 설치해야 한다. 현재 난 테마에서 제공하는 기능을 사용하여 목차 위에 위치하게끔 코드를 삽입했다.

02

of 05

애드센스 광고 2개 넣기 소스 코드

<!-- 광고 2개 배치 -->
<div style="text-align: center;">
<style>
.adsbygoogle.ads-first {display:block;}
.adsbygoogle.ads-second {display:none}

@media (min-width: 680px) {
.adsbygoogle.ads-first {display:inline-block;min-width:300px;max-width:300px;width:100%;}
.adsbygoogle.ads-second {display:inline-block;min-width:300px;max-width:300px;width:100%;}
}

@media (min-width: 767px) {
.adsbygoogle.ads-first {display:inline-block;min-width:463px;max-width:463px;width:100%;}
.adsbygoogle.ads-second {display:none}
}

@media (min-width: 992px) {
.adsbygoogle.ads-first {display:inline-block;min-width:345px;max-width:345px;width:100%;}
.adsbygoogle.ads-second {display:inline-block;min-width:345px;max-width:345px;width:100%;}
}

@media (min-width: 1200px) {
.adsbygoogle.ads-first {display:inline-block;min-width:425px;max-width:425px;width:100%;}
.adsbygoogle.ads-second {display:inline-block;min-width:425px;max-width:425px;width:100%;}
}

@media (min-width: 1218px) {
.adsbygoogle.ads-first {display:inline-block;min-width:430px;max-width:430px;width:100%;}
.adsbygoogle.ads-second {display:inline-block;min-width:430px;max-width:430px;width:100%;}
}
</style>

<!-- 광고 1 -->
<ins class="adsbygoogle ads-first"
     data-ad-client="ca-pub-0000000000000000"
     data-ad-slot="1111111111"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

<!-- 광고 2 -->
<ins class="adsbygoogle ads-second"
     data-ad-client="ca-pub-0000000000000000"
     data-ad-slot="2222222222"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
Code language: HTML, XML (xml)

03

of 05

소스 코드 설명

① 라인 4, 5 : 기본적으로 first는 항상 표시되고, second는 표시되지 않는다. 때문에 모바일에서는 first 광고 하나만 표시된다.

② 라인 7 ~ 30 (파란 배경)

본인 사이트에 따라서 5개가 될 수도 3개가 될 수도 있다. 사이트를 보면서 브라우저 크기를 조금씩 줄여가며 테스트하면 대략 몇 개 정도가 필요한지 알 수 있다.

브라우저를 조금씩 줄여가면서 광고 2개가 정상적으로 표시되는지 확인해야 한다. 무언가 변화가 있을 때 그때의 브라우저 크기를 적용하면 된다. 또한 브라우저 크기에 맞는 광고 크기도 변경해야 한다.

특히 사이드바를 가지고 있는 사이트의 경우 브라우저 크기를 조절하다 보면 사이드바가 사라지는 경우가 추가된다. 이때의 브라우저 크기를 체크하고 두 번째 광고는 표시되지 않게 해야 한다.

그래서 이 소스 코드의 min-width, max-width는 본인의 사이트에 맞게 모두 수정해야 한다.

③ 나머지 : 만들어둔 애드센스 광고 코드 두 개를 추가한다. 주력으로 사용할 광고를 first에 작성한다. 광고 코드의 맨 윗줄만 ins class=”adsbygoogle ads-first” 이런식으로 변경하면 된다.

※ 브라우저 크기는 마우스 우클릭 후 “검사”를 클릭하고 확인하면 된다.

04

of 05

결과 보기

아래 이미지와 같이 목차 위에 광고가 표시된다.

① 기본 화면에서 광고 2개 표시

② @media (min-width: 767px) 화면에서 광고 1개 표시

② @media (min-width: 680px) 화면에서 광고 2개

05

of 05

마무리

소스 코드는 쉽지만, 브라우저 크기를 조절하면서 변화를 확인해야하는 과정이 조금 귀찮을 수 있다. 만약 티스토리 사용자라면 원하는 위치를 찾아서 위 코드를 그대로 붙여넣기 하면 된다.

이렇게 PC에서만 광고가 2개 표시되게 하는 게 얼마나 CPM에 도움이 되는지는 모르겠다. 따라서 애드센스 광고 2개 배치는 필수는 아닌 선택이다. 보기에 좋으면 적용하면 되고 그렇지 않다면 그냥 광고 1개만 넣어도 상관없다.