수익 향상 꿀팁, 데이블 인피니트(무한) 피드 광고 자동 스크롤

인피니트 광고를 어떻게 하면 효율적으로 보여줄 수 있을까 고민하다가 만든 기능입니다. 고정 영역에 광고를 띄우는 것까지는 어렵지 않은데 자동 스크롤이 되게 하는 건 생각을 조금 해야 합니다.

 

다음과 같은 무한피드 광고는 스크롤 시 컨텐츠가 계속 생기는데 사람들에게 관심 끌기는 어려울 수 있습니다.

 

데이블 광고 게재 방법은 이미 알고 있어야 하는 사항으로서 따로 설명하지 않겠습니다.

 

목차

 

고정 위치 광고 생성하기

고정 위치가 아니더라도 자동 스크롤 기능은 적용할 수 있지만 좀 더 효율적인 광고 효과를 위해 광고의 위치를 고정해 보겠습니다.

 

다음은 데이블 광고 태그 예시입니다.

<div class="dable">
    <div id="dablewidget_xxxxxxxx" data-widget_id="xxxxxxxx">
        <script>
            //광고 스크립트
        </script>
    </div>
</div>

 

다음과 같이 css style을 적용하시면 됩니다. 클래스 명과 수치는 예시입니다. 각자 상황에 맞게 고쳐서 적용하시면 됩니다.

.dable {
    position: fixed;
    top: 100px;
    right: 10px;
}

 

자동 스크롤 코드 작성

스크롤이 위 아래로 무한으로 왔다 갔다 하는 코드를 자바스크립트로 짜 보겠습니다.

 

먼저 돌발 상황에서 무한 재귀호출이 되어 브라우저가 먹통이 되는 일이 없도록 delay 함수를 만들어 보겠습니다. 간단하게 다음과 같이 만들어 보았습니다.

function delay(ms) {
    return new Promise(function(resolve, reject) {
        setTimeout(function(){
            resolve();
        },ms);
    });
}

 

delay 함수를 이용하여 0.2초 간격으로 자동 스크롤 함수를 재귀 호출하는 로직을 작성해 보았습니다.

function autoScroll() {
    delay(200).then(function() {
        var $dable = $('.sidebar .dable');
        var scrollHeight = $dable[0].scrollHeight;
        var currentPosition = $dable.scrollTop();
        var innerHeight = $dable.innerHeight();
        var goalPosition = scrollHeight - innerHeight;
        var speedWeight = 13;
        var speed = (scrollHeight - innerHeight - currentPosition)*speedWeight;
        if(Math.ceil(currentPosition + innerHeight) >= scrollHeight) {
            goalPosition = 0;
            speed = (scrollHeight - innerHeight)*speedWeight;
        }
        $dable.animate({
            scrollTop: goalPosition
        }, speed, 'linear', autoScroll);
    });
}

남은 스크롤 높이에 13을 곱하여 속도를 계산했더니 적절하게 움직였습니다. 이 부분은 원하는대로 수정하시면 됩니다. 스크롤이 가장 바닥까지 내려갔다면 목표 위치를 최상단(0)으로 잡고 속도 계산 시 현재 위치를 빼면 됩니다.

이렇게 계산된 값으로 마지막에서 jQuery의 animate 메서드를 활용하여 자연스럽게 스크롤이 되게 할 수 있습니다. 스크롤 애니메이션이 끝나면 재귀 호출로 다시 값을 계산하여 무한 실행되도록 하였습니다.

 

적용 결과 확인

다음과 같이 스크롤이 왔다갔다 잘 실행되는 것을 알 수 있습니다.

 

 

꼭 데이블 광고가 아니더라도 여러 분야에 활용할 수 있어 보입니다.

도움이 되시길 바랍니다.