정보/블로그 운영팁

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

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

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

 

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

 

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

 

목차

     

    고정 위치 광고 생성하기

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

     

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

    <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 메서드를 활용하여 자연스럽게 스크롤이 되게 할 수 있습니다. 스크롤 애니메이션이 끝나면 재귀 호출로 다시 값을 계산하여 무한 실행되도록 하였습니다.

     

    적용 결과 확인

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

     

     

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

    도움이 되시길 바랍니다.

     

    반응형

    댓글

    💲 추천 글