구글 블로거 블로그스팟 모든 포스팅 한 문단 뒤에 애드센스 달기

블로그에서 맨 위에 달린 애드센스 광고가 클릭율이 높다는 건 이제 상식입니다. 그래서 네이버에서도 한참 뒤에 블로거들에게 선택권을 줬었구요. 티스토리에서도 호시탐탐 기회를 노리다가최근 약관을 바꾸어가며 자사 명의로 pub번호의 애드센스 광고를 티스토리 사용자들에게 달았습니다.

그 덕분에 수입이 많게는 절반, 적게는 15%이상 깎인 티스토리 사용자들 중 상당수는 워드프레스 또는 구글 블로거(블로그스팟)으로 망명을 했는데요.

문제는 티스토리처럼 스킨(HTML 편집)광고를 자동으로(구글 애드센스 자동광고말고) 상단에 다는 방법이 많이 공유가 안되었더라구요.

특히 워드프레스는 그런 툴들이 많지만 구글 블로거는 방법이 있긴 있는데 영어 자료 이외에는 전무합니다.

구글 블로거에서 수동으로 광고코드를 복사붙여넣는 방법이 아닌 모든 포스팅에 한 단락 뒤에 애드센스를 자동으로 끼워넣는 방법을 공유합니다. 초반에 이렇게만 해두면 글쓰기에만 집중할 수 있게 되니 훨씬 효율적일 것입니다.

참고로 맨 상단보다 한 단락 바로 아래 광고가 클릭률이 더 나을 수도 있다고 해서 소개해드립니다.
먼저 blogger.com으로 접속한 뒤 테마에 들어갑니다. 그런 다음 맞춤설정 오른쪽에 역삼각형 드롭다운 버튼을 누릅니다.

그러면 HTML 편집이 나오는데요. 이걸 클릭하면 티스토리에서 스킨편집할 때 친숙하게 보던 HTML/CSS 편집화면이 뜹니다.

약 4400줄의 코드인데요. Ctrl + F를 누른 다음 아래 내용을 찾습니다.

<b:includable id='postBody' var='post'> 
또는 
id:'postBody'

찾고 나면 조금 더 아래에

<data:post.body/>

라는 곳이 있을텐데 이 부분을 다음과 같이 교체합니다.

<div id='quickfever-target'><data:post.body/></div>

다시말해 <data:post.body/> 앞뒤에 각각 <div id='quickfever-target'>와 </div>를 입력합니다.

그런 다음 <div id='quickfever-target'>앞에 아래와 같은 광고코드를 삽입합니다. 여러분들이 평소에 수동으로 입력하던 애드센스 광고코드라고 생각하시면 됩니다.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-format="auto"
     data-ad-slot="xxxxxxxxxx"
     style="display:block"></ins>
<script>
  (adsbygoogle = window.adsbygoogle || []).push({});
</script>

이제 마지막으로 <div id='quickfever-target'><data:post.body/></div>에서 </div> 뒷부분에 다음 스크립트를 집어넣습니다.

  <script type='text/javascript'>
  function insertAfter(addition, target) {
    var parent = target.parentNode;
    if (parent.lastChild == target) {
      parent.appendChild(addition);
    } else {
      parent.insertBefore(addition, target.nextSibling);
    }
  }

  var adscont = document.getElementById("quickfever-content");
  var target = document.getElementById("quickfever-target");
  var linebreak = target.getElementsByTagName("br");

  if (linebreak.length > 0) {
    insertAfter(adscont, linebreak[0]);
  }
</script>

이렇게 하면 다음과 같이 한 문단 뒤에 자동으로 광고가 삽입되는 것을 확인할 수 있습니다.

지금까지 구글 블로거 블로그스팟에서 모든 포스팅에 수동이 아닌 자동으로 한 문단 뒤에 애드센스를 다는 방법에 대해 정리해보았습니다.