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

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

 

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

 

목차

 

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

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

 

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

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만원 불로소득 달성, 티스토리 블로그와 구글 애드센스

 

 

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

 

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

 

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

 

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

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

 

(내용 추가)

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

 

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

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