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

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

 

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

 

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

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

 

목차

 

기존 한계점

기존 로직은 최대 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 탭으로 이동하여 맨 아래 붙여 넣으시면 됩니다.

 

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