본문 바로가기

기타 투자/블로그로 돈벌기

티스토리 본문에 자동으로 애드센스 광고 넣는 방법 2. 원하는 위치에 붙이기


티스토리에 애드센스 광고 삽입과 관련된 내용을 검색하면 광고를 넣을 수 있는 방법은 아래와 같이 3가지 내용입니다. 

1. 티스토리 구글 애드센스 "플러그인을 활용해서 삽입"
2. 티스토리 "글쓰기의 메뉴중에 외부컨텐츠를 활용해 HTML에 구글 애드센스 코드 삽입"
3. 티스토리 서식에 애드센스 "광고 서식을 만들어서 서식불러오기로 사용"

하지만 2,3번은 소스코드가 본문에 박혀버려서 나중에 일괄로 수정할때 문제가 생긴다고 말씀을 드렸었는데요. 

그래서 포스팅에서는 티스토리에 삽입된 이미지 뒤에 애드센스를 연결해서 붙이는 방법에 대해서 알아보았었습니다. 

티스토리 본문에 #자동으로 애드센스 광고 넣는 방법1-이미지 뒤에 붙이기

 

티스토리 본문에 자동으로 애드센스 광고 넣는 방법1. 이미지 뒤에 붙이기

제가 정말로 찾고싶었던 내용을 이래저래 보다가 알게되서 감동과 함께 글을 작성하게되었습니다. 글을 쓰기전에 정말 토마토(블로그 보러가기)님께 대단하시며, 감사드린다는 말씀드리고 싶습니다. 티스토리에 애..

jjisso.tistory.com

그렇게 제 블로그에 적용을 시켜서 1개월정도 운영을 해보았는데요. 확실히 수동으로 글쓰다말고 코드를 불러와서 넣어줘야하는 부담이 확 줄어들고, 수고도 줄어들고, 포스팅에만 집중할 수 있어서 너무 좋았습니다.

그런데 이미지뒤에 붙는 애드센스의 단점(?)이라면 단점이 보이기 시작했습니다. 이미지도 있는데 광고로 인한 이미지도 붙어서 연속해서 이미지가 보이는 현상이 있었습니다. 

글을 어느정도 보고 너무 글의 양이 많아서 보기가 힘들어질때쯤에 나오면 좋을텐데.. 라고해서 열심히 연구를 하고 스크립트를 서칭하기 시작했는데요

방법은 바로 P TAG를 사용하는 방법입니다. 우리가 글을 쓰게되면 엔터를 칠때마다 <p> ~~ </p> 태그(tag)가 생성이 됩니다. 아래의 이미지 처럼 말이죠

이미지1
HTML보기로 소스코드를 보면 내가 문장을 하나 쓸때마다 <P>~</P> 태그가 생성된다.

그래서 생각한 방법은 <P> tag의 숫자를 센다음에 중간중간에 tag다음에 넣는 것도 가능하겠다 싶어서 스크립트를 공부하기 시작했습니다. 이미지도 카운트해서 집어넣었으니 가능하겠죠? ㅎㅎ 몰라서 그렇지

어쨌거나 P태그를 카운트 하는 방법은 아래의 소스코드를 활용하시면 됩니다. 

P TAG 카운팅하는 SCRIPT
var anchors = document.getElementById("contents").getElementsByTagName("p");
var pcount = parseInt(anchors.length,10);

저도 무슨 내용인지는 잘 모릅니다. 그냥 구글링으로 찾아보니 저렇게 넣으면 되더라고요 ㅎㅎ

getElementsByTagName("p");   << p tag를 가져와라
getElementById("contents")    << id가 contents인 태그 안에있는 거
var anchors    <<  해당 내용을 anchors에 넣어라
var pcount = anchors.length   <<  anchors의 갯수를 세서 넣어라

해석하면 요정도의 소스코드가 되는 것 같습니다. 저기 id가 content라고 되어져 있는 부분은 대부분의 스킨이 아마 content라는 id 내에 본문글이 보여질껀데요. 만약에 다르게 되어있으신 분이 있다면.. 해당 부분을 찾아서 바꿔주면 됩니다.

이미지2
본문글은 <article id = "content"> ~~ </article> 내에 표시된다.

282번째 줄에 보이죠? 저 content내에 표시되는 모든 p tag의 숫자를 카운트 하게되는 것입니다. 

자~ 그렇게 카운트가 끝났으면 이제 원하는 위치에 붙여야겠지요? 

본문 중간에 애드센스 넣는 코드 script
var pcount = parseInt(anchors.length/2,10);

$("#adsenselink1").css({"display":"block"});
$("p").eq(pcount).after($("#adsenselink1"));
(adsbygoogle = window.adsbygoogle || []).push({});

