티스토리 블로그 구글 애드센스 본문 상/하단 광고 2개 넣기

티스토리 블로그 구글 애드센스 본문 상/하단 광고 2개 넣기

티스토리 관리자에서 자동 광고 삽입으로 본문 상/하단에 광고가 들어가게 되는데, 좀 더 많은 수익을 위해서 상/하단 광고를 각각 2개씩 넣는 방법을 적용하고 소개하겠습니다.

구글 애드센스 광고 생성

티스토리 블로그 상/하단에 광고를 노출하기 위해서 구글 애드센스에서 광고를 생성해야 합니다.

동일한 광고를 노출하고자 하면, 1개의 광고만 있으면 되겠지만, 저는 상/하단 광고 전부 다 다르게 하기 위해서 4개를 만들었습니다.

 

구글 애드센스 광고 탭에 광고 단위 기준을 클릭해서 광고 생성 및 관리를 할 수 있는 화면으로 진입합니다.

그리고 디스플레이 광고를 클릭해서 새로운 광고를 만듭니다.

신규 광고 단위 만들기에서 다른 옵션은 그대로 두고, 광고 단위 이름을 적절하게 설정 후 만들기 버튼을 클릭해서 생성합니다.

 

위에 신규 광고 단위 만들기를 4번 해서 상단 2개, 하단 2개 광고를 만들어줍니다.

 

그리고 생성된 코드는 다른 코드를 사용할 것이기 때문에, 코드 중에 data-ad-client와 data-ad-slot에 값을 따로 저장해둬야 합니다.

data-ad-client 값은 구글 애드센스 계정 공통이지만, data-ad-slot은 각 광고별로 다르기 때문에 만들어준 4개의 광고 값을 다 저장해둬야 합니다.

광고 코드 삽입

광고 코드를 삽입하기 위해 티스토리 블로그 스킨 편집을 통해 HTML 편집을 해야 합니다.

본문 상/하단에 광고 2개를 넣기 위해서 HTML 코드를 넣어야 하며, 본문 위치를 찾아서 잘 삽입해야 합니다.

 

저는 Hello 스킨을 쓰고 있는데, 본문의 위치는 그림과 같은 위치입니다.

_article_rep_desc_ 를 검색해서 감싸고 있는 div id="article" 위/아래로 넣으면 상/하단 광고 2개가 추가됩니다.

 

코드를 적용 후 광고가 너무 붙으면 <br /> 코드를 이용해서 줄 바꿈을 할 수 있으니, 미리 보기를 하면서 간격을 잘 보시기 바랍니다.

 

추가한 코드들은 아래에 있습니다.

 

상단 광고 코드 

<!-- 애드센스 본문 상단 광고 2개 시작 -->
<br />
<div style="text-align: center; margin-bottom: 15px;">
<style>
.adsbygoogle.ads-top-first {display:block}
.adsbygoogle.ads-top-second {display:none}

@media (min-width: 768px) {
.adsbygoogle.ads-top-first {display:inline-block;min-width:336px;max-width:336px;width:100%;height:280px;}
.adsbygoogle.ads-top-second {display:inline-block;margin-left:20px;min-width:336px;max-width:336px;width:100%;height:280px;}
}
</style>

<ins class="adsbygoogle ads-top-first"
  data-ad-client="ca-pub-123456"
  data-ad-slot="111111"
  data-ad-format="rectangle"
  data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<ins class="adsbygoogle ads-top-second"
  data-ad-client="ca-pub-123456"
  data-ad-slot="222222"
  data-ad-format="rectangle"
  data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>                      
<!-- 애드센스 본문 상단 광고 2개 끝 -->

 

하단 광고 코드

<!-- 애드센스 본문 하단 광고 2개 시작 -->
<br />
<div style="text-align: center; margin-bottom: 15px;">
<style>
.adsbygoogle.ads-bottom-first {display:block}
.adsbygoogle.ads-bottom-second {display:none}

@media (min-width: 768px) {
.adsbygoogle.ads-bottom-first {display:inline-block;min-width:336px;max-width:336px;width:100%;height:280px;}
.adsbygoogle.ads-bottom-second {display:inline-block;margin-left:20px;min-width:336px;max-width:336px;width:100%;height:280px;}
}
</style>

<ins class="adsbygoogle ads-bottom-first"
  data-ad-client="ca-pub-123456"
  data-ad-slot="333333"
  data-ad-format="rectangle"
  data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<ins class="adsbygoogle ads-bottom-second"
  data-ad-client="ca-pub-123456"
  data-ad-slot="4444444"
  data-ad-format="rectangle"
  data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>                      
<!-- 애드센스 본문 하단 광고 2개 끝 -->

 

상단/하단 코드에서 data-ad-client에 본인의 코드 값을 넣고, data-ad-slot은 구글 애드센스에서 만들어준 광고 4개의 값을 각각 주입해서 코드를 사용하시기 바랍니다.

티스토리 자동 광고 설정 해제

티스토리 관리자에서 자동으로 설정되는 상단 광고를 해제하겠습니다.

테스트로 상단에 광고를 넣었을 때, 너무 많은 광고 때문에 보기가 좋지 않았습니다.

하단의 경우는 글을 다 읽고 난 뒤라서 추가하는 하단 광고 2개에 기본 자동 광고까지 그대로 뒀습니다.

 

상단 광고 2개 넣은 상태에서 상단 광고를 보면 너무 많은 광고가 노출되는 것 같습니다.

현재 보면, 상단 광고 2개와 티스토리 자체에서 넣는 광고 그리고, 자동 광고로 들어가는 본문 상단 광고까지 총 3개가 나옵니다.

티스토리 자체에서 넣는 광고는 제어할 수가 없으며, 광고로 노출되지 않게 처리를 하면, 차단될 수도 있다고 하니 주의하시기 바랍니다.

추가한 광고가 2개 짜리기 때문에, 자동 광고 설정으로 노출되는 광고는 사용하지 않으려고 합니다.

 

간단하게 티스토리 관리자 애드센스 관리 탭에서 본문 상단 광고를 비활성화한 후 변경 사항 저장을 클릭하여 적용해 줍니다.

 

적용 후 본문 상단을 보면, 자동 광고로 노출되던 상단 광고가 제거된 것을 볼 수 있습니다.

---

지금까지 본문 상/하단 광고 2개씩 해서 총 4개를 넣는 방법을 알아보았습니다.

감사합니다.