[ 구글 광고 코드 ] 블로그 . 사이트에서 사이드 고정 구글 광고 코드 배너 제작 방법

구글 광고 코드 활용한 사이드 배너 제작

광고 사이드 베너 코드

구글 광고 코드를 활용해서 사이드 배너 광고 제작 방법입니다. 모바일 상태가 되면 배너코드 자체를 실행이 안 되게 수정했습니다. 일반적으로 사용 시 굳이 모바일에서 보이지 않는 사이드 배너 광고를 삭제까지 할 필요는 없지만 메모리를 소모하기도 하고 더 큰 문제는 콘솔에 에러 메시지를 표시하기 때문에 검색봇은 오류를 인식해서 성능 검사 점수를 하락시킵니다.

사이드 배너 CSS 코드 설명

아래 사이드 배너 코드를 자신의 광고 코드에 맞게 수정해서 사용하시면 됩니다. 사이드 배너 광고의 위치도 변경해서 사용하시고 페이지의 해상도의 크기를 계산해서 설정하시면 사이드 배너 광고의 위치를 설정할 수 있습니다. 최대한의 노출과 사용자의 불편함을 최대한으로 줄이도록 광고의 위치를 설정하시면 됩니다.

오른쪽 고정 사이드 배너

position: absolute; /* 요소를 절대 위치에 배치 */
width: 160px; /* 요소의 너비 설정 */
right: 50%; /* 요소를 오른쪽에서 50% 떨어진 위치에 배치 */
top: 60px; /* 요소를 위에서 60px 떨어진 위치에 배치 */
margin-right: 470px; /* 요소의 오른쪽 여백 설정 */ 이부분을 수정하시면 위치 변경
z-index: 9999; /* 요소의 z-index 설정, 다른 요소 위에 표시되도록 함 */
transform: translateX(-50%); /* 요소를 수평 중앙으로 이동 */

왼쪽 사이드 고정 배너

position: absolute; /* 요소를 절대 위치에 배치 */
width: 160px; /* 요소의 너비 설정 */
left: 50%; /* 요소를 왼쪽에서 50% 떨어진 위치에 배치 */
margin-left: 650px; /* 요소의 왼쪽 여백 설정 */ 이부분을 수정하시면 위치 변경
top: 60px; /* 요소를 위에서 60px 떨어진 위치에 배치 */
z-index: 9999; /* 요소의 z-index 설정, 다른 요소 위에 표시되도록 함 */
transform: translateX(-50%); /* 요소를 수평 중앙으로 이동 */

카카오 애드핏 광고 설정

var adArea = document.createElement('ins');
adArea.className = 'kakao_ad_area'; adArea.style.display = 'block'; // 광고 영역을 보이도록 설정
adArea.setAttribute('data-ad-unit', '광고코드'); // 광고 단위 설정
adArea.setAttribute('data-ad-width', '160'); // 광고 너비 설정
adArea.setAttribute('data-ad-height', '600'); // 광고 높이 설정
floatLeftElement.appendChild(adArea);

사이드바의 동적 이동과 고정 설정으로 블로그 수익 향상 방안

구글 애드센스 광고 코드 설정

var adArea = document.createElement('ins');
adArea.className = 'adsbygoogle'; adArea.style.display = 'block'; // 광고 영역을 보이도록 설정
adArea.setAttribute('data-ad-client', 'ca-pub-광고 클라이언트 코드'); // 광고 클라이언트 설정
adArea.setAttribute('data-ad-slot', '광고 슬롯 코드'); // 광고 슬롯 설정
adArea.setAttribute('data-ad-format', 'auto'); // 광고 포맷 설정
adArea.setAttribute('data-full-width-responsive', 'true'); // 광고의 가로폭 반응형 설정
floatRightElement.appendChild(adArea);

스크립트 코드

<style>
    #floatLeft {
        position: absolute;
        width: 160px;
        right: 50%;
        top: 60px;
        margin-right: 470px;
        z-index: 9999;
        transform: translateX(-50%);
    }

    #floatRight {
        position: absolute;
        width: 160px;
        left: 50%; 
        margin-left: 650px;
        top: 60px;
        z-index: 9999;
        transform: translateX(-50%);
    }

    @media (max-width: 1300px) {
        #floatLeft, #floatRight {
            display: none;
        }
    }
</style>

<div class="height">
    <div id="floatLeft">
        <script>
            if (window.innerWidth > 768) {
                var floatLeftElement = document.querySelector('#floatLeft');
                if (floatLeftElement) {
                    var adArea = document.createElement('ins');
                    adArea.className = 'kakao_ad_area';
                    adArea.style.display = 'block';  
                    adArea.setAttribute('data-ad-unit', '광고코드');
                    adArea.setAttribute('data-ad-width', '160');
                    adArea.setAttribute('data-ad-height', '600');
                    floatLeftElement.appendChild(adArea);
        
                    var script = document.createElement('script');
                    script.src = "//t1.daumcdn.net/kas/static/ba.min.js";
                    script.async = true;
                    document.body.appendChild(script);
                }
            }
        </script>
    </div>
</div>

<div class="height">
    <div id="floatRight">
        <script>
            if (window.innerWidth > 768) {
                var floatRightElement = document.querySelector('#floatRight');
                if (floatRightElement) {
                    var adArea = document.createElement('ins');
                    adArea.className = 'adsbygoogle';
                    adArea.style.display = 'block';
                    adArea.setAttribute('data-ad-client', 'ca-pub-광고코드');
                    adArea.setAttribute('data-ad-slot', '광고코드');
                    adArea.setAttribute('data-ad-format', 'auto');
                    adArea.setAttribute('data-full-width-responsive', 'true');
                    floatRightElement.appendChild(adArea);
        
                    var script = document.createElement('script');
                    script.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-코드";
                    script.async = true;
                    script.crossOrigin = "anonymous";
                    document.body.appendChild(script);

                    (adsbygoogle = window.adsbygoogle || []).push({});
                }
            }
        </script>
    </div>
</div>

<script>
$(document).ready(function() {
    if (window.innerWidth > 1300) {
        var floatPositionLeft = parseInt($("#floatLeft").css('top'));
        var floatPositionRight = parseInt($("#floatRight").css('top'));

        $(window).scroll(function() {
            var scrollTop = $(window).scrollTop();
            var newPositionLeft = scrollTop + floatPositionLeft + "px";
            var newPositionRight = scrollTop + floatPositionRight + "px";

            $("#floatLeft").stop().animate({
                "top": newPositionLeft
            }, 500);

            $("#floatRight").stop().animate({
                "top": newPositionRight
            }, 500);
        }).scroll();
    } else {
        $("#floatLeft").hide();
        $("#floatRight").hide();
    }
});
</script>

티스토리 HTML 베너출력활용 방법

티스토리 HTML 배너출력에 위에 코드를 수정해서 넣어주시면 됩니다.

티스토리 플러그인 HTML 베너출력 활용하기

구글 수동 광고 코드 설정 방법

구글애드센스에 접속해서 광고란에 들어가시면 광고단위 기준 메뉴가 있습니다.

구글 애드센스 광고 코드 생성 방법

디스플레이 광고 설정

구글 애드센스에서 디스플레이 신규광고 단위 편집기

구글 애드센스 광고코드형성

구글 애드센스 코드 생성기 활용

새 디스플레이 광고에서 수직형 광고단위 이름 설정 광고크기는 반응형 만들기 버튼을 누릅니다.

구글 애드센스 코드 생성기 활용해서 코드 생성

단 티스토리 블로그에서 레일광고는 정책 위반이라 사용하시면 안됩니다.