한 페이지에 여러 개 애드센스 붙여넣기 : 핀코인

한 페이지에 여러 개 애드센스 붙여넣기

프론트엔드 | 2019-01-03 22:01 | 댓글 | 9,874 회

안녕하세요.

핀코인입니다.

핀코인 쇼핑몰은 네이버 키워드 광고 및 구글 애드워즈 광고 등 여러 곳에 광고비를 지출하고 있습니다. 이러한 광고비를 일부 충당하기 위해 핀코인 블로그는 구글 애드센스를 운영합니다.

애드센스의 수익률을 높이기 위해서는 한 페이지에 콘텐츠의 가독성과 품질을 지나치게 저해하지 않는 범위에서 여러 개의 광고를 삽입할 수 있습니다. 광고 수익률을 높이기 위해 너무나 많은 광고 삽입 또는 낚시로 클릭하게 만들 경우 애드센스 정책 위반으로 걸릴 수 있으니 이점은 또한 유의해야 합니다.

여러 개의 애드센스 광고 삽입을 위해서는 스타일시트, 자바스크립트(jQuery) 같은 몇 가지 배경지식이 필요합니다. 워드프레스 등 블로그 솔루션을 이용 중이며 별도의 프로그래밍 관련 배경지식이 없는 경우에는 서드파티 플러그인을 이용하는 것을 권장합니다.

여기서는 직접 설치하여 사용하는 방법을 설명합니다.

한 웹 페이지에 구성은 아래와 같습니다.


<html>
  <head>
    <style type="text/css">
      .adslot1 {
      width: 320px;
      height: 100px;
      }
      @media (min-width: 768px) {
      .adslot1 {
      width: 728px;
      height: 90px;
      }
      }
    </style>
  </head>
  <body>
    <div>
      <ins class="adsbygoogle adslot1"
        style="display:block"
        data-ad-client="ca-pub-xxxxxx"
        data-ad-slot="xxxxxx"
        data-ad-format="auto"
        data-full-width-responsive="false"></ins>
    </div>
    <div>
      <ins class="adsbygoogle adslot1"
        style="display:block"
        data-ad-client="ca-pub-xxxxxx"
        data-ad-slot="xxxxxx"
        data-ad-format="auto"
        data-full-width-responsive="false"></ins>
    </div>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
      integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
      crossorigin="anonymous"></script>
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <script>
      // 동적 푸시
      $(window).on('load', function () {
        $(".adsbygoogle").each(function () {
          (adsbygoogle = window.adsbygoogle || []).push({});
          });
        });
    </script>
  </body>
</html>

위 코드는 일부러 설명을 위해 *.css, *.js 파일로 분리하지 않았습니다. 실제로 좀 더 다양한 환경에서 구조화해서 사용하고자 할 경우에는 별도로 파일로 분리할 수 있습니다. 저희는 Django를 사용하기 때문에 그에 알맞는 템플릿 문법으로 좀 더 구조화했습니다만 나중에는 좀 위젯/템플릿 라이브리러 형태로 제작 배포해보고 싶습니다.

이제 코드를 자세히 살펴보도록 하겠습니다.

1. 스타일 코드

가장 상단의 <head> 태그 안에 <style> 태그로 미디어 쿼리를 사용하고 있습니다. 이는 반응형 웹을 위한 코드로 모든 디바이스에서 320x100px 크기의 광고를 게재하고 디바이스 화면 폭이 768픽셀보다 큰 데스크톱 환경에서는 728x90px 크기의 가로 배너를 게재하도록 명시하는 것입니다.

2. 본문 광고 삽입

본문 <body> 태그 안에 여러 개의 <ins> 태그로 애드센스 광고가 삽입될 수 있습니다. 지나치게 많은 광고를 삽입할 경우에는 구글 애드센스에서 정책 위반으로 제재 받을 수 있으니 주의해야 합니다.

class 속성은 먼저 나중에 구글 애드센스 삽입 처리 자바스크립트가 참조하기 위해서 adsbygoogle 값이 반드시 필요합니다. 그 다음 adslot1 값은 디자인 스타일(크기)를 지정하기 위해서 <head> 태그 안에 미디어 쿼리로 선언한 스타일 속성 이름과 같습니다. 따라서 나중에 크기/디자인 변경은 CSS 스타일시트로 수정하게 됩니다.

위 예시에서는 adslot1만 있는데 만약에 가로 배너, 세로 배너, 직사각형 배너 등 여러개 두고 싶다면 adslot2, adslot3 등으로 알맞게 스타일을 선언하고 본문에서 적절하게 광고를 삽입하면 되겠습니다.

그리고 구글 애드센스 자바스크립트로 몇 가지 데이터를 넘겨줄 수 있습니다.

data-ad-client="ca-pub-xxxxxx"
광고 클라이언트의 고유 아이디값으로 애드센스 홈페이지에서 확인 가능합니다.
data-ad-slot="xxxxxx"
광고 클라이언트의 슬롯 설정 값으로 애드센스 홈페이지에서 확인 가능합니다.
data-ad-format="auto"
광고 형식으로 auto는 반응형으로 구글이 게재하도록 하는 것이고 horizontal, vertical, rectangle 형태로 명시적으로 지정할 수도 있습니다.
data-full-width-responsive="false"
전체폭 반응형으로 광고 게재할 지 여부인데 true로 할 경우 종종 광고가 테두리를 넘치는 경우가 있어서 false로 종종 지정합니다. 구글은 전체폭 광고가 수익률이 더 좋다고 말합니다.

3. 자바스크립트 애드센스 광고 동적 푸시

먼저 우리는 jQuery를 사용하겠습니다. 그냥 Vanilla JS(쌩짜 자바스크립트)로 작성할 수도 있지만 여전히 가장 대중적인 자바스크립트 라이브러리는 jQuery이고 이를 기준으로 설명합니다.

윈도우(브라우저) load 이벤트에 모든 adsbygoogle 클래스 속성을 찾아서 광고를 삽입시켜주는 jQuery 스타일 자바스크립트 코드입니다. 모든 DOM 객체를 확실히 불러왔을 때 처리하기 위해서 load 이벤트를 사용했습니다.

구글 애드센스 공식문서에서는 매 코드마다 쫓아다니면서 push 하도록 설명하고 있는데 이와 같이 문서 구조를 작성할 경우에는 향후 라이브러리로 만들 수 있을 것 같습니다. 핀코인의 경우 Django 기반 사이트이기 때문에 언젠가 django-adsense 라이브러리 프로젝트를 하나 만들어보면 재밌을 것 같네요.

위에서 설명한 것처럼 한 페이지에 구글 애드센스 광고를 여러 개 게재해서 증대된 블로그 수익으로 모두들 부자 되세요.

그리고 저희 핀코인 블로그도 많이 방문해주시면 많은 고객 여러분께 도움이 될 수 있는 좋은 글로 보답하겠습니다.

대한민국 1등 온라인 상품권 쇼핑몰 핀코인!

감사합니다.

#jquery #애드센스