Inspired World

티스토리 블로그에 구글 애드센스 깔끔하게 달기 본문

JavaScript

티스토리 블로그에 구글 애드센스 깔끔하게 달기

InspiredJW 2016. 8. 2. 14:22

티스토리 블로그에 애드센스 적용하기

티스토리 블로그에 애드센스 좀 더 깔끔하게 다는 방법을 알아보겠습니다.

상단, 하단은 티스토리 HTML/CSS 편집에 들어가서 ['##_article_ rep_desc_##'] 를 찾아

위에 광고 코드, 아래에 광고 코드를 넣어서 하는 방법이 가장 보편적인데요.

광고는 보통 상단, 하단도 좋지만 본문 중간에도 하나 있으면 더 효과적이라고 합니다.

매번 글 쓸때마다 수동으로 광고 코드를 본문 중간에 넣어주는 방법도 있으나 번거롭기도 하고

혹시나 광고 코드가 바뀌기라도 한다면 재앙이겠죠.

그래서 간단히 JavaScript를 이용해서 광고를 본문 상단, 중간, 하단에 배치 하는 방법을 소개하려합니다.


광고 유닛 만들기

구글 애드센스 사이트에 로그인


상단에 있는 내 광고를 클릭


반응형 선택 (저는 반응형 스킨을 사용하고 있어서 반응형을 선택하였습니다)

이렇게 광고 생성후 코드를 가져올 수 있습니다.



여기서 <ins>로 시작해서 </ins>로 끝나느 부분까지만 가져옵니다.

구글 광고는 정책상 한 페이지에 최대 3개의 광고까지 배치할 수 있습니다.

위의 방법으로 3개의 광고를 생성한 후, 각각의 코드를 메모장이나 즐겨쓰는 에디터에 옮겨주세요.


티스토리에 적용하기

먼저 티스토리에 로그인을 한 후, 본인 블로그에 들어가게 되면 스킨마다 다르지만

톱니바퀴나 관리자 로그인 등등 다양한 형태로 관리자 페이지로 들어갈 수 있는 링크가 있습니다.

혹시 찾기 힘드시면 블로그주소/admin/center 를 입력하시면 관리자 페이지에 들어갈 수 있어요.


여기서 HTML/CSS 편집을 클릭

그럼 오른쪽에 나오는 긴 소스가 보입니다.


CSS

<head> 부분에 있는 <link ...> 태그들이 모여 있을 겁니다.

마지막 <link> 태그 이후에

<style>
// 광고 위아래에 30px 씩 margin을 주어서 띄어주고 가운데 정렬
.adsbygoogle {
  margin: 30px auto;
}
</style>

이 태그를 붙여 넣기 합니다.

이 CSS Style은 구글 광고 DOM 에 위 아래 30 픽셀 씩 마진 값을 주어 여백을 확보하기 위함입니다.


Template

아까 적어 놓은 <ins> 태그 3개를 아래와 같이 이쁘게 정리해서 #templateContainer에 감싸줍니다.

<div id="templateContainer">
  <script type="text/template" id="adsenseTopTemplate">
    <ins class="adsbygoogle"
         style="display:block"
         data-ad-client="ca-pub-xxxxx"
         data-ad-slot="xxxx"
         data-ad-format="auto"></ins>
  </script>
  <script type="text/template" id="adsenseMidTemplate">
    <ins class="adsbygoogle"
         style="display:block"
         data-ad-client="ca-pub-xxxxx"
         data-ad-slot="xxxx"
         data-ad-format="auto">
    </ins>
  </script>
  <script type="text/template" id="adsenseBottomTemplate">
    <ins class="adsbygoogle"
         style="display:block"
         data-ad-client="ca-pub-xxxxx"
         data-ad-slot="xxxx"
         data-ad-format="auto"></ins>
  </script>
</div>

위 코드를 </body>위에 있는 가장 위에 있는 <script> 태그 전에 오도록 넣어주세요.

그대로 복사 - 붙여넣기 하시면 data-ad-client랑 data-ad-slot가 제대로 입력되지 않아서 동작하지 않습니다. 꼭 본인의 광고 코드로 변경해주세요.