위의 소스코드로 설명을 드리자면

2분의 1지점(중간)에 저는 애드센스를 붙이는 코드 입니다. 일단 1/2인 지점의 p카운드 를 합니다. 위에 2으로 나누기를 수행한 코드가 보이실 꺼에요. 저기가 제가 붙이고자 하는 위치입니다. 정확히 본문 중앙이죠

나머지 부분은 이전 포스팅(티스토리 본문에 #자동으로 애드센스 광고 넣는 방법1-이미지 뒤에 붙이기)에서 본 것과 같이 동일합니다. 다만 위치가 이미지냐 p tag냐의 차이일 뿐이지요

그리고 자바스크립트의 태그 뒤에 붙일때 앞에붙일꺼냐 중간에 붙일꺼냐 등도 개인이 지정할수 있습니다.

저는 보시는 것처럼 after($("#adsencelink1")); 이라고 뒤에 붙이라는 소스코드를 사용했는데요 크게 4가지가 있습니다. 이미지 붙이기에 사용했던 append()와 prepend(), befor(), after() 인데요

append() 사용할 경우,    <p> TEXT  [광고] </p>
prepend() 사용할 경우,   <p> [광고] TEXT </p>
before() 사용할 경우,      [광고] <p> TEXT </p>
after() 사용할 경우,        <p> TEXT </p> [광고]

위와 같은 형태로 들어가게되는 것이지요. 본인이 원하는데로 가져다가 함수를 사용하시면 됩니다. ^^

이상으로 티스토리 블로그 포스팅 내에 자동으로 애드센스 광고를 삽입하는 방법에 대해서 스크립트를 알아보았습니다. 

도움이 되셨다면.. 댓글 혹은 공감 많이많이 부탁드려요~ ^^

반응형
  • 주말엔 아이들과...평일엔 업무....짬이 안나네요...이렇게 좋은 내용들이 많은데~~!!! 매번 잘보고 갑니다!!!

  • 구글애드센스가 아직 승인이 안되어 해보고 싶어도 못하고 있어요..ㅠㅠ 오늘 메일로 구글에서 "계정 승인에 앞서 수정이 필요한 사항이 있음" 이라고 왔는데, 다음 애드핏을 먼저 설치해서인지.. 과다 광고페이지가 있거나 컨텐츠 가치가 없다는 식의 내용이네요. 대략 난감한 상황..^^;; 다음 애드핏을 내려야겠죠??

    • 나라님 블로그보면 바로 승인날것같은데 요즘 정말애드센스가 애드고시라고 불리는 이유가 있네요.. 저는 몇년전에 받아놨던거라 그렇게 힘든줄 몰랐네요 ㅠ

  • 컴맹은 울고갑니당 ㅋㅋㅋ 몬말인지 모르겠어요 ㅠㅠ 저는 그냥 플로그인으로 하고있어요.. 흑...

  • 좀 더 자세히 읽어보고 테스트 해봐야겠어요. 코드 분석은 어렵네요. ^^
    좋은 정보 감사해요~~

  • 와 대박이군요 저는 지금까지 일일히 서식-본문광고 세팅을 했었는데 이렇게 자동으로 될줄이야..

  • 안녕하세요 원하는 정보를 찾아 감사드립니다.

    그런데 저 코드들은 어디다가 넣으면 되는건지 여쭤봐도될까요?

    • 맨 마지막에 </html> 코드 앞에다가 넣응시면 됩니다. ^^

    • <script>
      var anchors = document.getElementByld("Content").getElementsByTagName("p");
      var pcount = parselnt(anchors.length,10);
      </script>

      <script>
      var pcount = parselnt(anchors.length/2,10);
      $("#adsenselink1").css({"display":"block"});
      $("p").eq(pcount).after($("#adsenselink1"));
      (adsbygoogle = window.adsbygoogle || []).push({});
      </script>

      이렇게 한 후 html 편집에서 마지막 </html> 위에 넣으면 된다는 말씀이신가요?

    • 넵 맞습니다. 그리고 이전 이미지 뒤에 넣기 포스팅을 참고하시면,
      <div id=xxxx>
      애드센스 광고 코드
      <div>
      요것도 넣어주셔야 합니다.^^; 좀 복잡하죠?

    • 계속 질문드려서 죄송합니다ㅠ
      광고 코드는 어디다가 넣어야할지...?

      저같은 사람을 위해 찌소님이 전체 코드나 html편집에서 넣은 코드 사진이 게시물에 있었으면 하는 마음입니다...

      친절히 설명해주셨는데 html/css 쪽 하나도 몰라서...

    • 제 포스팅 https://jjisso.tistory.com/242
      마지막에 가시면 노란색 표가 있는데 그안에 풀 소스코드가 있습니다.

      <script>만 댓글에 말씀하신 코드로 바꾸시면 됩니다. ^^;

  • <script>
    var anchors = document.getElementByld("Content").getElementsByTagName("p");
    var pcount = parselnt(anchors.length,10);
    </script>

    <script>
    var pcount = parselnt(anchors.length/2,10);
    $("#adsenselink1").css({"display":"block"});
    $("p").eq(pcount).after($("#adsenselink1"));
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>

    이거 그대로 붙여넣으면 되나요??
    조금더 자세히 알려주세요

    이미지뒤에 넣는거말고 본문중간지점 자동삽입만 적용하고싶어요

  • 익명 2020.03.12 16:46 댓글주소 수정/삭제 댓글쓰기

    비밀댓글입니다

    • 헛 그정도의 변수들까지 처리할 정도가 된다면 정말 코딩의 고수일 것입니다. ㅎㅎ 저는 그냥 이정도에서 만족하고 있어요 ㅎㅎ 감사합니다.

  • 안녕하십니까 선생님
    컨텐츠 내 자동삽입 광고는 넣을 수 없나요?
    신규 아이디라 링크광고가 없어서
    디스플레이나 컨텐츠 내 자동삽입광고를 넣어야되는데
    <p> 중간에 넣고 싶습니다.
    똑같이 따라해봤는데 안되네요
    방법이 있나요?

    • 애드센스의 자동삽입광고 스크립트를 사용하신다면 별도로 개인이 해줘야할 작업은 없습니다.

      하지만 <p>태그 뒤에 넣는 것은 제가 설명드린 방법을 활용하신다면 가능할 것으로 보여집니다. ^^ img뒤에 넣는 방법 포스팅을 함께 참고하신다면 도움이 되실꺼에요



  • <div id="adsenselink1" style="display:none;">
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <ins class="adsbygoogle"
    style="display:block; text-align:center;"
    data-ad-layout="in-article"
    data-ad-format="fluid"
    data-ad-client="ca-pub-숫자"
    data-ad-slot="숫자"></ins>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
    </div>

    <script>
    var anchors=document.getElementById("content").getElementsByTagName("p");
    var pcount=parseInt(anchors.length,10);
    </script>

    <script>
    var pcount=parseInt(anchors.length/2,10);
    $("#adsenselink1").css({"display":"block"});
    $("p").eq(pcount).after($("#adsenselink1"));
    (adsbygoogle=window.adsbygoogle||[]).push({});
    </script>

    선생님 이렇 똑같이 하고

    콘텐츠내 자동삽입 광고만 넣어줬는데 안됩니다.

    문제가 있을까요?

  • <div id="adsenselink1" style="display:none;">
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <ins class="adsbygoogle"
    style="display:block; text-align:center;"
    data-ad-layout="in-article"
    data-ad-format="fluid"
    data-ad-client="ca-pub-숫자"
    data-ad-slot="숫자"></ins>

    </div>

    <script>
    var anchors=document.getElementById("content").getElementsByTagName("p");
    var pcount=parseInt(anchors.length,10);
    </script>

    <script>
    var pcount=parseInt(anchors.length/2,10);
    $("#adsenselink1").css({"display":"block"});
    $("p").eq(pcount).after($("#adsenselink1"));
    (adsbygoogle=window.adsbygoogle||[]).push({});
    </script>


    위 코드를 </body> 에 넣어도 안나오고 </html> 위에 넣어도 안나오네용;;

    느낌은 알겠는데 분석이 어렵습니다. p 태그 갯수 세서 1/2 지점인 곳에 해당 광고를 넣어라 인데....

    위치랑 소스코드 한번만 손봐주실 수 있나요??ㅜㅡㅜ


  • 해결했습니다. 중간에 "content" 로 적어주셨는데 저는 "contents" 로 되어있어서 삽입했더니

    잘 나오네요. 이제 전체 p 태그 개수의 반이 아닌 10줄, 20줄 마다 광고가 들어가게 한번 연구해볼게요

    감사합니다.

    • 나누기 되어있는 숫자만 바꾸시면됩니다. ^^ 제가 운영하보니 각자 글을 쓰면서 엔터치는 숫자가 달라서 그런데 얼추 평균내보시고 적당히 적용하셔서 대박나시기 바랍니다. ^^

  • getElementById("content") 이부분을

    getElementsByClassName("article") 로 바꿨는데

    광고가 안보이거든요..왜그런지 알수 있을까요??



Visitor : 2,312,160
POWERED/DESIGN/COPYRIGHTⓒ BY JJISSO