티스토리 애드센스 본문상단 광고 2개 넣는 방법 (PC 2개, 모바일 1개 노출)

티스토리와 애드센스 자동광고만 주로 넣었는데 광고 노출이 잘 안 되는 것 같아서 본문 상단에 수동으로 광고 2개를 넣어보려 합니다. 

목차

1.PC에서는 광고2개, 모바일에서는 광고 1개 노출하기

   노트북이나 PC로 검색해서 티스토리 블로그를 방문했을 때, 제목과 본문 사이에 광고가 2개 들어간 블로그를 많이 봅니다. 종류가 다른 2개의 광고가 보여 애드센스 수익에 더 도움이 될 것 같기도 하고, 유명한 블로거 분들은 보통 본문이 시작되기 전, 본문 상단에 광고를 2개 넣는 경우가 많아 저처럼 궁금하신 분들이 많으실 겁니다.

 

  보통 애드센스나 티스토리 자동광고를 설정하면 본문 상단에 가로로 긴 직사각 형의 큰 광고가 뜨거나, 오디세이 스킨은 블로그 타이틀과 글 제목 사이에 광고가 뜨게 됩니다. 가독성에도 제목 아래 광고가 배치되는 게 더 나을 것 같기도 해서 저도 이번 기회에 제목 아래, 본문 상단에 광고 2개를 넣겠습니다. 오늘 만들 본문 상단 광고는 PC에서는 광고가 2개이지만, 모바일에서는 애드센스 광고가 1개 노출됩니다. 

 

2.본문 상단 광고는 디스플레이 광고로 만들기

   본문 상단 광고를 2개 나오게 하려면 수동으로 광고 코드를 넣어야 해서 구글 애드센스에 들어가서 광고 코드를 생성해야 합니다. 구글 애드센스에는 디스플레이광고, 인피드광고, 콘텐츠 내 자동삽입 광고, 멀티플렉스 광고로 총 4가지 광고 종류가 있는데 본문 상단 광고는 그 중에서 디스플레이 광고로 코드를 생성해야 합니다. 디스플레이광고는 기본적으로 반응형으로 페이지 레이아웃과 PC, 모바일 등 기기에 맞게 자동으로 크기가 조정됩니다. 하지만 고정된 광고 크기로 게재되도록 맞춤 설정이 가능하고, 광고 중 가장 다양한 용도로 사용할 수 있는 광고입니다.

 

3.본문 상단 광고 생성하기  

본문 상단 광고 2개, 디스플레이 광고 반응형

  ①먼저 구글 애드센스에 로그인을 하고 좌측 메뉴에서 광고를 클릭합니다. ②그러면 메인화면에 개요 화면이 나옵니다. 사이트 기준, 광고 단위 기준, 전체 설정 중에서 ③광고 단위 기준을 누르고 ④첫 번째에 나오는 신규 광고 단위 만들기에서 디스플레이 광고를 클릭합니다. 그럼 위와 같은 화면이 나오게 되는데 ⑤광고 모양은 사각형, 광고 크기는 반응형으로 설정하고 ⑥제일 상단에 광고 이름을 기억하기 좋게 작성합니다. 나중에 그 이름이 그대로 광고 코드에 들어갑니다. 물론 수정도 가능합니다. 

 

4.본문상단 광고2개 수동으로 코드 2번 생성하기

   ▲디스플레이 광고 코드 만들기를 누르면 위와 같이 광고 코드가 생성되는데, 중요한 것은 이 과정을 한번 더 해야 합니다. 본문 상단에 각각 다른 광고가 2개 들어가기 때문에 광고 코드가 2개 필요합니다. 이렇게 광고 코드를 2번 생성하면, ca-pub-0000000000000000 이 부분의 16자리 숫자와 slot 부분의 10자리 숫자가 있는데, 아마 slot 부분의 숫자만 바뀌어 있을 겁니다. ca-pub 뒤에 숫자는 구글 애드센스가 블로그 운영자에게 부여한 애드센스 고유 번호입니다. 그러니 번호가 바뀌지 않습니다. 하지만 slot 부분의 숫자는 광고 코드를 생성할 때마다 바뀝니다. 

 

