티스토리 본문 상단에 애드센스 2개 배치하는 법

애드센스판 / / 2020. 7. 13. 20:57

애드센스는

상단에서 가장 많은 수익이 나는 것으로 알려져 있습니다.

 

애드센스 수익을 생각한다면

상단에는 항상 애드센스가 노출이 되도록 하는 것이 좋습니다.

 

애드센스는 1개나 2개를 넣는 것이 방문자에게도 크게 불편함이 없어 효과적이라고 생각이 듭니다. 어떤게 효과가 더 있는지는 사이트 마다 다를 수 있습니다. 사이트에 맞게 테스트를 해보시기 바랍니다.

 

오늘은 아래 그림처럼 티스토리 본문 상단에 애드센스 2개를 배치하는 법을 알아보도록 하겠습니다.

 

1. 애드센스 상단 2개 보여주기

애드센스 2개를 보여줄 때 많이 사용하는 방식입니다.

① 상단에는 가로가 300px 또는 336px 2개가 노출되어야 합니다.

② 모바일에서 접속을 하는 경우에는 꽉찬 광고 1개만 나와야 합니다.

2. 소스 코드

아래 코드를 사용합니다.

주의할 것은 본인의 애드센스 코드를 사용하여야 합니다.

 

코드에서 data-ad-client="ca-pub-xxxxxxxxxxxxxxxxxxx" 부분을 본인의 코드로 변경해서 사용하세요. 그리고 data-ad-slot="sssssssssssssss" 와 data-ad-slot="ppppppppppppp" 부분도 본인 것을 사용하여야 합니다. data-ad-slot 은 동일한 값을 사용해도 되나, 나중을 분석을 위해 각각 다른 것을 사용하는 것을 추천합니다.

 

<style>
  .pb-adsense-table-cell-right ins { display: none !important; }
  @media ( min-width: 1024px ) {
    .pb-adsense-table { display: table; width: 100%; margin: 20px 0px; }
    .pb-adsense-table-row { display: table-row; }
    .pb-adsense-table-cell { display: table-cell; }
    .pb-adsense-table-cell ins { display: inline-block !important; width: 300px; height: 250px; }
    .pb-adsense-table-cell-left { padding-left: 0px; text-align: left; }
    .pb-adsense-table-cell-right { padding-right: 0px; text-align: right; }
  }
  @media ( min-width: 1200px ) {
    .pb-adsense-table-cell ins { width: 336px; height: 280px; }		
	.pb-adsense-table-cell-left { padding-left: 10px; }
    .pb-adsense-table-cell-right { padding-right: 10px; }
  }
</style>

<div class="pb-adsense-table">
  <div class="pb-adsense-table-row">
    <div class="pb-adsense-table-cell pb-adsense-table-cell-left">
      <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

      <ins class="adsbygoogle"
           style="display:block"
           data-ad-client="ca-pub-xxxxxxxxxxxxxxxxxx"
           data-ad-slot="sssssssssssss"
           data-ad-format="auto"
           data-full-width-responsive="true"></ins>
      <script>
           (adsbygoogle = window.adsbygoogle || []).push({});
      </script>
    </div>
    <div class="pb-adsense-table-cell pb-adsense-table-cell-right">
      <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

      <ins class="adsbygoogle"
           style="display:block"
           data-ad-client="ca-pub-xxxxxxxxxxxxxxxxxx"
           data-ad-slot="pppppppppppppppp"
           data-ad-format="auto"
           data-full-width-responsive="true"></ins>
      <script>
           (adsbygoogle = window.adsbygoogle || []).push({});
      </script>
    </div>
  </div>
</div>

3. 광고 넣기

다음은 소스 코드를 넣는 방법입니다. 보통은 티스토리 스킨에서 html 소스를 수정합니다. 이 방법은 추천하지 않습니다. 초보자 분들은 소스코드를 어디에 넣을지 찾는 것도 어렵습니다.

 

소스 코드 수정 없이 애드센스를 올릴 수 있는 방법이 있습니다. 티스토리 플러그인 중에 Google AdSende 구글 애드센스(반응형) 이 있습니다. 이 방법으로 올리면 여러가지로 편하고 좋습니다. 해당 플러그인을 클릭하세요.

 

 

광고 설정 방법이 나옵니다. 광고 배치 유형 중에 1가지를 선택합니다. 상단에 광고 배치가 가능한 ①번 또는 ②번 형태를 선택합니다. 그리고 위 소스코드를 아래에 붙혀 넣으면 됩니다. 그리고 적용 버튼을 클릭하세요.

 

 

위와 같이 플러그인을 사용한다면 장점이 더 많습니다.

우선, 스킨 html을 수정하지 않아도 되어서 매우 간편합니다. 그리고 더 중요한 것은 나중에 스킨을 변경하더라도 광고배치는 변경이 되지 않아 그대로 적용이 됩니다.

이 글을 공유하세요.
naver band kakaoTalk kakaostory facebook twitter