본문 바로가기

IT/블로그

구글 애드센스 팁 - 블로그 티스토리 추가 방법 (여러 개 동시에)

구글 애드센스 블로그 추가 방법 - 특히 여러 개 동시에 올리는 방법

구글에서 승인이 난 사용자라면, 한페이지에 구글 애드센스 Adsense 를 최소 하나 이상은 추가하게 되어 있다. 이때 애드센스 모듈을 추가할 때 애매한 구석이 있다. (중복된 javascript 코드가 여기저기 심어지는 것을 느끼게 된다. ) 찝찝함을 참지 못하고 여기저기 살펴보고 있다.

먼저, 구글 애드센스 블로그에 올리기 

한개 정도면 별 고민할 필요도 없다. ¯_(ツ)_/¯

아주 간단하게 구글애드센스 페이지에 제공하는 아래의 예제 코드 같은 것을 가져와서 스킨페이지나, 자신의 테마에 붙여넣기 하면 끝~~😁

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 광고단위이름 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

전체를 그냥 페이지 스킨에 넣으면 대충 나오긴 한다.

구글 애드센스 여러 개 한페이지에 추가하는 방법

2개 이상의 구글 애드센스를 한 페이지에 추가하는 방법은 아래와 같은 2가지 방법으로 정리할 수 있다.

실제 예제 html 코드를 올려뒀으니, 각자의 티스토리 스킨이나 블로그 테마에 아래와 같이 작성하면 될 듯 하다. 🍻

HTML 코드 방식

아래와 같이 HTML 코드만 추가해도 된다.

https://gist.github.com/bjnhur/b4f36e140c8ebdaa969ed60513b4f739

 

multiAdsenseLoadExample.html

GitHub Gist: instantly share code, notes, and snippets.

gist.github.com

<html>
  <head>
    // Google Adsense 모듈을 위한 라이브러리 코드 추가하기
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  </head>
  
  <body>
    
    ...
    
    // 광고를 가운데 배치하기 위한 div1
    <div style="margin: 10px auto 10px;text-align: center">
      <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-xxxxxxxxxxxxxxxx" data-ad-slot="xxxxxxxxxx" data-ad-format="auto" data-full-width-responsive="true"></ins>
      <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
    </div>

    ...
    
    // 광고를 가운데 배치하기 위한 div2
    <div style="margin: 10px auto 10px;text-align: center">
      <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-xxxxxxxxxxxxxxxx" data-ad-slot="xxxxxxxxxx" data-ad-format="auto" data-full-width-responsive="true"></ins>
      <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
    </div>

    ...
    
    // 광고를 가운데 배치하기 위한 div3
    <div style="margin: 10px auto 10px;text-align: center">
      <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-xxxxxxxxxxxxxxxx" data-ad-slot="xxxxxxxxxx" data-ad-format="auto" data-full-width-responsive="true"></ins>
      <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
    </div>

    ...
    
  </body>
</html>

JQuery 코드 방식

중복코드가 여러군데 있는게 맘에 들지 않는다면, JQuery 기능을 이용하여 추가도 가능하다.

https://gist.github.com/bjnhur/4a66f00028a59bd9a3e0f2da3dc1add6

 

multiAdsenseLoadJQueryExample.html

GitHub Gist: instantly share code, notes, and snippets.

gist.github.com

<html>
  <head>
    // JQuery 라이브러리 추가하기, 다음 티스토리 스킨에서 활용중인 코드를 예제로 추가
    <script src="//t1.daumcdn.net/tistory_admin/lib/jquery/jquery-1.12.4.min.js"></script>
    // Google Adsense 모듈을 위한 라이브러리 코드 추가하기
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  </head>
  
  <body>
    
    ...
    
    // 광고를 가운데 배치하기 위한 div1
    <div style="margin: 10px auto 10px;text-align: center">
      <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-xxxxxxxxxxxxxxxx" data-ad-slot="xxxxxxxxxx" data-ad-format="auto" data-full-width-responsive="true"></ins>
    </div>

    ...
    
    // 광고를 가운데 배치하기 위한 div2
    <div style="margin: 10px auto 10px;text-align: center">
      <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-xxxxxxxxxxxxxxxx" data-ad-slot="xxxxxxxxxx" data-ad-format="auto" data-full-width-responsive="true"></ins>
    </div>

    ...
    
    // 광고를 가운데 배치하기 위한 div3
    <div style="margin: 10px auto 10px;text-align: center">
      <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-xxxxxxxxxxxxxxxx" data-ad-slot="xxxxxxxxxx" data-ad-format="auto" data-full-width-responsive="true"></ins>
    </div>

    ...
    

    <script>
    // push code for Adsense modules in the page
    // from https://www.pincoin.co.kr/blog/www/10/multiple-adsense-ads-on-a-single-page/
    $(window).on('load', function () {
      $(".adsbygoogle").each(function () {
        (adsbygoogle = window.adsbygoogle || []).push({});
      });
    });
    </script>
  </body>
</html>

코드 구현

참고페이지


만약, 위의 방법 중에 JQuery 를 이용한다면, 아래와 같이 먼저 라이브러리를 추가를 꼭 해줘야 한다.

티스토리 블로그의 왠만한 스킨들은 이미 포함되어 있을 가능성이 높다. 😊

JQuery 라이브러리 추가하기

JQuery 기능을 이용하기 위해서는, 라이브러리를 자신의 블로그 소스에 넣어야 겠죠.

모든 소스코드를 다 풀어서 넣을 필요없이, 아래 예처럼 JQuery 라이브러리 소스 위치를 넣어 주시면 제이쿼리의 기능을 자신의 블로그 홈페이지에 사용할 수 있습니다.

 

예1) 최신 버전을 원하시면,

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

예2) 다음 티스토리에 있는 스킨에 있는 내용,

<script src="//t1.daumcdn.net/tistory_admin/lib/jquery/jquery-1.12.4.min.js"></script>

 

jQuery- JQuery 공식홈페이지

 

jQuery

What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

jquery.com

참고페이지

 

[자바스크립트] CDN을 활용하여 jQuery 사용하는 방법

jQuery(제이쿼리)는 인터넷 개발자가 웹 페이지를 쉽고 빠르게 개발할 수 있도록 해주는 자바스크립트 기반의 프레임워크입니다. jQuery를 이용하면 순수 자바스크립트만 사용할 때보다 두 배 이상으로 빠르게 웹을 개발할 수 있습니다. 그리고 개발 속도만 빨라질 뿐만 아니라 사후 유지보수도 간단해지기 때문에 비용 절감에도 장점이 있습니다. 티스토리를 …

www.walterz.net

용돈이 구글 애드센스로 왕창 들어와서 의자에 앉아 바다 풍경이나 즐기고 살면 좋으련만~~ 🎶🎵

chairs from https://stocksnap.io/photo/TEVFLON21K