제이로그

티스토리

애드센스 - 티스토리 스킨에 2개 이상 구글 광고 추가하는 방법

B로그지기 2023. 12. 30.

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

 

애드센스 광고를 티스토리 스킨에 2개 이상 추가하는 방법은 티스토리 블로그의 스킨에 따라 구체적인 방법은 다를 수 있습니다만, 직접 수정하는 방법을 선택해 보자.

HTML 수정을 통한 광고 삽입

이 방법은 HTML 코드를 직접 수정하여 광고를 삽입하는 방법입니다.

  1. 티스토리 관리자에 로그인합니다.
  2. 관리 > 디자인 > 편집으로 이동합니다.
  3. HTML 편집을 선택하여 블로그의 HTML 코드를 수정합니다.
  4. 광고 코드를 삽입하고 저장합니다.

너무 일반적인 내용이죠. 실전으로 들어가 봅시다.

구글 애드센스 광고 코드 예제

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

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

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

HTML 코드 방식

아래와 같이 HTML 코드만 추가해도 된다. 핵심은 매 광고 코드 블럭에다가 아래 push 스크립트를 매번 같이 복사해 두는 것이다. 

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>
    
      <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>

      <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>

      <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>
    
  </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>
      <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>
      <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>
      <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>
    // 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는 CDN(콘텐츠 전송 네트워크)를 통해 제공되며, 다음은 jQuery를 웹 페이지에 추가하는 방법입니다.

 

CDN을 통한 jQuery 추가

가장 간단한 방법 중 하나는 jQuery를 CDN을 통해 불러오는 것입니다. HTML 문서의 <head> 태그 안에 다음과 같은 코드를 추가합니다. 이렇게 하면 최신 버전의 jQuery가 불러와집니다. 필요에 따라 버전을 변경할 수 있습니다.

<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

 

로컬 파일을 사용한 jQuery 추가

jQuery 파일을 로컬에 다운로드하고 프로젝트 폴더에 저장한 다음, 해당 파일을 사용할 수도 있습니다.경로는 jQuery 파일이 위치한 폴더의 상대 경로나 절대 경로를 나타냅니다.

<!-- 로컬 파일을 사용한 jQuery 추가 -->
<script src="경로/jquery-3.6.4.min.js"></script>

 

이제 jQuery가 웹 페이지에 추가되었으므로, jQuery를 사용하여 스크립트를 작성할 수 있습니다. jQuery는 $ 기호를 사용하여 함수를 호출하고 다양한 DOM 조작 및 이벤트 처리 기능을 제공합니다.

예를 들어, 다음은 jQuery를 사용하여 문서가 로드될 때 "Hello, jQuery!"를 출력하는 간단한 스크립트입니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery Example</title>
  <!-- jQuery CDN 추가 -->
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>

  <script>
    // jQuery를 사용하여 문서가 로드될 때 실행되는 함수
    $(document).ready(function() {
      // jQuery를 사용하여 "Hello, jQuery!"를 출력
      $("body").append("<p>Hello, jQuery!</p>");
    });
  </script>

</body>
</html>
 

참고페이지

지금까지 애드센스 광고 블럭을 티스토리 스킨에 추가하는 방법에 대해 간단히 알아봤는데..

작은 등대같은 도움글이 되길 :)

'티스토리' 카테고리의 다른 글

티스토리 글 수정 단축키 스킨에 추가하기 - 스킨 수정  (0) 2023.12.30
티스토리 2차 도메인 적용후 로그인 풀림 증상 해결해 보기  (0) 2023.12.30
티스토리 2차 도메인 DNS 설정 방법  (0) 2023.12.28
티스토리 2차 도메인 리다이렉트 처리 방법 - 스킨변경  (0) 2023.12.28
티스토리 2차 도메인 변경 후 글 수정 링크 만드는 방법 - 스킨 수정  (0) 2023.12.28

댓글

티스토리툴바