구글 블로그 스팟 수익 높여주는 플로팅 광고 고정형 코드 삽입 방법

작성일자 글쓴이

플로팅 광고는 화면의 특정 위치에 고정되어 사용자가 스크롤을 내려도 계속 노출되는 광고를 말합니다. 구글 블로그스팟에서는 플로팅 광고를 활용해 클릭률과 수익을 높일 수 있습니다. 이번 글에서는 블로그스팟에 애드센스 플로팅 광고 고정형 코드를 넣는 방법을 소개하고, 이 코드를 활용해 광고를 설정하는 방법을 알려드리겠습니다.

플로팅 광고의 장점

플로팅 광고는 사용자가 스크롤을 내리더라도 광고가 화면에 계속 고정되기 때문에 더 많은 노출 기회를 제공합니다. 이로 인해 클릭률이 높아질 수 있고, 광고 수익도 함께 증가할 수 있습니다. 플로팅 광고는 특히 모바일 환경에서 유리한데, 화면이 제한적인 모바일 기기에서 시각적으로 더 잘 보이기 때문입니다.

구글 블로그 스팟에 플로팅 광고 삽입하기

  1. 블로그스팟에 로그인: 먼저, 블로그스팟에 로그인하고 플로팅 광고를 추가할 블로그를 선택합니다.
  2. 템플릿 편집: 블로그스팟 대시보드에서 템플릿 메뉴로 이동합니다. 그런 다음, HTML 편집을 선택하여 템플릿의 HTML 코드를 수정할 수 있는 화면으로 들어갑니다.
  3. 플로팅 광고 코드 삽입: 아래와 같은 HTML 및 CSS 코드를 블로그스팟 템플릿의 <body> 태그 내부에 삽입합니다. 이 코드는 화면 오른쪽 하단에 고정된 플로팅 광고를 보여줍니다.

<style>
/* 플로팅 광고 스타일 */
#floatingAd {
    position: fixed;
    bottom: 10px;
    right: 10px;
    width: 300px;
    height: 250px;
    z-index: 1000;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

#closeAd {
    position: absolute;
    top: 5px;
    right: 5px;
    cursor: pointer;
    font-size: 16px;
    background-color: #ff0000;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    text-align: center;
}
</style>

<div id="floatingAd">
    
    <button id="closeAd">X</button>
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <ins class="adsbygoogle"
         style="display:inline-block;width:300px;height:250px"
         data-ad-client="ca-pub-1234567890123456"
         data-ad-slot="1234567890"></ins>
    <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
</div>

<script>
// 광고 닫기 기능
document.getElementById('closeAd').addEventListener('click', function() {
    document.getElementById('floatingAd').style.display = 'none';
});
</script>

코드 설명

CSS 부분: #floatingAd 요소는 플로팅 광고의 스타일을 정의합니다. position: fixed 속성은 광고를 화면의 특정 위치에 고정되게 하며, bottom: 10px과 right: 10px은 화면 오른쪽 하단에 10픽셀 간격으로 고정시킵니다. 광고 상자가 시각적으로 구분될 수 있도록 그림자와 둥근 모서리를 추가하였습니다.

광고 영역: adsbygoogle 태그는 Google 애드센스 광고를 삽입하는 부분입니다. data-ad-client과 data-ad-slot 값을 자신의 애드센스 계정에 맞게 수정해야 합니다.

닫기 버튼: closeAd 버튼을 추가하여 사용자가 광고를 닫을 수 있도록 하였습니다. 닫기 버튼을 클릭하면 광고가 사라지도록 자바스크립트를 이용해 간단한 동작을 추가했습니다.

코드 저장 및 확인

HTML 코드를 템플릿에 삽입한 후, 페이지 하단에 있는 저장 버튼을 클릭하여 변경사항을 저장합니다. 이후 블로그 페이지로 돌아가서 플로팅 광고가 제대로 표시되는지 확인합니다.

플로팅 광고의 위치 변경

플로팅 광고는 기본적으로 화면의 오른쪽 하단에 고정되지만, 아래의 CSS 속성을 수정하면 위치를 변경할 수 있습니다.

  • 왼쪽 하단에 배치: right: 10px을 left: 10px으로 변경하면 광고가 왼쪽 하단에 고정됩니다.
  • 상단에 배치: bottom: 10px을 top: 10px으로 변경하면 광고가 화면 상단에 고정됩니다.

플로팅 광고 최적화 팁

  • 광고 크기 조정: 플로팅 광고의 크기는 광고 콘텐츠에 따라 변경할 수 있습니다. 위 코드에서는 300×250 크기의 광고를 사용하였지만, 필요에 따라 크기를 변경할 수 있습니다.
  • 닫기 버튼 추가: 사용자 경험을 고려해 플로팅 광고에 닫기 버튼을 추가하는 것이 좋습니다. 이를 통해 광고를 덜 방해받고도 수익을 유지할 수 있습니다.
  • 광고 노출 빈도 관리: 모든 페이지에서 플로팅 광고가 나타나지 않도록 페이지마다 특정 조건을 추가할 수 있습니다. 예를 들어, 첫 페이지에서는 광고가 나타나고, 이후 페이지에서는 나타나지 않도록 설정할 수 있습니다.

결론

구글 블로그스팟에서 플로팅 광고를 설정하면 광고 노출을 최적화하고 수익을 극대화할 수 있습니다. 자동화된 광고 시스템을 사용하여 손쉽게 광고를 배치할 수 있지만, 적절한 위치와 디자인을 통해 사용자 경험을 해치지 않도록 해야 합니다.