미니쿠파

티스토리 애드센스 상단 광고 2개 다는 방법

수익을 더 얻기 위해서나 여러 이유로 모바일에선 상단 광고를 한 개 두고 화면의 폭이 넓은 컴퓨터에선 상단 광고를 두 개 두시는 분들도 있습니다. 이번 글에선 다른 분이 올린 애드센스 상단 광고 2개 소스를 최적화하고 이걸 티스토리에 적용하는 법을 알려드리도록 하겠습니다.

애드센스 광고 코드 복사

애드센스 사이트

우선 상단 광고 2개 설정을 하기에 앞서 상단 광고로 달 광고 코드를 복사해야 합니다. 위 링크를 통해 애드센스 사이트에 접속한 다음 광고 탭을 클릭한 후 광고 단위 기준 버튼을 클릭해주세요.

광고 단위 기준 버튼을 클릭한 다음 반응형 광고를 하나 만드시거나 기존에 만들어놨던 반응형 광고를 클릭해주세요. 그런 다음 HTML 탭에서 검은 띠로 감쳐준 부분을 복사해주시면 됩니다.

상단 광고 2개 설정하기

상단 광고 소스는 구글 애드센스 (반응형) 플러그인을 통해 적용시켜 줄 수 있습니다. 블로그 관리 페이지에서 플러그인 탭을 클린한 후 구글 애드센스 (반응형)을 클릭해주세요.

그러면 나오는 창에서 광고 형태에서 상단 광고를 사용하는 광고 형태를 클릭한 후 '글 상단에 넣을 반응형 광고 코드를 붙여넣으세요.' 라고 적혀있는 입력 칸에 아랫 코드를 입력하면 됩니다. 

상단 광고 2개 소스 코드

<div class="topAdsense" style="text-align: center;">
    <style type="text/css">
        .adsense_1 {
            display: inline-block;
            width: 100%;
            height: 280px;
        }

        .adsense_empty {
            display: none;
            width: 20px;
        }

        .adsense_2 {
            display: none;
        }

        @media (min-width:680px) {
            .topAdsense .adsbygoogle {
                display: inline-block;
                width: 300px;
                height: 250px;
            }
        }

        @media (min-width:783px) {
            .topAdsense .adsbygoogle {
                display: inline-block;
                width: 336px;
                height: 280px;
            }

            .adsense_empty {
                display: inline-block;
            }
        }
    </style>
    <span>
        <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
        <ins class="adsbygoogle adsense_1" data-ad-client="ca-pub-★" data-ad-slot="●" data-ad-format="auto" data-full-width-responsive="true"></ins>
        <script>
            (adsbygoogle = window.adsbygoogle || []).push({});
        </script>
    </span>
    <span class="adsense_empty">
    </span>
    <span>
        <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
        <ins class="adsbygoogle adsense_2" data-ad-client="ca-pub-★" data-ad-slot="●" data-ad-format="auto" data-full-width-responsive="true"></ins>
        <script>
            (adsbygoogle = window.adsbygoogle || []).push({});
        </script>
    </span>
</div>

★부분에는 위에서 ca-pub-뒤에 것을 복사한 것을 붙여넣기 하면 되고, ● 부분에는 data-ad-slot 부분을 복사한 것을 붙여 넣기 하면 됩니다.

간단하게 설명하자면 화면의 폭이 679px 이하면 전체 폭을 차지하는 상단 광고 한 개를  나오게 하고 680px ~ 782px 이면 상단에 300px * 250px 광고를 두 개 나오게 합니다. 마지막으로 화면의 폭이 783px 이상이면 336px * 280px 광고를 두 개 나오게 하며 그 사이에 20px 여백을 삽입합니다.

모바일 환경(화면의 폭이 좁음) 에서는 전체 폭을 차지하는 광고가 더 수익이 좋다고 하여서 위와 같이 설정을 했습니다.

상단 광고 2개 적용 확인

정상적으로 소스 코드를 적용했다면 화면의 폭이 783px 이상이면 336px * 280px 광고가 두 개 나오며 그 사이에 20px 여백이 삽입되고 680px ~ 782px면 300px * 250px 광고가 두 개 나오며 그 사이에 여백은 삽입되지 않는 것을 확인할 수 있습니다.

그리고 이런 모바일 환경에선 화면의 전체 폭을 차지하는 광고가 한 개만 나오는 것을 확인할 수 있습니다.

여담

추가로 위 소스에서와 같이 display를 none로 두면 광고 요청이 발생하지 않고 광고가 게재되지 않는다고 합니다. 이런 식으로 광고를 처리하면 요청수나 노출수에 포함되지 않는 것 같습니다.

참고

"[블로그] PC와 모바일 광고의 숫자와 배치, 크기를 다르게 하는 방법 (with 애드센스)," 코딩팩토리, n.d. 수정, 2020년 5월 10일 접속, https://coding-factory.tistory.com/510.

관련 글

티스토리 블로그 평점 댓글 리뷰등 위젯 모음, 달기 - widgetpack

티스토리 자동으로 이미지 alt 태그 속성 달아주는 툴

[JS, 티스토리] 다른 페이지, 글 또는 개인 도메인 자동 이동