애드센스 인피드 광고 설정하기

■ 벌이/■ 방법 2017. 8. 17. 02:15





티스토리 운영에 도움이 되는 구글 애드센스의 새로운 인피드 광고 기능을 기록합니다.



애드센스의 페이지 수준 기능을 사용하려면 당연히 애드센스에 가입되어 있고 광고 활성화가 선행되어야 하겠죠.


애드센스 승인 방법 : http://holycrap.tistory.com/36

애드센스 광고 달기 : http://holycrap.tistory.com/51




먼저 인피드 광고 기능은 애드센스에서 이렇게 소개하고 있습니다.



네이티브 인피드 광고

인피드 광고는 사이트에서 수익을 창출하고 방문자에게 최고의 사용자 환경을 제공하기 위해 피드에 게재하는 새로운 형식의 광고입니다. 피드에는 편집 피드(예: 기사나 뉴스 목록)와 목록 피드(예: 상품, 서비스 등의 목록) 등이 있습니다. 인피드 광고는 콘텐츠의 디자인에 어울리도록 맞춤설정할 수 있는 네이티브 광고입니다. 피드에 대해 자세히 알아보려면 피드란?을 읽어 보세요.

일반적으로 인피드 광고는 피드 콘텐츠 사이나 피드가 시작되는 부분 또는 끝나는 부분에 삽입됩니다. 방문자가 콘텐츠에서 아래로 스크롤하면 인피드 광고가 표시됩니다. 인피드 광고는 피드와 자연스럽게 어울리므로 사용자 경험을 방해하거나 사용자의 흐름을 끊지 않습니다.



쉽게 말하면 피드(목록) 사이에 애드센스 광고를 목록과 유사한 형태로 끼워 넣어

광고 효과를 높여 수익에 영향을 줄 수 있는 콘텐츠 정도로 생각하면 되겠습니다.

인피드 광고의 자세한 내용은 아래 주소로 들어가면 확인할 수 있습니다.

https://support.google.com/adsense/answer/7171765?hl=ko


저는 티스토리 운영을 하고 있기 때문에 아래 내용은 당연히 티스토리 환경에 맞게 서술합니다.

티스토리 이외의 블로그나 개인 홈페이지에 적용하는 방법은(대체로 유사하겠지만) 스스로 알아 보셔야 합니다.



1. 인피드 광고 설정


티스토리를 기준으로 인피드 광고를 설명대로 생각하면

일반 목록이 표시되는 블로그 메인과 카테고리 별 목록 화면에 적합하다고 판단,

기능이 오픈되었다는 소식을 접하자마자 블로그에 적용시켜 보았습니다.




먼저 애드센스에 로그인해서 새 광고 단위 만들기로 들어가면

네이티브 광고로 인피드 광고콘텐츠 내 자동 삽입 광고가 신규로 추가된 것을 확인할 수 있습니다.




이번 포스팅은 인피드 광고에 대한 것이기 때문에 인피드 광고를 선택합니다.

추가로 일치하는 콘텐츠 설명과 적용방법은 여기를 눌러 참고 하세요.




인피드 광고를 선택하면 인피드 광고의 간략한 소개 페이지가 호출됩니다.

대충 읽었다면 시작하기를 클릭합니다.




시작하기로 들어오면 피드가 표시되는 형태를 정해야 합니다.




각각의 형태를 미리 보기로 확인할 수 있는데 전 측면 이미지를 선택했습니다.

아무래도 목록에 적용을 하기 위해선 자신의 블로그의 목록 형태와 유사한 디자인을 선택해야 이질감이 없을 테니까요.




인피드 광고의 형태를 정했다면 이제 세부 항목 설정으로 넘어갑니다.

사진의 오른쪽 항목들을 입맛에 맞게 선택하고 설정하면 됩니다.

설정 UI가 적당히 직관적이라 설정 항목에 대한 설명은 생략하도록 하겠습니다.

설정이 완료 되었다면 우측 아래 저장 및 코드 생성을 클릭합니다.




자 여기까지 따라 오셨다면 인피드 광고의 생성 및 설정은 완료입니다.

