본문 내 광고 삽입을 할 경우 수익률이 좋아서 꽤 많은 분들이 본문 내에 광고를 삽입하고 있습니다.


    가장 초보적인 방법으로 글을 쓸 때 마다 광고 코드를 붙여넣는 방법이 있고,


    서식에 광고코드를 등록해두어서 불러오시는 분들도 있습니다.


    그러나 이런 방법들의 단점은 나중에 광고 코드를 수정해야 할 때, 모든 게시물을 일일히 수정해주어야 한다는 점 입니다.



    그래서 이전에 생각했던 방법이 다음 글이었습니다.

    [COMPUTER TIP] - 티스토리 본문 중간에 광고 넣기


    서식에 자바스크립트 문서를 불러오도록 해놓고, 자바스크립트 문서에 광고코드를 삽입해놓는 방식이었습니다.


    나중에 수정을 할 때는 글마다 일일히 수정할 필요 없이 자바스크립트 문서만 수정해서 다시 업로드하면 모든 게시물에 적용이 되었습니다.


    그러나 글에는 정책위반이 아니라고 우겼지만.. 이 방법은 애드센스 정책위반으로 부터 완전히 안전하다고 할 수는 없습니다. 소스보기를 했을때 ie에서는 삽입된 광고코드가 안보였거든요.(ie도 개발자모드로는 보입니다.)


    물론 이 방법을 1년 넘게 사용했지만 따로 경고나 제재를 받지는 않았습니다. 그러나 애드센스 정책관리팀은 이용 목적에 따라 다르다는 애매한 태도를 보이고 있어서 언제든지 정책위반이라고 하면 할말이 없습니다..



    그래서 오늘 소개해드릴 방법은 스크립트 문서를 불러오는 것이 아닌 애초에 skin.html에 광고를 삽입해놓고


    나중에 본문 중간으로 광고의 위치를 바꾸는 방법입니다.


    (skin.html을 이용하기 때문에 모바일에서도 적용하려면 반응형 스킨을 사용해야합니다.)


    아이디어는 http://blog.readiz.com/65 여기서 차용했습니다.


    이 방법의 장점

    본문 내에는 광고의 위치만 지정하므로 삽입해야하는 코드가 짧고,

    나중에 글마다 일일히 수정할 필요 없이 skin.html에서 일괄적으로 수정이 가능합니다.

    (처음에 한번은 글마다 광고삽입위치를 지정해주기위해 불가피하게 글마다 일일히 한번은 수정이 필요합니다.)


    간단히 원리를 소개하자면, 본문에는 <div id="adhere"></div>라는 간단한 태그만 들어가고, skin.html에 포함시킨 광고코드를 본문 내로 이동시키는 것입니다.


    추후 광고 코드 수정시에는 skin.html만 수정하면 되므로 자바스크립트 문서를 수정하는 것 보다 훨씬 편리합니다.


    그리고 광고 코드 수정이 없어 정책위반 위험이 거의 없습니다.

    위치를 옮기는 것에 대한 정책 위반여부 문의에 이런 답변을 받았습니다.

    현재로서는 알려주신 방법에서 특별히 문제가 될 부분이 보이지는 않습니다. 


    하지만 정책 팀의 의견은 다를 수 있으며, 잠재적으로 애드센스 상에서 어떠한 변화가 있을 때는 위반의 우려가 있을 수도 있으므로 정책 팀으로부터의 안내 이메일을 놓치지 않도록 항상 유념해 주시기 바랍니다.

    애드센스측에선 아무래도 확언을 하게되면 정책상 문제가 발생할 수 있기 때문에 애매한 답변을 해줄 수 밖에 없습니다.

    그러나 이처럼 따로 규정되지 않은 행위에 대해서는 광고주에게 피해가 가지 않는 선에서 따로 적발하지 않는 것 같습니다.

    이 방법을 악용을 하지 않는 이상 정책위반 경고를 받을 일은 없을 것 입니다.

    행여나 경고를 받게되더라도 일괄적으로 광고를 제거하기 또한 간단하기 때문에 안심하셔도 됩니다.


    .



    적용법

    @이 방법을 모바일에서도 적용하기 위해서는 반응형 스킨을 사용해야합니다.

    (티스토리 모바일웹 사용을 하지 않아야 합니다.)


    1.먼저 다음과 같은 html 내용으로 본문삽입용 구글애드센스 서식을 만들어둡니다. 

    나중에 본문에서 광고가 표시될 위치만 지정해주는 역할을 하게됩니다.

    .<div id="adhere"></div>



    (앞에 점을 찍은 이유는 점을 찍지 않고 저장하면 티스토리 편집기가 아무것도 없다고 인식해서 div태그까지 지워버리기 때문입니다..  꼭 점이 아니더라도 원하시는 글자 넣으시면 광고 위치 확인하는데도 편할겁니다)


    저장을 눌러 서식을 완성합니다.


    2. HTML/CSS수정에 들어가서 skin.html에 아래 코드 전체를 복사헤서 </body>바로 윗줄에 붙여넣습니다.

    (※아래는 예시입니다. 파란색 부분에 본인의 애드센스 광고 코드를 통째로 넣어주세요.)

    <!-- 본문으로 이동할 광고 -->

    <div id="movead" style="width:100%;text-align:center;">

    <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="클라이언트id"

         data-ad-slot="광고번호"></ins>

    <script>

    (adsbygoogle = window.adsbygoogle || []).push({});//취소선 부분은 삭제해주세요.

    </script>

    </div>

    <!-- 본문으로 광고 옮기기 -->

    <script type="text/javascript">

       function adLocate() {

         if($("#adhere").length=="1"){

          $("#adhere").append($("#movead"))

         } else{

          $("#movead").remove()

         };

       }

       $('document').ready(adLocate());

       (adsbygoogle = window.adsbygoogle || []).push({});//위에서 삭제한 부분이 여기 들어있습니다.

    </script>

    아래 세줄을 삭제하는 이유는 광고가 로딩된 이후에 광고가 삭제되면 정책위반이될 가능성이 높기때문에 로딩 시점을 광고이동 이후로 옮기는 것입니다.


    3. 시도해보고 되면 이대로 끝, 안되면 2.번에서 추가한 스크립트 윗줄에 다음을 삽입합니다.

    (대부분의 반응형 스킨에서 불필요한 작업입니다.)

    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> 


    앞으로 본문 중간에 광고를 삽입할 때는

    (혹은 이미 작성한 포스트에 광고가 삽입될 위치를 지정할 때)

    이제 포스팅을 할 때, 광고를 삽입하고 싶은 위치에 커서를 이동시킨 후

    오른쪽 메뉴에서 서식을 클릭해 1에서 작성해둔 서식을 한번 클릭만하면 됩니다.

    삽입될 위치에 아까 표시해둔 .이 표시될 것이고 포스트를 발행한 뒤 광고가 제대로 이동하는지 확인해보시면 됩니다.



    이미 자바스트립트 문서를 불러오는 방법을 사용중이시던 분들은



    위 방법도 문제 없지만,아래 글을 참조하여 좀 더 세련된 방법으로 바꿔보세요!

     - 유동성있는 광고 구현을 위한 애드센스 코드 삽입 방법


    Posted by 뭐하라

    문제가 있나요?(?)

    내용상 오류가 있음 업데이트 필요 화면이 깨짐 기타 수정이 필요함
    • 이전 댓글 더보기
    • BlogIcon 이바구™
      2014.07.12 09:35 신고

      이 방법 너무 좋겠더라구요.
      적용하고 트랙백 남깁니다.

    • BlogIcon 가온누리™
      2014.08.10 23:38 신고

      알찬 정보 정말 많네요.

      비슷한 소스를 다른곳에서 보고 적용했다 이 소스로 교체하였습니다.
      좋은 정보 감사드립니다.

      그리고 제가 이 소스를 기억하기위해 제 블로그에 간단하게 글 작성을 했습니다.

      • BlogIcon 뭐하라
        2014.08.10 23:43 신고

        글 써주시면 저야 좋죠^^
        이것 보다도 세련된 방법이 있어서 적용중인데, 요즘 바빠서 포스팅을 못하고있네요. 나중에 포스팅 하게되면 알려드리겠습니다
        먼저 보고 싶으시면 http://nubiz.tistory.com/487
        여기서 append를 사용하는 부분 응용하시면 됩니다.

    • BlogIcon 이바구™
      2014.08.21 15:16 신고

      전 애드센스를 왼쪽정렬하고 싶은데 왜 안될까요?
      <div id="movead" style="width:100%;text-align:center;">
      부분을 마지막에 left로 바꿔도 안되네요.
      무슨 방법이 없을까요?

      • BlogIcon 뭐하라
        2014.08.21 15:22 신고

        왼쪽정렬만 하고싶으신거면 style을 아예 빼시면 됩니다.
        <div id="movead">
        왼쪽 정렬하고 글과 나란히 하고싶으시면
        <div id="movead" style="float:left"> 하시면 됩니다.

      • BlogIcon 이바구™
        2014.08.22 09:01 신고

        <div id="movead">해도 왼쪽정렬이 안되는데 왜 그럴까요?
        <div id="movead" style="float:left">했더니 아래 글이 올라와서 애드센스와 나란히 정렬되네요.
        왼쪽정렬만 하고 싶은데요.

      • BlogIcon 뭐하라
        2014.08.22 09:20 신고

        확인해보니 지금 코드가 <div id="up-1"><div id="up" style="width:100%;text-align:center;">
        ~~~
        </div></div>
        이렇게 들어가있네요. id="up"으로 지정한 div의 style을 빼주시면 됩니다

      • BlogIcon 이바구™
        2014.08.22 09:32 신고

        제가 하고 싶은 것은
        위에 애드센스는 중간정렬하고 본문 아래의 리더스타임은 왼쪽정렬하고 싶습니다.
        코드는 <!-- 리더스타임 하단 삽입 --> 이 부분입니다.
        번거롭게 해서 죄송합니다.

      • BlogIcon 뭐하라
        2014.08.22 09:41 신고

        리더스타임 광고자체가 가운데정렬기능을 갖고있네요.
        리더스타임 스크립트에서 폭조절이 가능하다면 100%로되어있는걸 300px로 수정하거나
        #cpt_script_frame {width:300px !important}
        을 css에 추가하시면됩니다.

      • BlogIcon 이바구™
        2014.08.22 10:01 신고

        지금 생각하니 리더스타임이 자동으로 늘어나는 기능이 있다고 하더라구요.
        CSS에 "#cpt_script_frame {width:300px !important}"를 넣었더니 왼쪽 정렬이 되네요.^^
        감사합니다.

    • BlogIcon 이바구™
      2014.08.26 10:53 신고

      안녕하세요.
      또 질문 드리러 왔습니다.^^

      위에서 알려 드린대로 #cpt_script_frame {width:300px !important}를 넣었더니
      본문 하단의 리더스타임이 왼쪽정렬은 무사히 되었는데
      블로그에 있는 리더스타임의 전 광고가 300px로 제한되고 있네요.
      가로로 긴 광고(630px)도 있는데 어찌하면 좋을까요?

      • BlogIcon 뭐하라
        2014.08.26 21:42 신고

        답이 늦었네요
        간단히 선택자를 좀더 구체화해주시면 됩니다.
        #down > #cpt_script_frame {width:300px !important}
        이렇게 넣으시면 될 것 같네요^^

      • BlogIcon 이바구™
        2014.08.26 21:49 신고

        되네요.
        역시 멋지십니다. ^^*

    • BlogIcon 토종감자
      2014.09.13 05:16 신고

      우와. 진짜 감사합니다. 너무 유용하게 씁니다.

    • BlogIcon wallel
      2015.01.09 14:04 신고

      감사합니다.
      덕분에 적용 잘 했습니다!

    • BlogIcon ][
      2015.03.02 00:14 신고

      뭐하라님 안녕하세요. 본 포스팅을 서브블로그에 적용하였는데요. (fastboot입니다.)
      광고가 최하단에만 출력이 되네요.
      포스팅 본문으로 불러 오질 못하고 포스팅화면에서도 최하단에 출력이됩니다.

      무엇이 문제일까요?

      • BlogIcon 뭐하라
        2015.03.02 00:14 신고

        jquery가 동작하지 않거나,
        광고가 이동할 위치를 못찾은겁니다.
        이런 오류에 대비해서 마지막에 링크된 방법이 더 안전하니 그쪽을 참고해보세요

    • BlogIcon ][
      2015.03.02 04:52 신고

      답변해주신대로 마지막 링크대로 적용하니 잘됩니다. 좋은팁감사드립니다

    • BlogIcon 궁금han
      2015.05.19 12:56 신고

      감사합니다. 적용이 잘 되네요.^^


    • 2015.09.21 15:22

      비밀댓글입니다

      • BlogIcon 뭐하라
        2015.09.21 16:21 신고

        기존 글들에 .<div id="adhere"></div>를 일일히 삽입하는 과정은 필요합니다.


      • 2015.09.21 16:25

        비밀댓글입니다


      • 2015.09.21 16:27

        비밀댓글입니다

      • BlogIcon 뭐하라
        2015.09.21 17:39 신고

        제 경험상으로는 수정해도 검색결과에는 영향이 없었습니다.
        하지만 수정으로 인해서 검색누락된다는 분들이 많으시더라고요. 주의하시고,
        상하단광고는 그냥 스킨에서 관리하는게 편합니다


    • 2016.01.28 07:12

      비밀댓글입니다

      • BlogIcon 뭐하라
        2016.01.29 19:57 신고

        상단광고에
        <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
        </script>
        이게 없네요
        이 스크립트의 갯수만큼 광고가로딩됩니다


      • 2016.01.30 08:54

        비밀댓글입니다


    • 2016.02.01 06:16

      비밀댓글입니다

      • BlogIcon 뭐하라
        2016.02.01 13:59 신고

        본문 마지막에 링크된 '유동적 광고 구현을 위한~'
        이 글에 '애드센스 삽입코드 생성기'라는 링크가 있습니다. 그걸이용하시면 됩니다


    • 2016.02.09 23:37

      비밀댓글입니다

      • BlogIcon 뭐하라
        2016.02.10 01:35 신고

        유동적 광고구현~ 이쪽이 좀더 안전하고 세련된방법입니다. 활용범위가 좀 더 넓죠
        물론 이글방법대로 계속사용하셔도 문제없습니다

    • BlogIcon 베스트네이버
      2016.03.31 17:57 신고

      고수님 고정형 스킨을 이용해서 본문에 3개를 넣을려고 할때 좋은 방법은 어떻게 될까요

      • BlogIcon 뭐하라
        2016.03.31 23:29 신고

        본문 상단 중간 하단넣으시면 되죠.
        상하단은 다른블로그 잘 참고해보시길.

      • BlogIcon 베스트네이버
        2016.04.01 15:21 신고

        감사합니다.

        덕분에 잘 해결했습니다.^^


    • 2016.05.14 12:27

      비밀댓글입니다

      • BlogIcon 뭐하라
        2016.05.14 12:30 신고

        광고코드를 숨기는건 애드센스 정책 위반입니다~


    • 2016.05.27 11:57

      비밀댓글입니다


      • 2016.05.27 12:08

        비밀댓글입니다

      • BlogIcon 뭐하라
        2016.05.27 12:25 신고

        로딩중 부분은 제가 만든 부분에 포함되지 않아서 잘 모르겠네요


    • 2016.09.18 21:17

      비밀댓글입니다

      • BlogIcon 뭐하라
        2016.09.18 21:27 신고

        function adLocate() {
        if($("#adhere01").length=="1"){
        $("#adhere01").append($("#movead01"))
        } else{
        $("#movead01").remove()
        };
        if($("#adhere02").length=="1"){
        $("#adhere02").append($("#movead02"))
        } else{
        $("#movead02").remove()
        };
        if($("#adhere03").length=="1"){
        $("#adhere03").append($("#movead03"))
        } else{
        $("#movead03").remove()
        };
        }


        이런식으로 바꿔쓰시면됩니다. 보이듯이 movead도 하나씩 바꿔주셔야합니다
        코드가 너무 길어지다보니 오류가 날 구석도 많아지게됩니다..

        여러개를 사용하실땐 이 방법보다는
        http://nubiz.tistory.com/509
        이걸 사용하시길 추천드립니다

    • BlogIcon 리비스타
      2016.11.19 23:43 신고

      <script>
      (adsbygoogle = window.adsbygoogle || []).push({});
      </script>
      위 명령어를 삭제하는 구체적인 이유가 궁금합니다. 초보자라서 이해가 잘 되지않네요. 부탁드립니다.

      • BlogIcon 뭐하라
        2016.11.19 23:45 신고

        스크립트 잘보시면 아래에 해당부분이 삽입돼있습니다
        안지우셔도 큰 문제는 없습니다

    • BlogIcon 빅에너지™
      2016.11.22 02:01 신고

      잘보고 배워갑니다. 잘되네요. 그런데, 서식이 날라가도 이전에 작성된 글에는 서식이 남아있는거 같네요. 좋은 글 감사합니다~

    • BlogIcon 주인장입니다.
      2017.03.26 06:27 신고

      진정한 개발자이시네요...

티스토리 툴바