애드센스 콘텐츠내 자동 삽입 광고 설정 팁::어나일언덕

얼마전 부터 애드센스에서 새롭게 선보이는 광고형식인 콘텐츠 내 자동삽입 광고는 콘텐츠 페이지의 단락 사이에 자동으로 고품질 형식의 광고를 독자의 이용 환경에 잘 어울리게 게재하는 광고라고 구글에서 약을 팝니다. 좋다고 하니 속는 셈치고 지금 시작하기를 해봅니다.

네이티브 콘텐츠 내 자동 삽입 광고에 관한 광고

네이티브 콘텐츠 내 자동 삽입 광고 설정 방법

구글 애드센스의 [내광고] 탭에서 [+새 광고 단위]를 선택하면 어떤 종류의 광고를 만들고 싶은신가요? 라는 질문과 함께 네이티브 콘텐츠 내 자동 삽입 광고 선택 할 수 있습니다.

콘텐츠 내 자동 삽입 광고

광고를 설정해주는 페이지에서 광고 단위 이름을 입력하고 전체적인 스타일을 설정해 줄 수 있는데 인피드 광고에 비해 설정해줄 옵션이 딱히 없어서 바로 코드 생성을 해줘도 상관이 없습니다. 인피드 광고 때처럼 짜증나는 설정 단계가 없어서 그나마 다행스럽습니다.

여기서 짚고 넘어갈 것이 있는데 이 광고의 이름은 콘텐츠 내 자동 삽입 광고입니다.

자동이란 말이 들어가 있으니 HTML 편집창에 코드를 넣어 놓으면 본문 내용 중간에 광고가 등장할 만한 문맥에서 자동으로 그럴싸한 광고가 삽입 될 것 같습니다. 하지만!! 그딴건 전혀 없습니다.

처음에 정말 자동으로 삽입될 거라 생각하고 우와 좋다!! 라고 감탄을 했습니다. 나만 그렇게 생각한 것은 아닌지 혹시 다른 방법이 있는 것은 아닌지 검색을 해보았지만 역시나 아니었습니다. 그냥 이미지와 문자가 같이 조화롭게 게재되는 광고일뿐 기존의 광고와 별다른 점은 없습니다.

그렇다면 구글 애드센스가 설명하는 광고 게재 위치인 콘텐츠 페이지 단락 사이에 맞게 광고를 게재하려면 글을 쓸 때 일일이 코드를 넣어줘야 한다는 말이 됩니다. 이것이 얼마나 수고스러운 일인지는 다들 잘 알 것입니다. 결국엔 서식 글을 만들어서 [작성 중인 글 플러그인]을 이용해서 넣는 것이 그나만 수고를 더는 방법일 것입니다.

네이티브 콘텐츠 내 자동 삽입 광고 게재 방법

이 블로그에는 자바스크립트를 이용하여 본문 내 3번째 이미지 객체 아래에 광고가 노출되도록 설정되어 있습니다.

애드센스 광고 관련 글 링크

위의 링크를 클릭하면 관련한 글을 확인해 볼 수 있습니다. 이렇게 하면 자동 삽입이란 단어의 의미가 무색해 지지 않게 할 수는 있는데 그대로 적용하면 광고 크기가 고정되기 때문에 아래와 약간의 조정이 필요합니다.

아래의 코드를 복사하여 HTML 편집창의 <body> ... </body> tag 사이의 적당한 곳에 붙여 넣습니다. 복사가 되지 않으면 아래의 TXT 파일을 다운 받으면 됩니다. 물론 개인ID와 광고ID는 본인의 것으로 수정해야 합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!-- 본문 이미지 아래 콘텐츠 자동 삽입 광고 -->
<div id="imgadslot">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-format="fluid"
     data-ad-layout="in-article"
     data-ad-client="ca-pub-개인ID"
     data-ad-slot="광고ID"></ins>
</div>
<script type="text/javascript">
$(function(){
  var numimg = parseInt($(".imageblock").length,10);
  if(numimg>2){ 
    if(window.getWindowCleintWidth()>=768){
        $("#imgadslot").css({"display" : "block","height" : "auto", "width" : "auto", "min-width" : "336px", "margin" : "10px auto"});
      }else{
        $("#imgadslot").css({"display" : "block","height":"auto","width":"auto", "min-width" : "300px", "margin" : "10px auto"});
      }
     $(".imageblock:eq(2)").append($("#imgadslot"));
    (adsbygoogle = window.adsbygoogle || []).push({});
  }else{
    $("#imgadslot").remove();
  }
});
</script>
Colored by Color Scripter
cs