정보/블로그 운영팁

수익 향상 꿀팁, 티스토리 글 중간에 애드센스 광고 자동 삽입

아미넴 2021. 11. 29.
반응형

글 중간에 광고를 자동으로 삽입하고 싶어하는 분이 계셔서 간단하게 생각해 보았습니다. 

 

적절하게 활용한다면 수익 향상을 기대해 볼 수 있을 것 같지만 글의 가독성을 해칠 수 있으니 신중하게 적용하시길 바랍니다.

 

목차

     

    중간 광고가 이미 적용된 글 거르기

    이미 중간 광고를 적절하게 적용한 글까지 영향을 미치면 안 될 것 같아서 그 부분은 걸러야 할 것 같다는 판단을 하였습니다.

     

    다음과 같은 함수를 하나 작성하겠습니다.

    function autoAppendAds() {
        $ads = $('.content-article > div > div > p > ins');
        $contents = $('.content-article > div > div > p');
        if($ads.length == 0 && $contents.length > 0) {
            //광고 삽입 코드 작성 예정
        }
    }

    $ads 변수에 jQuery를 이용하여 글 내에 광고 태그를 가져와 담았습니다. 만약 광고가 존재한다면 이 로직은 무시가 되며 광고가 하나도 없을 경우에만 자동으로 광고를 삽입하도록 하였습니다. 또한 $contents 변수에는 티스토리 글 한 라인마다 무조건 들어가는 p 태그 값을 가져와서 현재 페이지에 광고가 들어갈 수 있는 페이지인지를 판단하도록 하였습니다. 다만 사용하시는 스킨이나 적용한 광고에 따라 다를 수 있으니 각자 사정에 맞게 selector 부분을 수정하셔야 합니다.

     

    글 길이에 따른 광고 수 조절

    글이 짧은데 너무 많은 광고가 들어가거나 글이 긴데 너무 적은 광고가 들어가는 것을 방지하기 위해 저는 3가지 케이스로 나누어 보았습니다. 이 부분은 각자 원하는 만큼 개수를 줄이거나 늘려도 될 것 같습니다.

     

    p 태그 개수를 기준으로 10개 미만이라면 광고 1개를 삽입하도록 하였고 30개 미만이면 2개, 그 외에는 3개를 넣도록 한 로직입니다.

    function autoAppendAds() {
        $ads = $('.content-article > div > div > p > ins');
        $contents = $('.content-article > div > div > p');
        if($ads.length == 0 && $contents.length > 0) {
            if($contents.length < 10) {
                var index = Math.floor($contents.length/2);
                $contents.eq(index).after('<p><ins class="adsbygoogle" style="display:block;text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-xxxxxxxxxxxxxxxx" data-ad-slot="xxxxxxxxxx"></ins></p>');
                (adsbygoogle = window.adsbygoogle || []).push({});
    
            } else if($contents.length < 30) {
                var index1 = Math.floor($contents.length/3);
                var index2 = Math.floor($contents.length/3)*2;
                $contents.eq(index1).after('<p><ins class="adsbygoogle" style="display:block;text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-xxxxxxxxxxxxxxxx" data-ad-slot="xxxxxxxxxx"></ins></p>');
                (adsbygoogle = window.adsbygoogle || []).push({});
                $contents.eq(index2).after('<p><ins class="adsbygoogle" style="display:block;text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-xxxxxxxxxxxxxxxx" data-ad-slot="xxxxxxxxxx"></ins></p>');
                (adsbygoogle = window.adsbygoogle || []).push({});
    
    
            } else {
                var index1 = Math.floor($contents.length/4);
                var index2 = Math.floor($contents.length/4)*2;
                var index3 = Math.floor($contents.length/4)*3;
                $contents.eq(index1).after('<p><ins class="adsbygoogle" style="display:block;text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-xxxxxxxxxxxxxxxx" data-ad-slot="xxxxxxxxxx"></ins></p>');
                (adsbygoogle = window.adsbygoogle || []).push({});
                $contents.eq(index2).after('<p><ins class="adsbygoogle" style="display:block;text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-xxxxxxxxxxxxxxxx" data-ad-slot="xxxxxxxxxx"></ins></p>');
                (adsbygoogle = window.adsbygoogle || []).push({});
                $contents.eq(index3).after('<p><ins class="adsbygoogle" style="display:block;text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-xxxxxxxxxxxxxxxx" data-ad-slot="xxxxxxxxxx"></ins></p>');
                (adsbygoogle = window.adsbygoogle || []).push({});
            }
        }
    }

    p 태그가 10개 미만일 경우 중간 위치에 광고 태그 하나를 삽입하였고 30개 미만일 경우 1/3 지점과 2/3 지점에 광고를 하나씩 삽입하였습니다. 같은 방법으로 30개 이상일 경우에는 1/4, 2/4, 3/4 지점에 각각 하나씩 배치하였습니다.

     

    광고 미적용 글 확인

    다음과 같이 따로 글 중간 광고를 적용하지 않은 글에서 한 번 확인을 해 보겠습니다.

     

    월 100만원 불로소득 달성, 티스토리 블로그와 구글 애드센스

     

    월 100만원 불로소득 달성, 티스토리 블로그와 구글 애드센스

    어느덧 블로그를 시작한 지 1년 3개월이 지났습니다. 처음에는 블로그 주제가 대중적이지 않아서 그런지 방문자 수가 많이 늘지 않았습니다. 그러다가 최근 한 달 사이 운이 따라서 급격한 수익

    sangminem.tistory.com

     

     

    글을 쭉 내리다 보니 광고가 하나 보입니다. 위치가 아주 적절해 보이지는 않지만 목적은 달성을 한 것 같습니다.

     

    내려가 보니 하나가 더 있습니다.

     

    비교적 긴 글이라 정확히 3개의 광고가 삽입된 것을 확인할 수 있었습니다.

     

    간혹 같은 광고가 나오는 것은 어쩔 수 없을 것 같습니다.

    유용하게 사용하시길 바랍니다!

     

    (내용 추가)

    기능을 좀 더 개선한 업그레이드 버전도 참고하세요!

     

    광고 수익 향상 꿀팁, 글 중간 애드센스 광고 자동 삽입 업그레이드 버전

     

    광고 수익 향상 꿀팁, 글 중간 애드센스 광고 자동 삽입 업그레이드 버전

    얼마 전에 글 중간에 광고를 자동으로 삽입하기 위해 간단하게 작성한 로직이 있었는데 한계점이 보여서 좀 더 고민하여 새로 작성해 보았습니다. 최초 작성한 글이 궁금하신 분은 다음 링크 참

    sangminem.tistory.com

     

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

    댓글8

    💲 추천 글