티스토리 블로그 양 사이드에 따라 다니는 애드핏(또는 애드센스) 광고 넣기

모니터 크기가 큰 경우 양 사이드에 빈 공간을 활용하여

광고가 따라 다니도록 만들어도 좋을 것 같아서 시도해 보았습니다.

 

아래 예제는 애드핏 기준입니다.

 

목차

 

따라다니는 광고는 애드센스 정책 위반인가

예전에는 고정되거나 플로팅 된 위치에 광고를 게재하는 행위를 제한한다는 문구가 있었다고 하는데요.

이 때문에 일부 블로거분들께서 우려를 하고 계신 것 같아요.

 

그런데 지금 확인을 해 보면 그런 내용이 없습니다.

원래 이 부분에 있었다고 하는군요.

 

제 생각에는 광고가 본문과 겹친다거나 실수로 클릭을 유도하거나 불법 프로그램을 사용하여 정상적이지 못한 방법으로 광고를 변형시키지만 않는다면 문제는 없을 것으로 예상됩니다.

 

아래 정책도 직접 확인해 보시고 그래도 우려가 되신다면 굳이 적용하실 필요는 없을 것 같아요 ㅎㅎ

support.google.com/adsense/answer/1346295?hl=ko

광고 게재위치 정책 - AdSense 고객센터

 

HTML 코드 작성

관리 페이지 접속 > 꾸미기 > 스킨 편집 클릭

 

html 편집 클릭

 

HTML 클릭

 

광고 코드 삽입

<!-- 사이드바 광고 커스터마이징 -->
<div id="side_ad_l" style="position:absolute;left:0;">
    <ins class="kakao_ad_area" style="display:none;" 
             data-ad-unit    = "DAN-xxxxxxxxxxxxx" 
             data-ad-width   = "160" 
             data-ad-height  = "600"></ins> 
</div>
<div id="side_ad_r" style="position:absolute;right:0;">
    <ins class="kakao_ad_area" style="display:none;" 
             data-ad-unit    = "DAN-yyyyyyyyyyyyy" 
             data-ad-width   = "160" 
             data-ad-height  = "600"></ins> 
</div>

html 소스의 body 태그 안쪽 하단에 작성하였습니다.

data-ad-unit에는 본인의 애드핏 광고 id를 넣으셔야 합니다.

 

 

자바스크립트 코드 작성

<script>
    function resize() {
        if(window.innerWidth >= 1440) {
            document.querySelector('#side_ad_l').style.display = "block";
            document.querySelector('#side_ad_r').style.display = "block";
        } else {
            document.querySelector('#side_ad_l').style.display = "none";
            document.querySelector('#side_ad_r').style.display = "none";
        }
    }

    function scroll() {
        var currentScrollValue = document.documentElement.scrollTop;
        if(window.innerWidth >= 1440) {
            document.querySelector('#side_ad_l').style.top = (currentScrollValue+160)+"px";
            document.querySelector('#side_ad_r').style.top = (currentScrollValue+160)+"px";
            document.querySelector('#side_ad_l').style.transition = "0.5s";
            document.querySelector('#side_ad_r').style.transition = "0.5s";
        }
    }

    scroll();
    resize();
    window.addEventListener('resize', resize);
    window.addEventListener('scroll', scroll);
</script>
<script type="text/javascript" src="//t1.daumcdn.net/kas/static/ba.min.js" async></script>

마찬가지로 body 태그 안쪽 하단에 script 코드를 작성했습니다.

화면에 여백이 충분히 있을 경우에만 사이드 광고를 출력하도록 하였습니다.

위쪽으로 너무 붙지 않도록 어느 정도 여유를 주었고, transition 옵션으로 사이드 광고의 움직임 효과를 살렸습니다.

브라우저 크기가 1440px 미만으로 작아질 경우 resize 이벤트 리스너에 의해 사이드 광고는 사라집니다.

또한 스크롤 시에 동적으로 따라 움직이도록 함수를 작성하여 scroll 이벤트 리스너에 등록해 주었습니다.

 

 

적용 화면

* PC 화면에 적용된 사이드 광고

 

* 브라우저 크기를 줄이면 사라지는 사이드 광고

 

저는 최근에 애드핏에서 애드센스로 변경하였습니다 ㅎ

움짤로도 확인해 볼게요~

아주 잘 따라 다니네요 :)