구글 애드센스 콘텐츠 우측 상단에 광고 추가하는 방법

개인 블로그를 운영하면서 광고를 건다는 게 솔직히 마음이 편하진 않다. 나도 광고가 덕지덕지 붙어 있는 웹사이트라면 질색하는 인간이라.

그래도 트래픽이 늘면 수익이 생기는데, 이게 내가 블로그를 꾸준히 하는 데에 어느정도 동기부여가 된다는 사실을 인정하게 됐다. 그래서 방문자들의 경험을 가급적 방해하지 않는 수준에서 적절한 위치에 게재하는 방법을 모색하기로 했다.

흔히 콘텐츠 상단에 광고를 게재하면 수익이 꽤 된다고들 하는데, 굳이 글 첫머리부터 광고를 전면적으로 내세운다는 게 개인적으로는 영 마음에 안 들어서, 나름대로 대안을 찾아보다가 일단 우측 상단으로 이렇게 밀어서 넣어보기로 했다.

그리고 모바일의 경우에는 화면 폭도 좁은데 굳이 이렇게 하고 싶지 않아서 폭 전체에 표시되는 방식을 택하고 싶었다. (HTML, CSS에 대해 제대로 아는 것도 없으면서 욕심만 많다.)

이런저런 구글링과 삽질 끝에 어쨌든 구현했으니, 방법을 간단히 남겨보아야겠다.


1. 구글 애드센스 코드 수정/삽입

우선 애드센스에서 디스플레이 광고 코드를 가져와서, <div> 태그를 덮어주었다.

<div class="responsive-ad-wrapper" style="float: right !important;">

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- 디스플레이 광고 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
     data-ad-slot="XXXXXXXXXX"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

</div>

이때 클래스명을 class="responsive-ad-wrapper"라 지정해놓은 뒤, style="float: right !important;" 라고 명시해서, 글 사이에서 고정(fixed)되지 않고 떠다니는(float) 스타일로, 그리고 이 스타일이 우선 적용되도록(!important) 했다.

그리고 이렇게 작성해놓은 코드를 콘텐츠 최상단으로 배치했다. 물론 애드센스 코드를 삽입, 배치하는 방법은 각자 다를 거다.

참고로 나는 워드프레스에서 Advanced Ads라는 플러그인의 도움을 받았다. 애드센스 관련 워드프레스 플러그인 종류가 꽤 많은데, Advanced Ads가 그나마 쉽고 편하게 쓸 수 있는 편이라서 이걸 택했다. (Ad Inserter도 인기가 많은 것 같긴 하지만 뭔가 좀 복잡하고 어려워서 나와 잘 안 맞는 느낌이었다.)

2. CSS 클래스 작성

사이트마다 CSS 수정을 하는 방법이 다르겠지만, 내가 쓰는 워드프레스 Neve 테마는 사용자가 직접 CSS 코드를 추가할 수 있도록 기능을 제공하고 있다.

거기에 아래와 같이 작성해넣었다.

.responsive-ad-wrapper,
.responsive-ad {
  width: 336px;
  height: 280px;
  margin-left: 20px;
  margin-bottom: 20px;
}

@media screen and (max-width: 768px) {
  .responsive-ad-wrapper,
  .responsive-ad {
    width: 336px;
    height: 280px;
  }
  .responsive-ad-wrapper {
    margin-left: 20px;
    margin-bottom: 20px;
  }
}
 
@media screen and (max-width: 400px) {
  .responsive-ad-wrapper,
  .responsive-ad {
    width: 300px;
    height: 250px; 
  }
  .responsive-ad-wrapper {
		float: none;
		width: 100%;
		margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
  }
}

기본적으로 336*280 사이즈로 보여주지만, 화면 폭에 따라 조금씩 사이즈가 조정되도록 했다.

CSS 잘 모르겠지만 요리조리 바꿔서 테스트 해보다가 위 코드로 만족하고 실험을 접었다.


현재 이 블로그에는 이번에 이렇게 콘텐츠 우측상단에 넣은 “디스플레이 광고”외에도 콘텐츠 이후 제시되는 추천 글 부분에 “일치하는 콘텐츠”, 그리고 사이드바에 “디스플레이 광고”, 이렇게 총 세 곳에 광고를 심어 놓았다.

광고 단위 따라서 어떤 위치가 가장 수익이 좋을지 어느정도 시간이 지나면 통계를 확인해봐야겠다.

고작 블로그 하나 운영하는 건데
신경 쓸 게 참 많구나.

추천 글

댓글 남기기