정보/블로그 운영팁

티스토리 글 상단에 애드센스 광고 2개 삽입하는 방법

아미넴 2020. 12. 11.
반응형

글 상단에 광고가 2개 뜨는 블로그가 있는데 어떻게 하는지 궁금하신 분이 있을 것 같아서 포스팅 합니다.

 

관리 페이지에 수익 메뉴가 생기기 전까지는 플러그인이 제공되어 원하는 대로 태그 삽입이 가능했다고 하는데 지금은 플러그인 대신 광고 위치 선택하는 방법으로 변경되어 자동으로 알아서 들어가게 됩니다.

 

하지만 방법이 없는 것은 아니죠.

 

지금부터 수작업으로 글 상단에 애드센스 광고를 2개 넣어 보겠습니다.

주의) 일부 스킨은 본문 표시 영역이 좁아서 가로로 광고 2개가 들어가지 않을 수 있으니 참고 바랍니다.

임시 방책) transform 속성에 scale(1미만)의 값을 넣어 볼 수는 있을 것 같습니다.

 

목차

     

    광고 설정 해제

    먼저 기존에 설정한 광고 설정을 해제합니다.

    관리 페이지 > 수익 > 애드센스 관리로 이동합니다.

     

    본문 상단 광고를 사용 안함으로 선택합니다.

    저는 거의 수동으로 넣어서 대부분 사용 안함이네요 ㅎㅎ

     

     

    모바일웹 자동 연결 해제

    기본 모바일웹에서는 적용이 안되므로 사용안함으로 설정하겠습니다.

    관리 페이지 > 모바일 메뉴로 이동합니다.

     

    모바일웹 자동 연결을 사용하지 않습니다.로 선택합니다.

    이렇게 설정을 해야 모바일웹에서도 원하는 대로 광고를 띄울 수가 있습니다.

    티스토리에서 기본 모바일웹 설정을 제한하고 있으므로 불가피한 부분입니다.

     

     

    애드센스 광고 단위 생성하기

    먼저 애드센스 사이트에 접속합니다.

     

    광고 > 개요를 클릭합니다.

     

    광고 단위 기준 > 디스플레이 광고를 선택합니다.

     

    적당히 제목을 입력합니다.

     

    광고 크기는 반응형(기본값)을 선택합니다.

     

    간단히 만들기 버튼을 클릭합니다.

     

    그러면 광고 코드가 생성되는데 모든 광고 코드 구조가 똑같으므로 회색 선 부분 숫자만 잘 복사해 놓습니다.

     

    이렇게 하나를 더 만듭니다.

     

     

    수동 광고 삽입하기

    그럼 지금부터 수동으로 광고 코드를 삽입하겠습니다.

    CSS와 HTML 부분 소스 작성이 필요합니다.

     

    CSS설정

    관리 페이지 > 꾸미기 > 스킨 편집 으로 이동합니다.

     

     

    html 편집을 클릭 합니다.

     

    그럼 다음과 같은 HTML 에디터가 뜨는데 CSS 탭을 선택합니다.

     

    아래 코드를 작성합니다.

    .top-ads {
        text-align: center;
        margin-bottom: 10px;
    }
    .adsbygoogle.top-left {
        display: inline-block;
        width: 336px;
        height: 300px;
    }
    .adsbygoogle.top-right {
        display: inline-block;
        margin-left: 20px;
        width: 336px;
        height: 300px;
    }
    @media (max-width: 767px) {
        .adsbygoogle.top-right {
            display: block;
            height: 355px;
        }
    }

    그대로 사용하시면 될 겁니다.

     

    아래와 같이 그대로 넣으시면 됩니다.

     

    광고 코드 삽입

    HTML 탭으로 이동합니다.

     

    [##_article_rep_desc_##] 치환자를 찾습니다.

    s_article_rep > s_permalink_article_rep 하위에 있는 치환자를 찾으셔야 합니다.

    빨간 박스가 바로 글 상단 위치입니다.

     

    이 위치에 아래 코드를 삽입합니다.

    <!-- 상단 광고 2개 삽입 start -->
    <div class="top-ads">
        <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
        <div id="ad-top-left" class="revenue_unit_item adsense">
            <ins class="adsbygoogle top-left"
                        data-ad-client="ca-pub-0000000000000000"
                        data-ad-slot="1111111111"
                        data-ad-format="rectangle"
                        data-full-width-responsive="true"></ins>
            <script>
                if(window.innerWidth < 768) {
                    document.getElementById('ad-top-left').remove();
                } else {
                    (adsbygoogle = window.adsbygoogle || []).push({});
                }
            </script>
        </div>
        <div class="revenue_unit_item adsense">
            <ins class="adsbygoogle top-right"
                        data-ad-client="ca-pub-0000000000000000"
                        data-ad-slot="2222222222"
                        data-ad-format="rectangle"
                        data-full-width-responsive="true"></ins>
            <script>
                (adsbygoogle = window.adsbygoogle || []).push({});
            </script>
        </div>
    </div>
    <!-- 상단 광고 2개 삽입 end -->

     

    다음과 같이 삽입하셨으면 잘 하신 겁니다.

     

    0000000000000000, 1111111111, 2222222222 부분에 아까 복사해 놓은 본인의 광고 코드를 넣습니다.

    참고로 0000000000000000 부분은 본인이 사용하는 모든 광고 코드에서 값이 동일합니다.

     

    모든 작업을 완료했으면 적용 버튼을 누릅니다.

     

    결과 확인

    로드가 되기 전에 Google AdSense 로고로 자리가 잡혀있는 것을 확인할 수 있습니다.

     

    정상적으로 로드가 완료되면 다음과 같이 광고 2개가 잘 뜹니다.

     

    모바일웹에서도 하나만 잘 게재되는 것을 확인할 수 있습니다.

     

    혹시 바로 광고가 안 나오시는 분들은 30분~1시간 정도 여유를 두고 보시기 바랍니다.

     

    아무래도 넓은 영역에서는 광고를 1개보단 2개를 띄우는 것이 더 나아 보여요.

    감사합니다 :)

    반응형
    그리드형(광고전용)

    댓글82

    • 이전 댓글 더보기
    • 익명 2021.01.07 18:29

      비밀댓글입니다
      답글

      • 아미넴 2021.01.07 19:36 신고

        아하~ 다음 부분 찾아서 동일하게 넣어보시면 될거 같아요 ㅎㅎ

        <article id="content">
        <!-- 이 부분 입니다 -->
        <s_cover_group>

        한 번 해보시고 안되면 말씀해 주세요~

    • 익명 2021.01.08 08:02

      비밀댓글입니다
      답글

      • 아미넴 2021.01.08 18:58 신고

        아 그 부분을 제어하려면 좀 더 복잡한 로직이 들어가야 하는데..

        <script>
        if($('.entry-content').length == 0) {
        document.write('광고스크립트');
        }
        </script>

        위와 같이 글 본문이 있을 때와 없을 때를 구분할 수 있도록 작성해야 합니다. 자바스크립트에 대한 이해가 있어야 할 수 있을텐데 가능하실까요?

    • 익명 2021.01.10 07:20

      비밀댓글입니다
      답글

      • 아미넴 2021.01.10 10:47 신고

        아 그 방법도 괜찮아 보여요! 스킨 편집에서

        <script>
        $(document).ready(function() {
        if($('.entry-content').length != 0) {
        $('.list-top-ads').hide();
        }
        }
        </script>

        이렇게 하는게 더 쉽겠네요 ㅎㅎ

    • 안녕하세요 2021.01.13 04:11

      안녕하세요. pc에는 설정이 됐는데 모바일은 광고가 안뜨네요 ㅠㅠ 어떻게 해야하나요?
      답글

      • 아미넴 2021.01.13 10:32 신고

        네 안녕하세요~
        그대로 따라했는데도 안되시는건가요?
        이 방법은 모바일웹 자동연결도 해제하셔야 사용 가능합니다.

    • Super Mom & Daddy 2021.02.06 15:51 신고

      저도 애드센스 이제 되서 위 내용을 해보고려 하는데 ..하나만 떠서 ㅋㅋ...
      답글

    • 정이피디 2021.03.15 07:37 신고

      개발자님! 우와 성공했어요~ 하나씩 따라서 바꾸어보니깐 늠 재미있어요. 좋은 정보 쉽게 알려주셔서 감사합니다 :D
      답글

    • 익명 2021.03.22 15:20

      비밀댓글입니다
      답글

      • 아미넴 2021.03.22 19:17 신고

        안녕하세요~ 그대로 잘 따라하셨다면 안 될 리가 없을텐데.. 안 된다는 말씀만 듣고 어떤 부분을 잘못하셨는 지 짐작하기가 어렵네요 ㅠ 다시 차근차근 진행해 보세요 ㅎ

      • 송구이 2021.03.22 19:36 신고

        아 아미넴님 제가 코드 넣는곳을 잘못했었네요 ㅠㅠ ㅎㅎ 감사해요 ㅎㅎㅎ 잘 해결했습니다!

      • 아미넴 2021.03.22 19:44 신고

        네네 다행이에요 ㅎㅎ 잘 사용하시길 바랄게요!

    • 허니바이브 2021.04.02 14:02

      아미넴님 정말 유용한 설명 감사드립니다! 이 코드 쓰면 모바일일때1개 나오는것까지 같이 처리되는거죠? innerwidth < 767 이부분있어서요!
      답글

      • 아미넴 2021.04.02 18:57 신고

        네 안녕하세요. 맞습니다. 특정 너비 미만으로 좁아지면 광고가 하나만 나오도록 작성한 로직입니다 ㅎㅎ

      • 익명 2021.04.02 21:06

        비밀댓글입니다

      • 아미넴 2021.04.02 21:53 신고

        고정사이즈 광고인데 작게 뜨는건 제가 어떻게 제어할 수 있는 부분이 아닐거 같아요 ㅠ 구글 애드센스 자체 문제 같습니다

    • 서근 2021.04.10 02:34 신고

      안녕하세요 아미넴님~ 혹시 광고 두개 띄우는거까지는 성공했는데 실제로 광고가 나오는건 오른쪽 하나만 활성화가 되는같아서요 ㅠㅠ 뭐가 문제일까용?
      답글

      • 아미넴 2021.04.10 09:05 신고

        안녕하세요. 작성하신 코드를 다시 한 번 확인 부탁드릴게요. 000000, 1111111이 그대로 들어가 있는 것 같네요.

    • !#@__@#$ 2021.07.13 00:14 신고

      안녕하세요 아미넴님 좋은글 잘 참고하고있습니다! 질문이하나있는데 css코드는 작성해주신대로 스킨편집에 적용하고 html코드는 따로 글작성할때 수동삽입해도될까요? 제가원하는 위치가따로잇어서요 애드센스 위반사항은아니겠죠??ㅜ.ㅜ
      답글

      • 아미넴 2021.07.15 07:53 신고

        네 안녕하세요~ 원하는 위치에 광고를 삽입한다고 해서 애드센스 정책을 위반하는 건 아닙니다 ㅎㅎ
        아래 링크 참고 해보세요~

        https://support.google.com/webtools/answer/7347327

    • 익명 2021.10.17 04:55

      비밀댓글입니다
      답글

    • 익명 2021.10.17 10:00

      비밀댓글입니다
      답글

      • 아미넴 2021.10.17 10:22 신고

        몇가지 더 확인해 보니 중간 광고에 data-ad-slot도 빠진거 같고 인피드 광고에는 반복설정값이 입력이 되어야 하는데 값이 빠져 있습니다. 스킨 편집 인피드 광고 설정하는 부분에서 반복 간격 설정에 값을 정확히 입력해 보세요~
        상단 광고가 안나오는건 잘못된 부분이 있어서 영향받은게 아닌가 싶은데 일단 수정하고 다시 지켜봐야 할 것 같습니다.

    • 익명 2021.10.17 10:52

      비밀댓글입니다
      답글

      • 아미넴 2021.10.17 11:12 신고

        기본적으로 현재 블로그 내에 오류가 많이 있어서 정확한 진단이 어렵네요. 오류 때문에 정상적으로 되어야 하는 것 까지 영향을 받고 있는걸 수도 있어서 전체적으로 봐야 할 것 같습니다.
        아마 스킨이 정상적으로 적용이 안 되어 그럴 수도 있고 원인은 다양할 수 있습니다. 일단 모든 기능을 빼고 하나씩 차근차근 보시는 것도 좋은 방법입니다.

    • 부자아빠$$ 2021.11.12 08:21 신고

      안녕하세요 좋은 정보 감사드립니다!
      제 블로그도 pc에서는 정상적으로 작동하나 모바일에서는 잘 되질 않네요ㅠㅠ 혹시 참조할만한 부분이 있을까요..ㅠㅠ
      답글

      • 아미넴 2021.11.12 08:34 신고

        안녕하세요~ 모바일에서도 적용하려면 관리자 페이지에서 꾸미기 > 모바일 > 티스토리 모바일 웹 자동 연결을 사용하지 않습니다 로 설정하시면 됩니다 ㅎ

      • 부자아빠$$ 2021.11.12 08:36 신고

        자동연결 사용하지 않습니다도 해두었는데 모바일에서는 나오지 않아요ㅠㅠ흑흑..

      • 아미넴 2021.11.12 08:42 신고

        저는 잘 보이는데 어느 부분이 문제라는 말씀이신지 모르겠습니다~
        혹시 캐시나 쿠키의 영향을 받고 있을 수도 있으니 시크릿 또는 프라이빗 모드로도 확인해 보시기 바랍니다!

      • 부자아빠$$ 2021.11.12 09:00 신고

        앗.. 아이폰 사파리에서만 안보이는거였군요.. 감사합니다!!!^^

      • 아미넴 2021.11.12 09:34 신고

        사파리에서 안 되는 것도 문제인거 같긴한데 암튼 다행이네요 ㅎ

    • 애드센드 2021.11.18 05:36 신고

      좌측에 목차, 우측에 광고가 나오게 할 수는 없을까요?
      답글

    • 소금상식 2022.01.20 12:50 신고

      안녕하세요 아미넴님 :) 구글링하다가 알게되어 어제 새벽 포스팅 해주신대로 적용시켜보았습니다. 상하단 광고는 애드센스 로고 두개만 보이고, 관련글에 광고삽입한건 공란으로 보입니다. 시간이 지나면 광고가 뜨는건가요? 더 기다려야할까요?!
      답글

      • 아미넴 2022.01.20 18:46 신고

        안녕하세요~ 새로 작성한 글이 아니라면 보여야 정상일 것 같은데 무슨 문제인지는 모르겠지만 본인 블로그를 수시로 들락날락 거리면 광고가 일부 안 보이는 현상이 나타나기도 하더라구요. 크롬 시크릿 모드로 접속해도 같은 현상인지 확인해 봐야 할 것 같습니다.
        계속 안 보이신다면 아마 다른 문제일듯 싶은데 확인할 수 있는 링크 알려주시면 봐 드릴게요~

    • 소금상식 2022.01.20 18:48 신고

      오늘 운좋게 방문자가 많아 안보이는 상하단광고 2개를 임시로 삭제해뒀어요
      다시 시도했을때 또 문의드려도될까요ㅠ!?
      답글

    • 익명 2022.01.22 01:09

      비밀댓글입니다
      답글

      • 아미넴 2022.01.22 20:07 신고

        안녕하세요. 맨 윗 부분에 다음과 같이 언급했듯이 본문 폭이 좁아서 발생하는 경우 같습니다.

        주의) 일부 스킨은 본문 표시 영역이 좁아서 가로로 광고 2개가 들어가지 않을 수 있으니 참고 바랍니다.
        임시 방책) transform 속성에 scale(1미만)의 값을 넣어 볼 수는 있을 것 같습니다.

      • 답변해주셔서 감사합니다. ^^ 아니면 오디세이 스킨의 함수값이 위에 알려주신거처럼 똑같이 안나와서 제가 대충 비슷한 위치를 잡아서 한거였는데 그거 때문은 아닐까요?

      • 아미넴 2022.01.22 23:46 신고

        경우에 따라서 기존 스타일에 영향을 받았을 수도 있습니다. 정확한 확인을 위해서는 실제 적용하신 걸 봐야 할 것 같습니다.

    • 익명 2022.01.28 17:28

      비밀댓글입니다
      답글

    • 리꿀꿀 2022.05.09 23:23 신고

      안녕하세요!
      아미넴님 글보면서 열심히 애드센스 광고를 넣고있습니다. 감사합니다.
      질문이 하나 있는데요. 상단, 하단광고를 다 넣었음에도 상단은 상하로, 하단은 좌우로 됩니다. 북클럽이고 본문 사이즈는 1200px입니다
      혹시 방법 아실까요?
      답글

    💲 추천 글