본문 내 애드센스 광고를 일괄적으로 삽입하는 방법에 대해 알아보겠습니다.


    일단 모바일에서도 본문 내 일괄삽입한 광고가 나오게 하려면 반응형 스킨을 사용해야합니다.


    이 방법을 사용하면 이전에 작성한 포스트에도 일괄적으로 광고를 삽입할 수 있지만,


    광고가 삽입되는 위치도 일괄적이므로 자칫 자기도 모르게 정책을 위반할 수도 있습니다. 삽입될 위치에 주의해서 사용하시기 바랍니다.


    예를들어 본문의 가장 마지막에 광고를 넣는 경우를 생각해 볼 수 있습니다.

    이 경우 스킨에서 본문 하단에 삽입한 광고와 달리 공감버튼, 카테고리의 다른글상자 보다 위에 광고가 노출됩니다.


    또는 본문의 아주 중간에 광고를 넣을 수도 있고, 마지막줄 즘에 넣을 수도 있습니다.



    본문 내 광고 일괄 삽입 방법

    1. 먼저 에드센스에서 본인의 광고코드를 얻어서 아래와 같이 <ins>태그 영역을 메모장 같은 곳에 복사해둡니다.(파란색 부분만 남기고 지우세요)

    • 고정크기 광고의 경우

    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

    <!-- 본문 삽입 광고 -->

    <ins class="adsbygoogle"

         style="display:inline-block;width:320px;height:50px"

         data-ad-client="ca-pub-05"

         data-ad-slot="92"></ins>

    <script>

    (adsbygoogle = window.adsbygoogle || []).push({});

    </script>


    • 반응형 스마트 크기조정 광고의 경우

    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

    <!-- 본문 삽입 광고 -->

    <ins class="adsbygoogle"

         style="display:block"

         data-ad-client="ca-pub-0"

         data-ad-slot="15"

         data-ad-format="auto"></ins>

    <script>

    (adsbygoogle = window.adsbygoogle || []).push({});

    </script>


    • 반응형 고급코드의 경우(<style>부분까지 복사해둡니다.)

    <style>

    .life-is-an-egg { width: 320px; height: 50px; }

    @media(min-width: 500px) { .life-is-an-egg { width: 468px; height: 60px; } }

    @media(min-width: 800px) { .life-is-an-egg { width: 728px; height: 90px; } }

    </style>

    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

    <!-- 본문 삽입 광고 -->

    <ins class="adsbygoogle life-is-an-egg"

         style="display:inline-block"

         data-ad-client="ca-pub-05"

         data-ad-slot="2></ins>

    <script>

    (adsbygoogle = window.adsbygoogle || []).push({});

    </script>


    2. 복사해둔 코드에서 엔터를 모두 제거해 한줄로 만듭니다.


    3. 한줄로 만든 코드를 다음 양식 안에 붙여넣습니다.

    (카테고리의 다른글 보기 플러그인을 사용중이어야합니다.)

    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><!-- skin.html 내에 같은 코드가 이미 있다면 삭제 가능-->


    <script>

      $(".another_category").parent().children('p:last-of-type').append('<div class="insertedAd" style="padding:2em 0">여기에 위에서 복사해둔 코드를 붙여넣으세요</div>');

    </script>

    <script>

    (adsbygoogle = window.adsbygoogle || []).push({});

    </script>

    빨간색에 들어 갈 부분은 다음중에서 선택하거나 수정해서 사용하세요.

    • 본문의 마지막줄: p:last-of-type
    • 본문 밑에서 5번째 줄: p:nth-last-of-type(5)
    • 본문 위에서 10번째 줄: p:nth-of-type(10)

    ※본문 마지막 줄이 아닌경우 매우 위험한 방식입니다. 

    웬만하면 아래 포스트를 참조해서 중간 삽입 위치를 지정하는 방법을 이용하세요.

     - 관리가 편리한 티스토리 본문 중간 광고 삽입 방법



    4. HTML/CSS 수정에서 skin.html의 가장 아래쪽, </body>위쪽에 붙여넣습니다.


    ※본 스크립트는 jQuery를 사용합니다. 스크립트가 작동하지 않는다면 스크립트 윗줄에 다음을 추가해주세요.

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

    <!--[if lte IE 8]> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <![endif]-->


    Posted by 뭐하라

    문제가 있나요?(?)

    내용상 오류가 있음 업데이트 필요 화면이 깨짐 기타 수정이 필요함
    • 이전 댓글 더보기

    • 2014.11.14 14:07

      비밀댓글입니다

      • BlogIcon 뭐하라
        2014.11.14 14:33 신고

        $('.entry-content > p:has("span.imageblock")').eq(1).append("<p>test</p>")

        이런식으로 가능합니다.
        eq(1)이 2번째라는 뜻이고 eq(2)는 3번째입니다.


    • 2014.11.14 15:27

      비밀댓글입니다

      • BlogIcon 뭐하라
        2014.11.14 15:28 신고

        스크립트를 두개쓰시면됩니다~
        <script>
        $('.entry-content > p:has("span.imageblock")').eq(0).append("<p>test1</p>")
        $('.entry-content > p:has("span.imageblock")').eq(1).append("<p>test2</p>")
        </script>

    • BlogIcon confirm
      2014.11.30 18:21 신고

      뭐하라님 감사합니다!! 덕분에 공감 버튼 위에 애드센스를 넣을 수 있게 되었습니다. 정말로 감사합니다. ^^~~~

    • BlogIcon confirm
      2014.12.01 09:28 신고

      뭐하라님 반응형 스킨이 아닌 일반적으로 티스토리에서 제공되는 스킨에서
      모바일 화면상에 공감 버튼 위쪽으로 애드센스를 위치시키는 방법이 어디 없나요
      이것만 해결되면 완전할텐데 말이죠.. 물론 PC화면에서의 애드센스 위치는 공감 버튼 위로 덕분에 위치시켰어요. ㅎㅎ
      부디 빠른 댓글 부탁드릴게요..
      http://kimstreasure.tistory.com/ 이쪽 블로그 모바일 화면을 보니
      모바일 반응형 스킨? 이런거 입힌건 아니고 기본 스킨인데도 불구하고
      본문 하단에 보면 공감 버튼 위로 애드센스가 위치해 있어요.
      어떻게 하는지 분석좀 부탁드려요..
      물론 이쪽 주인님에게도 연락은 취해놓았어요..

      • BlogIcon 뭐하라
        2014.12.01 09:52 신고

        모바일스킨은 스크립트 수정이 안돼서 일괄적으로 하기는 불가능합니다.
        모바일에서도 적용하려면, 글마다 스크립트를 직접 삽입하시면야 되는데.. 그렇게 추천드리고싶진 않네요..
        이참에 반응형스킨으로 갈아타시는건 어떠세요^^


    • 2015.07.26 14:01

      비밀댓글입니다

      • BlogIcon 뭐하라
        2015.07.26 15:19 신고

        단가가 결정되는 시점이 스크립트 중에
        <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
        </script>
        이게 실행될때인데요, 이때는 이미 광고가 제위치에 삽입된 뒤입니다.
        본문의 스크립트를아무리 위로 올리셔도 광고가 결국 본문아래 삽입되면 단가가 3순위가 됩니다.

        하단광고의 단가를 1순위로 만드려면 html에서 가장먼저 로딩된광고를 본문하단으로 이동시켜야하는데, 이건 구글에서 허용하는 방식이 아닙니다 ㅠㅠ

        웬만하면 상단광고가 클릭률이 높은데 특이한경우시네요..
        지금으로썬 생각나는 방법이 없네요 죄송합니다

    • BlogIcon WisdomBox
      2015.09.11 15:07 신고

      감사합니다. 덕분에 해결했습니다. 자주 놀러올께요~


    • 2015.09.11 15:54

      비밀댓글입니다

      • BlogIcon 뭐하라
        2015.09.11 13:27 신고

        글작성하실때 문단간격없음에 체크해야지 .tt_article_useless_p_margin이 생기네요. 그렇지 않은 글의경우 스킨마다 본문의 class이름이 달라서
        좀더 일반적으로 적용할수있도록 마지막 스크립트를 조금 수정했습니다.
        카테고리의 다른글 플러그인을 활성화시켜야합니다.

    • BlogIcon Manager Wono
      2015.11.05 19:57 신고

      이글을 말씀하신거군요 :) 적용해보고 댓글달러 오겠습니다.

    • BlogIcon Manager Wono
      2015.11.05 20:29 신고

      매우 잘 적용되네요! 본문 중간 삽입하는 코드로 두개를 각각 적용하려고 하니 안되서 헤맸는데.. 감사합니다 :)

    • BlogIcon 매일꿀정보
      2016.01.21 23:53 신고

      하단에 일괄 적용을 했습니다. 근데 공감버튼과 광고 여백보다 위쪽 여백이 살짝 모자라네요. padding 2em으로 하면, 일괄적으로 아래위 여백 적용이 되는거 같은데요. 위쪽 여백을 좀더 주고 싶은데, 어디에 값을 입력해야 하는지요?


    • 2016.02.23 15:42

      비밀댓글입니다

      • BlogIcon 뭐하라
        2016.02.23 16:09 신고

        전자는 카테고리다른글 플러그인을 이용해 본문영역을 찾는것이고
        후자는 문단간격없음체크했을때 본문영역을 찾는구문입니다
        둘다 예외가 발생할수있어서 잘작동하는거쓰시면됩니다


      • 2016.02.23 16:51

        비밀댓글입니다

    • BlogIcon baikgom1004
      2016.02.23 20:49 신고

      반응형 광고로 가로100%로 되어있는데 광고의 좌우공백을 임의로 줄이는 방법이 혹시 있나요?

      • BlogIcon 뭐하라
        2016.02.24 09:41 신고

        이것과 고급코드 수정 도우미를 종합해서 사용하시면됩니다

    • BlogIcon Yomun
      2016.04.11 15:22 신고

      본문 제일 상단에다가 광고를 기재할라면 p:nth-of-type 이것만 넣으면 될까요?
      고급코드로 만든 광고가 티스토리 플러그인으로 안들어가지네요.

      • BlogIcon 뭐하라
        2016.04.11 16:22 신고

        본문 상단은 일반적인 방법대로 html에서
        _article_rep_desc_##]
        윗줄에 붙여넣으면됩니다

    • BlogIcon Yomun
      2016.04.11 21:40 신고

      mark5로 바꿨는데요. html에서 ctrl+f로 article 검색해보면
      _article_rep_author_##]" 랑 _article_rep_title_##]" 비슷한게 두개밖에 없어서요.ㅠ 제가 못찾은건가요?

      • BlogIcon 뭐하라
        2016.04.11 23:49 신고

        material T에는 주석(<!--내용-->)으로 추천 광고위치가 표시되어있습니다~
        본문 위 라고 되어있는 광고 위치를 찾아보세요~

      • BlogIcon Yomun
        2016.04.12 09:27 신고

        헉... 감사합니다.

    • BlogIcon 퍼블릭+
      2016.04.17 20:27 신고

      음,,, MARK5 사용자 입니다. 스킨에 소스를 넣었는데 플러그인 처럼 바로 적용이 안되죠?? 플러그인을 사용하려는데 안되서 말입니다.

      • BlogIcon 뭐하라
        2016.04.17 20:30 신고

        아 mark5에서는 another-category가 빠져서 적용이 안될겁니다. 임시로 카테고리 다른글 플러그인을 켜서 사용하시면됩니다

    • BlogIcon 퍼블릭+
      2016.04.17 21:22 신고

      자꾸 질문 드려서 죄송합니다 ㅠㅠ 스킨html에 있다면 삭제가능 이걸 삭제 해도 되나요???
      그리고 상단에 광고하려고 HTML 수정에서 <<내용부분>>을 찾으니 없고 <광고위치 모든 카드위> 라고 되어있는 부분만 있는데 그 위에 수정한 소스를 붙여넣어야 되나요?

      • BlogIcon 뭐하라
        2016.04.17 21:26 신고

        스킨에 다른애드센스가 포함되어있으면 지워도되지만 안지워도 상관없습니다.
        이 글은 본문중간 일괄삽입을 위한 글입니다 본문상단은 플러그인이용하시는게제일좋습니다

    • BlogIcon 퍼블릭+
      2016.04.17 21:28 신고

      네 감사합니다 !

    • BlogIcon 혜안 
      2016.08.23 22:12 신고

      이거 적용했더니 http://nubiz.tistory.com/636

      반응형 1단 스킨에서 사이드 광고 게재 방법(애드센스)

      이거랑 같은위치에 광고가 겹쳐서 나오던데요.. 어떻게 해야하죠?

      본문 위에서 10번째 줄에 고급형 광고 코드 넣고싶은데요
      스킨은 여기랑 같은거 사용중입니다.

      • BlogIcon 뭐하라
        2016.08.24 11:41 신고

        본문 10번째줄은 그다지 추천드리고싶지않습니다

    • BlogIcon 혜안 
      2016.08.23 22:13 신고

      그리고 모바일 중간에 광고 넣는법도 알려주실수 있나요??

      • BlogIcon 뭐하라
        2016.08.24 11:40 신고

        모바일웹스킨을 끄시면 동일하게적용됩니다

    • BlogIcon ZENEZ
      2017.04.19 02:18 신고

      정말 잘 읽었습니다. 깊은 내공에 감탄하고 가네요. ^^*