애드센스 코드는 애드센스에서 제공해주는 코드를 바로 html에 붙여넣기만 해도 됩니다.


    그러나 광고 3개를 전부 그대로 붙여넣을 경우 코드 중복의 문제도 있고, 위치를 옮긴다거나, 광고를 삭제하는 등 


    유동적인 광고 구현에는 어려움이 있습니다.



    여기서 소개해드릴 이 방법은 현재 제가 사용하고 있으며 다음과 같은 특징을 가지고 있습니다.

    • HTML 구조상 광고가 삽입될 위치에 위치태그만 들어가고, 실제 광고는 나중에 스크립트를 통해 삽입되는 방식.
    • 페이지 내 위치와 상관없이 광고 코드가 html에서 모여있다. - 관리의 편리성
    • 광고가 표시될 위치를 마음대로 지정할 수 있다.
    • 광고의 삭제가 자유롭다.
    • 모든 수정이 끝난 다음에 광고가 로딩되기 때문에 정책위반의 위험이 없다.
    • 본문 중간에 삽입하는 경우에도 관리가 편리하다.

    이 방법을 적용하기 위한 조건은
    • HTML, 자바스크립트 이용이 자유로울것. (티스토리처럼)
    • 티스토리의 경우 반응형 스킨을 이용해야 모바일에서도 광고표시가 됩니다.


    구조상 차이점

    먼저 일반적인 애드센스 코드입니다.

    첫번째 스크립트는 페이지 내에 한번만 필요한 코드인데, 광고를 3개 삽입하면 3번이나 로딩되는 문제가 있습니다.



    소개드릴 방법의 코드 구조입니다.

    일반적인 광고 코드를 넣는 곳에는 제일 위의 <div id="Adsense1"></div>와 같은 코드만 들어가게됩니다. 이것은 단순히 광고가 들어갈 위치만 지정하게됩니다.

    아래쪽 스크립트는 지정한 위치에 광고를 삽입하는 코드입니다. 일반적 애드센스 코드의 ins태그 부분을 붙여주는 역할을 합니다.

    마지막으로 통합된 광고스크립트는 일반적 광고코드의 문제점인 코드중복문제와 광고갯수만큼 필요한 스크립트를 전부 합쳐 한번만 로딩돼도 작동하도록 수정한 코드입니다.




    유동적인 광고 구현을 위한 코드 삽입 방법

    1. HTML에서 광고가 삽입될 위치에 위치태그를 삽입합니다.

    <div id="Adsense1"></div>

    여기서 Adsense1은 아래 3.번 스크립트가 인식하게됩니다. 수정할경우 3.번 스크립트에서도 수정하셔야합니다.

    광고를 더 삽입하려면 Adsense2와 같이 수정해서 원하는 위치에 추가로 삽입하시면 됩니다.


    2. 본인의 광고코드 중 '<ins' 부터 '</ins>' 까지를 메모장 등에 붙여놓고 엔터를 모두 제거합니다.

    (고급코드의 경우 '<style>'부터 '</ins>'까지.)


    3. 아래 코드에 2.번에서 엔터를 제거한 코드를 붙여넣습니다.

    <script>window.jQuery || document.write('<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"><\/script>');</script>

    <script>

      $("#Adsense1").append('<ins ~~~생략~~~</ins>');

    </script>

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

    <script>$('.adsbygoogle:empty').each(function(){(adsbygoogle = window.adsbygoogle || []).push({});});</script>

    파란색부분은 jQuery를 사용중인경우 빼도 좋습니다. 모르면 그대로 두시면됩니다.

    빨간색 부분은 1.번의 id와 2.번에서 엔터를 제거한 광고코드를 넣는 부분입니다.

    광고를 추가하려면 바로 아랫줄에 추가하시면 됩니다. (애드센스니까 당연히 3개 까지!)

    예)

    <script>

      $("#Adsense1").append('<ins ~~~생략~~~</ins>');

      $("#Adsense2").append('<ins ~~~생략~~~</ins>');

      $("#Adsense3").append('<ins ~~~생략~~~</ins>');

    </script>


    4. 3.번에서 완성된 코드를 </body>바로 윗줄에 붙여넣습니다.


    초보자분들은 아래 링크를 클릭하시면 자동으로 스크립트를 만들어줍니다.

    애드센스 삽입코드 생성기



    유동적인 광고구현

    유동적인 광고구현은 구조상 통합된 광고로딩스크립트 전에 스크립트를 구현하시면됩니다.

    예)

    <script>window.jQuery || document.write('<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"><\/script>');</script>

    <script>

      $("#Adsense1").append('<ins ~~~생략~~~</ins>');

      if ($(".noAds").length!==0) {

        $(".adsbygoogle").remove(); 

      }

    </script>

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

    <script>$('.adsbygoogle:empty').each(function(){(adsbygoogle = window.adsbygoogle || []).push({});});</script>

    빨간색 부분을 추가함으로써 "class가 noAds인 요소(예: <div class="noAds></div>")가 있는경우 광고가 로딩 되기 전에  광고를 삭제"하게 됩니다.


    그밖에도 광고이동, AB테스트 등을 구현할 수 있습니다.


    이 방법이 적용된 예)

     - javascript를 이용한 애드센스 수동 A/B TEST 하기


     - 본문내 애드센스 광고 일괄 삽입하는 방법




    저작자 표시 비영리 동일 조건 변경 허락
    신고
    Posted by 뭐하라

    문제가 있나요?(?)

    내용상 오류가 있음 업데이트 필요 화면이 깨짐 기타 수정이 필요함
    • BlogIcon Maranatha_1040
      2014.10.22 16:01 신고

      좋은 글 잘보았습니다 :)

    • BlogIcon ][
      2014.12.01 20:30 신고

      뭐하라님. 이 방법은 반응형광고는 불가능한 방법인가요?^^;

      • BlogIcon 뭐하라
        2014.12.01 20:32 신고

        아니요~ 제가 지금 쓰고있는방법이 이방법이고 반응형으로 적용중이지요.
        어려우시면 링크되어있는 코드생성기를 이용해보세요

      • BlogIcon ][
        2014.12.01 20:33 신고

        <ins>~</ins> 까지 엔터를 지우라고하셔서
        반응형광고 코드의 스타일 부분을 어떻게 해야하는지 애매했어요.
        감사합니다^^


    • 2015.01.13 15:45

      비밀댓글입니다

      • BlogIcon 뭐하라
        2015.01.13 16:08 신고

        본문에 삽입하실거면 본문에,

        스킨에 삽입하실거면 스킨에 넣으시면 되는 것이죠~


        본문 내용은 광고위치 이동이 아닙니다.
        기존에 넣은 광고는 제거한 후 적용하셔야합니다


    • 2015.09.21 17:30

      비밀댓글입니다

      • BlogIcon 뭐하라
        2015.09.21 17:39 신고

        티스토리 어플은 스킨이 적용이 안돼서그렇습니다


    • 2016.01.21 18:13

      비밀댓글입니다

      • BlogIcon 뭐하라
        2016.01.21 19:47 신고

        제경우는 본문의 마지막에 붙여넣는 스크립트로 삽입합니다.
        본문과 마찬가지로 $("#Adsense1").append('<ins ~~~생략~~~</ins>');대신에

        $(".tt_article_useless_p_margin>p").last().append('<ins ~~~생략~~~</ins>')
        이게 들어갑니다. 이걸 쓰려면 포스트가 전부 문단 간격 없음에 체크되어있어야합니다


      • 2016.01.21 22:33

        비밀댓글입니다

    • BlogIcon 매일꿀정보
      2016.02.26 02:34 신고

      안녕하세요! 내용중에
      빨간색 부분을 추가함으로써 "class가 noAds인 요소가 있는경우 광고가 로딩 되기 전에 광고를 삭제"하게 됩니다. 라는 문장이,
      광고 중에 width0 height0 을 준 광고를 말하는 건지요?

      • BlogIcon 뭐하라
        2016.02.26 09:09 신고

        예시로 든 부분은 특수한경우입니다.
        정책상 애드센스를 달면 안되는 게시물에 아무 요소에나 noAds클래스를 추가해놓음으로서 그 게시물에는 광고가 나타나지 않게하는 방법입니다.
        width0 height0과는 관계없습니다

      • BlogIcon 매일꿀정보
        2016.02.26 12:56 신고

        감사합니다. :)


    • 2016.05.03 06:07

      비밀댓글입니다

      • BlogIcon 뭐하라
        2016.05.03 08:44 신고

        http://nubiz.tistory.com/570
        이것 사용하시면됩니다


    • 2016.09.14 04:05

      비밀댓글입니다

      • BlogIcon 뭐하라
        2016.09.14 08:24 신고

        네 전부 수정하셔야합니다
        이방법을쓴다고 속도면에서 그리 이득이있진않습니다
        저품질에대해선저도 잘 모르는데 제경험에미루어보면 스킨수정 아무리해도 저품질 잘 안걸립니다

    • 질문자
      2016.09.18 01:15 신고

      fast boot 스킨의 /body 부분 밑에 해당 코드를 삽입했는데요.
      여기서 문제가 발생했는데..
      /body 부분에 삽입을 하고 블로그로 돌아와서 보면 블로그의 최하단 부분... 거기 밑에 광고가 붙어있더라구요.
      최하단 부분..밑으로 광고가 보이지 않게 하는 방법이 있을까요??
      html 글쓰기소스에 div id로 들어가는 것은 현재 광고로 잘 출력이 되는데...
      /body로 붙여넣은 부분까지 블로그 가장 밑인 최하단 바로 아래에 광고로 붙어서 나오는게 문제입니다..ㅠㅠ
      답변 기다리겠습니다 ㅠㅠ!! 읽어주셔서 감사합니다.

      • BlogIcon 뭐하라
        2016.09.18 08:45 신고

        이 코드는 하단에 광고를 삽입하지 않습니다. 이전에 사용하던 코드를 안지우신것같네요

    • 질문자
      2016.09.18 11:41 신고

      티스토리 > html/css 편집 > html로 들어가서 가장아래 </body> 앞에 스크립트 넣는거 아닌가요? 그렇게 넣으면 블로그 아래 부분으로 스크롤해서 내려보면 광고가 거기에 붙어잇게 됩니다..ㅜㅜ

      • BlogIcon 뭐하라
        2016.09.18 11:42 신고

        이것외에 다른코드가 있지않은지 찾아서 지워보세요~

    • BlogIcon 뭉탱이_
      2016.09.19 03:39 신고

      질문하나 드리고 싶습니다.
      이 사이트처럼 본문옆에 세로 광고 삽입은 어떻게 구현하는건가요..??


    • 2016.09.27 13:46

      비밀댓글입니다

      • BlogIcon 뭐하라
        2016.09.27 15:16 신고

        큰 문제는 없습니다
        424번글대로 적용중이셨다면
        </body>위에 424번글의 코드만 삭제하시고 이 글에서
        $("#Adsense1").append('<ins ~~~생략~~~</ins>');
        이부분을
        $("#adhere").append('<ins ~~~생략~~~</ins>');
        이렇게 사용하시면됩니다.
        위치 삽입코드의 역할은 같으니까요


    • 2016.09.27 23:42

      비밀댓글입니다

      • BlogIcon 뭐하라
        2016.09.27 23:48 신고

        <ins ~~~생략~~~</ins>를
        <div style="text-align:center;"><ins ~~~생략~~~</ins></div>
        이렇게 묶으면될겁니다


    • 2016.10.26 20:22

      비밀댓글입니다

      • BlogIcon 뭐하라
        2016.10.26 20:24 신고

        각광고에대해서 고급코드생성기(http://nubiz.tistory.com/570)로 코드를 생성한 뒤 해당 코드를 다시 여기 삽입코드생성기에넣으시면됩니다


    • 2016.10.26 21:52

      비밀댓글입니다

      • BlogIcon 뭐하라
        2016.10.26 22:24 신고

        CSS문법을 모르시는것 같으니 자동 생성기를 이용해보세요.
        1.1번 광고를 http://nubiz.tistory.com/570 여기 넣고 설정 후 완성된 코드를 복사하세요
        2. 완성된 코드를 http://woooook.ivyro.net/adsenseHelper/index.php?id=codeMaker.html
        여기의 1번 광고 칸에 넣으시고 정렬등 설정을 하세요.
        3. 2번 광고와 3번 광고도 마찬가지로 작업 후 2.의 2번,3번 광고 칸에 넣으시고 체크를 누르시면 아래 완성된 스크립트가 나옵니다.

        완성된 코드에서 위치코드는 lab36님이 사용하시는 코드와 같으니 바꿀필요없고 아래 스크립트만 교체하시면됩니다


    • 2016.10.27 02:50

      비밀댓글입니다

      • BlogIcon 뭐하라
        2016.10.27 07:12 신고

        고급코드생성기로 만드실때 광고이름을 전부 myad1로 넣으신것같네요 광고이름을 각각 다르게하시면됩니다


    • 2016.10.27 11:45

      비밀댓글입니다


    • 2017.07.12 10:11

      비밀댓글입니다

      • BlogIcon 뭐하라
        2017.07.12 10:23 신고

        광고코드는 잘 들어갔는데요, 아직 활성화가 안된것같네요
        http://nubiz.tistory.com/646
        이 글을 참조해보세요


    • 2017.07.12 14:55

      비밀댓글입니다


    • 2017.09.06 19:02

      비밀댓글입니다

      • BlogIcon 뭐하라
        2017.09.08 17:46 신고

        material T스킨의경우는 html코드에 어디에 광고를 넣어야될지 표시되어있습니다.
        기타위치는 광고넣는 방법을검색해보시거나 스킨제작자에게문의해보세요

티스토리 툴바