정보/블로그 운영팁

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

아미넴 2021. 12. 4.
반응형

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

 

최초 작성한 글이 궁금하신 분은 다음 링크 참고 바랍니다.

 

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

 

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

글 중간에 광고를 자동으로 삽입하고 싶어하는 분이 계셔서 간단하게 생각해 보았습니다. 적절하게 활용한다면 수익 향상을 기대해 볼 수 있을 것 같지만 글의 가독성을 해칠 수 있으니 신중하

sangminem.tistory.com

 

목차

     

    기존 한계점

    기존 로직은 최대 3개까지만 광고가 삽입되어 긴 글에는 조금 비효율적일 수 있습니다. 물론 추가할 수는 있지만 글 길이를 자동으로 계산하는 로직이 있다면 불필요하게 반복되는 로직을 제거할 수 있겠죠.

     

    그리고 옆으로 길다란 광고 1개는 차지하는 공간에 비해 효율적이지 않을 것 같아서 바꿔보고 싶었습니다.

     

    다음과 같이 상단에 작은 사각형으로 2개 뜨는 광고처럼 글 중간중간 넣는 것이 더 효과가 좋을 것이라고 판단했습니다.

     

    새로 탄생한 로직

    그래서 다음과 같은 로직이 새롭게 탄생하였으니 유용하게 사용하시기 바랍니다.

     

    자바스크립트

    광고 코드가 좀 길어서 쪼개서 작성하였습니다. xxxxxxxxxx 부분에는 본인의 애드센스 광고 코드를 넣으면 됩니다. 참고로 디스플레이 사각형 반응형 광고 유형 2개를 이용하였습니다.

    function autoAppendAds() {
        var $ads = $('.content-article > div > div > p > ins');
        var $contents = $('.content-article > div > div > p');
        if($ads.length == 0 && $contents.length > 0) {
            var adsBlock = '<div class="middle-ads">';
            adsBlock += ' <div class="revenue_unit_item adsense ad-middle-left">';
            adsBlock += ' <ins class="adsbygoogle middle-left"';
            adsBlock += ' data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"';
            adsBlock += ' data-ad-slot="xxxxxxxxxx"';
            adsBlock += ' data-ad-format="rectangle"';
            adsBlock += ' data-full-width-responsive="true"';
            adsBlock += ' style="width:336px;"></ins></div>';
            adsBlock += ' <div class="revenue_unit_item adsense ad-middle-right">';
            adsBlock += ' <ins class="adsbygoogle middle-right"';
            adsBlock += ' data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"';
            adsBlock += ' data-ad-slot="xxxxxxxxxx"';
            adsBlock += ' data-ad-format="rectangle"';
            adsBlock += ' data-full-width-responsive="true"';
            adsBlock += ' style="width:336px;"></ins>';
            adsBlock += ' </div></div>';
    
            var adsCount = Math.round($contents.length/60) + 1;
    
            for(var i=0;i<adsCount;i++) {
                var index = Math.floor($contents.length/(adsCount+1)*(i+1));
                $contents.eq(index).after(adsBlock);
            }
    
            if($(window).width() < 710) {
                $(".ad-middle-left").remove();
            }
    
            function pushAds(i, adsCount) {
                delay(100).then(function(){
                    if(i < adsCount) {
                        (adsbygoogle = window.adsbygoogle || []).push({});
                        pushAds(i+1, adsCount);
                    }
                });
            }
            if($(window).width() < 710) {
                pushAds(0, adsCount);
            } else {
                pushAds(0, adsCount*2);
            }
        }
    }

    저는 60라인을 기준으로 삼았습니다. 총 라인(p 태그 개수 기준)을 60으로 나눈 값을 반올림하여 1을 더한 값으로 광고 개수를 산정하였습니다.

     

    예를 들어 20라인인 글을 60으로 나누면 값이 0.333333 이므로 소수점 첫째 자리에서 반올림 하면 0이 되고 1을 더하면 1이므로 광고는 1라인이 됩니다. 광고 위치는 20라인을 2로 나눈 10라인 바로 다음 라인입니다.

    하나 더 예를 들어 보면 40라인인 경우에는 60으로 나눈 값이 0.666666 이므로 반올림 하면 1이 되고 1을 더하면 광고 라인 수는 2개로 계산이 됩니다. 광고 위치는 40라인의 1/3 지점과 2/3 지점이 됩니다.

    마찬가지로 3000라인의 글이 있다면 광고 라인수는 51개가 됩니다. 광고 위치는 3000라인의 3000 ÷ 52 × (i + 1) 지점이 됩니다. 이 때 i는 0부터 50까지입니다.

     

    모바일 크기에서는 한 라인에 광고를 2개 보내기 어려우므로 너비가 710px 미만이 되면 광고 하나를 삭제하는 로직도 넣었습니다.

     

    그리고 광고 게재 요청에 필요한 로직은 일정한 딜레이를 주어 반복적으로 호출하는 것이 좋아 보여 재귀 함수로 구현하였습니다.

     

    광고 수가 너무 많거나 적다고 판단되시면 기준 값을 적절히 수정하시면 될 것 같습니다.

     

    CSS 스타일

    스타일은 원하는대로 구현하셔도 되지만 제가 사용한 코드도 제공해 드리겠습니다.

    .middle-ads {
        display: flex;
        margin: 20px 0 20px;
    }
    
    .ad-middle-left {
        margin: auto;
        overflow: hidden;
        padding: 5px;
    }
    
    .ad-middle-right {
        margin: auto;
        overflow: hidden;
        padding: 5px;
    }
    
    .adsbygoogle.middle-left {
        display: block;
        width: 336px;
        height: 280px;
    }
    
    .adsbygoogle.middle-right {
        display: block;
        width: 336px;
        height: 280px;
    }

     

    적용 부연 설명

    위의 설명만으로 적용이 어려우신 분은 참고 바랍니다.

     

    관리 페이지 > 꾸미기 > 스킨 편집 으로 이동합니다.

     

    html 편집을 클릭 합니다.

     

    그럼 다음과 같은 HTML 에디터가 뜨는데 여기에 실제 동작에 필요한 소스 코드를 작성하시면 됩니다.

     

    body 태그 안쪽 맨 아래 script 태그 안쪽 작성하시면 됩니다.

     

    위 작성한 함수와 다음 코드를 붙여 넣으세요.

    $(document).ready(function() {
        autoAppendAds();
    });

     

    CSS는 CSS 탭으로 이동하여 맨 아래 붙여 넣으시면 됩니다.

     

    이 기능 추가하시는 모든 분들 부자되세요!

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

    댓글20

    • 병무새 2021.12.04 23:01 신고

      으흠.. 어렵네요.. </body> 바로 위 <script> 요사이 함수 넣기</script> 맞나요? 적용이 안되어서.. ㅠㅠ 어렵네용
      답글

      • 아미넴 2021.12.04 23:29 신고

        저랑 구조가 좀 다른 것 같습니다. 병무새님은 다음 코드 부분을

        var $ads = $('.content-article > div > div > p > ins');
        var $contents = $('.content-article > div > div > p');

        아래 코드로 대체해 보세요.

        var $ads = $('.content-article > div > p > ins');
        var $contents = $('.content-article > div > p');

    • 병무새 2021.12.04 23:37 신고

      감사합니다 !!
      답글

    • 병무새 2021.12.04 23:45 신고

      미넴님 항상 감사합니다 ^^ 너무 감사합니다 !!
      답글

    • 익꿍 2021.12.14 16:53 신고

      와 이거 정말 유용한 정보인데... 왜 읽으면서도 못따라하겠죠...ㅠㅠ
      답글

    • 소금상식 2022.01.20 02:21 신고

      매번 광고 삽입하는 번거로움을 줄여줄수있는 방법이 있었네요.. 신세계입니다. ㅎㅎ
      차근차근 따라해보고있는데, 이건 html에서 어느부분에 삽입하면 되는건가요...?!
      답글

      • 아미넴 2022.01.20 18:31 신고

        위에도 언급했지만 다음 글에 설명한 내용과 비슷한 구조라서 참고하시면 도움이 될 듯 싶습니다.
        https://sangminem.tistory.com/575

        더 궁금하신 점은 추가로 말씀해주세요~

    • an informant 2022.03.17 18:24 신고

      제 광고 코드를 붙여넣어야 광고가 나오는거죠? 근데 광고 코드를 어디다 붙여넣어야 하는지 모르겠습니다..
      본문 상단 광고, 중간 광고, 하단광고, 사이드바 광고등요..
      답글

      • 아미넴 2022.03.17 18:25 신고

        애드센스 사이트에 가서 광고 단위를 생성해 주셔야 하는데 이 부분에 대한 이해가 먼저 필요해 보입니다.

    • an informant 2022.03.17 18:32 신고

      에드센스 사이트에서 광고 단위 코드는 생성을 했습니다. 그 후 그 광고 코드를 어디에 넣어야 할까요?
      예전에 기본 스킨 사용할 때는 글 작성하면서 중간 중간 html로 변경해서 삽입을 했는데요.
      스킨을 사용하다보니 어디에 넣어야할지 모르겠네요. 컴쪽은 까막눈입니다..
      답글

      • 아미넴 2022.03.17 18:33 신고

        다른 글에도 답변 드렸는데 관리자 페이지의 꾸미기 > 스킨 편집 메뉴의 광고 설정 부분에서 하시면 됩니다. html 부분에 있는 속성 값과 같은 이름으로 되어 있어서 보면 바로 파악되실 겁니다.

    • an informant 2022.03.17 19:00 신고

      네~ 감사합니다! 다시 확인해보겠습니다
      답글

      • 아미넴 2022.03.17 19:04 신고

        혹시 그래도 잘 모르시겠으면 방금 간단히 하는 방법 작성했으니 참고해 보세요.
        https://sangminem.tistory.com/784

    • YEonY's 2022.04.05 12:41 신고

      저는 알려주신대로 따라 했는데, 게시글 중간에 광고가 4개가 뜨네요...ㅠ 어떻게 해야 하는걸까요
      답글

    • YEonY's 2022.04.05 13:35 신고

      아~! 감사합니다^^
      답글

    • 리꿀꿀 2022.05.10 07:24 신고

      안녕하세요 중간광고 삽인이 안되어 댓글드려요
      </body> 위에
      <script src="./images/script.js"></script> 이렇게 함수가 되어있는데요
      </script>요 앞에 말씀하신 html을 넣으면 되는걸까요?
      답글

    💲 추천 글