구글 애드센스에 대해서

탕비수다 이마고에서 티스토리에서 제공하는 Google AdSense (반응형) 플러그인을 사용하려면 한 가지 사용자 정의 CSS가 필요합니다. 반응형 광고일 경우 광고 크기는 본문 너비에 따라 책정됩니다. 대부분 티스토리 스킨은 CSS를 통해 본문 크기를 확정하는데 탕비수다 이마고는 Javascript를 통해 본문 크기를 제어하기 때문에 반응형 광고의 크기가 본문 너비에 따라 책정되지 않습니다. 따라서 아래와 같이 사용자 정의 CSS를 하나 추가하면 반응형 애드센스 광고 코드를 깔끔하게 사용할 수 있습니다.

지금은 짤림방지보다는 정보를 쉽게 알리기 위해 이미지를 사용하고 있습니다.

HTML HEAD에 사용자 정의 CSS 추가

사용자 정의 CSS를 추가하는 방법은 몇 가지가 있습니다. 그 가운데 가장 간단한 방법인 HEAD 태그에 선언하는 방식으로 사용자 정의 CSS를 추가할 수 있습니다. 최신 버전의 스킨에는 이미 해당 코드가 기본으로 추가되어 있습니다. 만약 해당 코드가 없다면 아래 코드를 추가하세요.

스킨은 Javascript로 본문 크기를 제어합니다. 애드센스 광고 크기는 본문 크기를 따르는데 미처 본문 크기가 정해지지 않은 상태에서 비동기식으로 작동하기 때문에 눈으로 보는 본문 크기와 광고 크기가 다르게 나타납니다. 따라서 아래와 같이 광고에 사용할 CSS를 HEAD 태그 안에 선언합니다. HEAD 태그는 HTML 태그 근처에 위치합니다.

<HEAD>
  <style type="text/css" id="tangbisuda-user-style">
    /* Google AdSense */
    .tt_adsense_top { max-width: 728px; margin-left: auto; margin-right: auto }
    .tt_adsense_bottom { max-width: 728px; margin-left: auto; margin-right: auto }
  </style>
</HEAD>

tt_adsense_toptt_adsense_bottom이라는 클래스가 생겼습니다. 해당 클래스는 광고 크기를 제어하는데 사용됩니다. 애드센스 가이드에 따르면 가장 효과적인 광고 크기는 336x280 큰 직사각형, 300x250 중간 직사각형, 728x90 리더보드입니다. 본문 상단에 336x280 큰 직사각형 광고 크기를 사용하고 싶다면 tt_adsense_top의 max-width 속성 값을 336px로 변경하세요. 본문 하단에 300x250 중간 직사각형 광고 크기를 사용하고 싶다면 tt_adsense_bottom의 max-width 속성 값을 300px로 변경하세요.

본문: 티스토리 Google AdSense (반응형) 플러그인으로 생성된 광고 코드

티스토리에서 제공하는 Google AdSense (반응형) 플러그인 가운데 '광고2(하단)'를 예로 들겠습니다.

<div class="tt_adsense_bottom" style="margin-top:30px">
  <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  <!-- 광고2 -->
  <ins class="adsbygoogle"
       style="display:block"
       data-ad-client="ca-pub-7781307146023349"
       data-ad-slot="9908800458"
       data-ad-format="auto"></ins>
  <script>
  (adsbygoogle = window.adsbygoogle || []).push({});
  </script>
</div>

Google AdSense (반응형) 플러그인을 통해 '광고2(하단)' 코드가 출력된 모습입니다. DIV.tt_adsense_bottom 영역은 티스토리 플러그인이 자동으로 생성한 영역이며 내부 코드는 사용자가 입력한 애드센스 코드입니다. 따라서 앞서 사용자 정의 CSS로 추가한 tt_adsense_bottom은 사용자가 입력한 애드센스 코드와 대응해 작동하게 됩니다.

사이드바: HTML 배너 출력에 입력한 광고 코드

사이드바에 애드센스 광고를 적용하려면 화면 폭당 정확한 광고 단위 크기를 사용해야 합니다. 자세한 가이드는 “반응형 광고 코드 수정 방법”을 살펴보세요. 사이드바에 반응형 광고 크기를 사용할 수 없는 이유는 스킨 특성 때문입니다. 기본적으로 사이드바는 display 속성 값이 none입니다. 따라서 페이지가 로딩될 때 가로 폭을 알 수 없는 상태입니다. 이런 이유로 사이드바에서 애드센스 광고를 사용하기 위해서는 화면 폭당 정확한 광고 단위 크기를 설정해야 합니다.

<style>
  .adsinsidebar { width: 300px; height: 250px; }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- adsinsidebar -->
<ins class="adsbygoogle adsinsidebar"
  style="display:inline-block"
  data-ad-client="ca-pub-7781307146023349"
  data-ad-slot="9908800458"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

사이드바에 화면 폭당 정확한 광고 단위 크기를 적용한 코드 예입니다. 사용자가 정의한 adsinsidebar 클래스를 통해 광고 단위 크기를 제어하고 있습니다.

신고

롤랑존

이미지를 활용해 다양한 기능을 제공하는 티스토리 반응형 스킨

    이미지 맵

    문서 다른 글

    댓글 4

      • 애드센스 코드를 플러그인에서 넣지 않고 스킨 html에 직접 넣어야 되는 건가요?

      • 안녕하세요.

        티스토리에서 제공하는 'Google AdSense (반응형)' 플러그인을 사용하셔도 됩니다. 관련해서 내용을 좀 더 살펴보고 본 글에 내용을 추가해 놓겠습니다.

        감사합니다.
        롤랑존 드림.

      • 비밀댓글입니다

      • 해당 기능은 티스토리가 플러그인으로 제공하는 기능으로 본문 글을 기준으로 위아래에 위치합니다. 물론, 티스토리 플러그인 정책이 변경될 경우 다소 위치가 변경될 수 있습니다.

    *

    *

    이전 글

    다음 글