💡디스플레이 코드 생성을 한 번만 해도 된다는 분들도 있습니다. 광고 코드를 넣는 부분이 2곳이므로 저는 우선 코드 생성을 2번 했습니다. 각각 다른 slot 숫자로 광고 코드를 넣어본 후, 본문 상단 광고 2개가 잘 노출되는지 확인했는데 노출이 잘 됩니다. 혹시 slot 숫자를 동일한 숫자를 입력하신 분들 중에 광고가 잘 노출이 안되시는 분들은 광고 코드를 한번 더 생성해서 시도해보시길 바랍니다.

 

5.HTML 편집창에 코드 입력하기

    이제 티스토리 스킨 편집으로 들어가서 HTML 편집을 누릅니다. 그 편집창에서 ##_article_rep_desc_## 치환자를 검색해서 그 위에 아래 코드를 복사해서 넣습니다. 아래 코드에서 블로그운영자 16자리 숫자와 Slot 10자리 숫자는 위에서 생성한 디스플레이광고 코드에서 각각 가져옵니다. 광고 단위 코드는 반드시 body태그와 /body태그 사이에 있어야 한다고 구글 애드센스는 말합니다. 바디 태그 외부에 광고 단위 코드를 붙여 넣으면 광고가 제대로 게재되지 않는다고 합니다.

 

   ##_article_rep_desc_## 은 블로그 본문 내용 치환자로 이 치환자 위에 광고 코드를 넣으면 본문 상단 광고가 되고, 아래에 광고 코드를 넣으면 본문 하단 광고가 됩니다. 티스토리 스킨마다 html, css 용어가 다른데 ##_article_rep_desc_## 치환자는 티스토리에서 공통으로 보입니다. 

 

   티스토리 오디세이 스킨을 사용중이라면,  div class="articla-view" 과 ##_article_rep_desc_## 사이에 본문상단 광고 코드가 들어가게 됩니다. 

 

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

@media (min-width: 768px) {
.adsbygoogle.post-top-first {display:inline-block;min-width:336px;max-width:336px;width:100%;height:280px;}
.adsbygoogle.post-top-second {display:inline-block;margin-left:20px;min-width:336px;max-width:336px;width:100%;height:280px;}
}
</style>
<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
</script>
<ins class="adsbygoogle post-top-first"
     data-ad-client="ca-pub-블로그운영자16자리숫자"
     data-ad-slot="10자리숫자A"
     data-ad-format="rectangle"
     data-full-width-responsive="true">
   </ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<ins class="adsbygoogle post-top-second"
     data-ad-client="ca-pub-블로그운영자16자리숫자"
     data-ad-slot="10자리숫자B"
     data-ad-format="rectangle"
     data-full-width-responsive="true">
</ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<!-- 애드센스 본문 상단 광고 2개, 모바일 1개 끝 -->

6.본문상단 광고2개 노출 하기

본문상단 광고2개 노출된 모습

  ▲코드를 적용한 후 몇 분 이내로 위 이미지와 같이 본문상단 광고2개가 노출되는 것을 확인할 수 있습니다. 확실히 광고가 작아서 그런지 오히려 가독성에 더 좋고 모바일에는 자동으로 1개가 노출되니 제 눈에는 더 좋습니다. 광고 설정하는 게 귀찮아서 자동광고를 해놓고 태그 밑에만 수동 광고를 달았는데 이제 애드센스 자동광고와 수동광고를 적절히 섞는 것이 좋다는 많은 블로거 분들의 말이 이해가 갑니다. 부지런히 공부해야겠습니다. 

 

  블로그 본문상단에 광고를 2개 적용하고 싶으신 분들에게 도움되길 바랍니다. 감사합니다.