상단의 개재위치 관련 팁을 잘 읽어 보고 어디에 코드를 삽입할 지 파악을 해야 합니다.


파악이 끝났다면 위 코드를 복사해 놓고 티스토리 관리 페이지의 HTML/CSS 편집으로 이동합니다.



2. 티스토리에 인피드 광고 적용

티스토리 관리 페이지의 HTML/CSS 편집으로 넘어 왔다면 HTML 탭에서 아래 치환자를 검색합니다.

##_article_rep_link_##

##_article_rep_title_##

##_article_rep_summary_##


해당 치환자들은 티스토리 목록에 표시되는 본문 링크, 제목, 요약에 대한 정보인데

목록은 LOOP로 출력되기 때문에 위 치환자가 시작하거나 끝나는 지점에

복사한 코드를 붙여넣기만 해 주면 광고 삽입은 끝입니다.


아래는 인피드 광고 코드가 삽입 된 예시 입니다.



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
27
28
29
30
31
<div class="list_content">
    <a href="/128">
        <s_article_rep_thumbnail>
            <span class="thumb"><img
                src="//i1.daumcdn.net/thumb/C150x150/?fname=https://t1.daumcdn.net/cfile/tistory/99C15B33599470E938"></span>
        </s_article_rep_thumbnail>
        <strong>애드센스 인피드 광고 설정하기</strong>
        <p class="txt_info">
            <span class="cate">■ 벌이/■ 방법</span><span class="date">2017. 8. 17. 02:15</span>
        </p>
        <p class="txt_post">
            티스토리 운영에 도움이 되는 구글 애드센스의 새로운 인피드 광고 기능을 기록합니다. 애드센스의 페이지 수준 기능을 사용하려면 당연히 애드센스에 가입되어 있고 광고 활성화가 선행되어야 하겠죠. 애드센스 승인 방법 : http://holycrap.tistory.com/36애드센스 광고 달기 : http://holycrap.tistory.com/51 먼저 인피드 광고 기능은 애드센스에서 이렇게 소개하고 있습니다. 네이티브 인피드 광고인피드 광고는 사이트에서 수익을 창출하고 방문자에게 최고의 사용자 환경을 제공하기 위해 피드에 게재하는 새로운 형식의 광고입니다. 피드에는 편집 피드(예: 기사나 뉴스 목록)와 목록 피드(예: 상품, 서비스 등의 목록) 등이 있습니다. 인피드 광고는 콘텐츠의 디자인에 어울리도록 맞..
        </p>
    </a>
</div>
 
<!-- 인피드 광고 -->
<script async
src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins
    class="adsbygoogle"
    style="display:block"
    data-ad-format="fluid"
    data-ad-layout="image-side"
    data-ad-layout-key="-f9+14-2t-jd+1a1"
    data-ad-client="ca-pub-1234567890123"
    data-ad-slot="2233184167"></ins>
<script>
    (adsbygoogle = window.adsbygoogle || []).push({});
</script>
 
cs


위 코드는 제 블로그 스킨을 이용한 예시라서 각자 블로그 스킨에 따라 스크립트 구조는 다를 수 있습니다.




그렇게 나온 결과물입니다.

목록 사이사이 광고가 송출됩니다.




하지만 목록의 길이가 길수록 생각보다 지저분해져서 현재는 최상단에 한 번만 노출 되도록 지정해 두었습니다.

꼭 피드 전체에 나오도록 하지 않아도 상관없으니 취향에 맞게 적용하면 되겠습니다.



애드센스는 현재 블로그로 수익 창출을 위한 대체 불가능한 절대적 위치에 있습니다.

그만큼 가입자 수도 어마어마 한데 아무래도 미국 기업이라 한국 사람들에겐 사용법이 조금 어렵게 다가오기도 합니다.

하지만 새로운 기능들이 계속 생기기 때문에 꾸준한 블로그 관리와 애드센스 기능 숙지가 필요합니다.


이 글이 티스토리와 애드센스를 운영하는 저와 같은 초보 분들에게 도움이 되었으면 좋겠습니다.



이 포스트가 도움이 되셨다면 아래 하트 한번 꾸~욱~ 부탁드립니다!