JavaScript

저는 최근에 티스토리 블로그 스킨을 바꾸었는데요.

그래서인지 jQuery 를 기본적으로 로드해주는 부분이 있더라구요.

</body> 위에 혹시 이런 코드가 없다면 추가해주세요.

<!--[if lt IE 9]>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!--<![endif]-->


구글 광고 공식 스크립트입니다
이것도 위에 추가한 코드 다음 줄에 추가해주세요.

<script src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>


마지막으로 구글 광고 스크립트 밑에 추가해주실 코드입니다.

<script>
// 모든 DOM이 로드 된 이후에 실행하는 콜백 함수
$(function() {
  var $areaView = $(".area_view"); // 티스토리 본문 DOM
  var $images = $areaView.find("img"); // 티스토리 본문에 들어간 이미지 DOM
  var $templateContainer = $("#templateContainer script"); // 구글 애드센스 태그 모음
  var imgLength = $images.length; // 티스토리 본문에 있는 이미지 갯수
  var nthInsert = (imgLength <= 1) ? 0 : Math.floor((imgLength / 2)) - 1; // 이미지 중간 즈음에 중간 광고 넣기 위한 계산
  // 위, 중간, 아래 광고 템플릿 로드
  var templates = {
    top: $templateContainer.eq(0).html(),
    mid: $templateContainer.eq(1).html(),
    bottom: $templateContainer.eq(2).html()
  };
  // 기본 구글 광고 오브젝트
  var adsbygoogle = window.adsbygoogle || [];

  // 본문 상단에 광고 넣기
  $areaView.prepend(templates.top);
  // 본문 하단의 광고 넣기
  $areaView.append(templates.bottom);

  // 이미지가 존재 할때에만 중간 이미지 바로 밑에 광고 넣기
  if (imgLength > 0) {
    $images.eq(nthInsert).after(templates.mid);
  }

  // 로드된 광고 템플릿 갯수 만큼 광고 로드하기 (구글광고 정책 상 최대 3개 이므로 주의!)
  for (var i = 0; i < $areaView.find(".adsbygoogle").length; i++) {
    adsbygoogle.push({});
  }
});
</script>

위 코드는 주석에 설명되어 있는대로 jQuery를 사용해서 티스토리 본문, 중간, 하단에 구글 광고를 넣고, 삽인된 광고 갯수만큼 구글에 요청을 보내, 로드하는 코드입니다.

그냥 3번 광고 요청을 하지 않고 존재하는 광고 갯수를 확인해서 갯수 만큼 요청을 보내는 이유는 모바일 환경 또는 이미지가 없는 포스트의 경우, <ins>태그 갯수가 3개 미만이 될 수 있기 때문입니다.


이렇게까지 하는 이유

그냥 애드센스 코드에서 준대로 복붙을 해서 적용해보니 JavaScript 콘솔 창을 보는데 에러가 나있는 모습을 보기 싫었습니다.

블로그에 쓴 포스트 마다 이미지가 있을 수도 있고 없을 수도 있기 때문에 유연하게 이미지가 하나 이상 있으면 광고 3개 (상단, 중간, 하단), 없으면 2개 (상단, 하단)이 로드 되도록 하고 싶어서 이렇게 코드를 작성하게 되었습니다.

현재 이 블로그도 위 코드를 사용해서 광고를 로드하고 있습니다.


저작자표시 비영리 변경금지

'JavaScript' 카테고리의 다른 글

AngularJS의 Model이 바뀌었는데 UI가 바뀌지 않을 때  (0) 2014.04.22
구글의 AngularJS 프레임워크  (3) 2014.04.10
CoffeeScript로 즐거운 JavaScript 코딩하기  (2) 2012.07.19
JavaScript 비동기 프로그래밍 소개 및 setTimeout 최소값  (0) 2012.03.21
JavaScript 에서 객체지향 프로그래밍(OOP) 하기  (0) 2012.03.09
공유하기 링크
'JavaScript' Related Articles more
Comments