애드센스 인피드 광고 - 글 목록 내 배치 (Adsense / in-feed ad)

본문 내부나 사이드바에 광고를 개시하는건 그닥 어렵지 않습니다. 그쵸?

그저 광고를 생성하고 (보통은 디스플레이 광고를 선택하겠죠?),

생성된 광고의 코드를 가져다 원하는 위치에 넣어주면 되니까요.

심지어 본문 상/하단 광고 개시는 티스토리 플러그인로도 지원하고 있어서 매우 수월합니다.

그래서 딱히 이와 관련해선 글을 쓸 필요도 없을 것 같습니다.

그러나 이 인피드 광고는 글 목록의 일부로 보여지게 하는게 목적인 광고라...

스킨의 어디에 넣어야 할지 살짝 난감할 수 있습니다. 게다가 어디에 넣을지 알게되어도 목록의 시작이나 끝이 아니라면 추가적인 처리가 적용되어야 원하는 순번에 나올 수 있게 됩니다.

그리고 목록에서 너무 튀지 않게 다른 글들과 유사한 스타일로 만들어 줄려면 광고 생성시에도 자잘하게 설정해줘야 하는 수고도 요합니다.

그래서 오늘은 다른 광고들 보단 적용이 살짝 까다로운 이 인피드 광고를 넣는 방법에 대해 설명을 해보겠습니다.

(스킨은 제가 사용중인 북클럽을 기준으로 합니다만, 원리만 파악하시면 다른 스킨도 결국엔 다 똑같습니다.)

잠깐만!

그런데 우선은 티스토리에 애드센스 광고 넣는 방법부터 개선해 보아요.

현재 페이지당 1개 이상의 광고를 배치하고 있고 각 위치에 코드를 아래 처럼 넣었다면

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Tistory side -->
<ins class="adsbygoogle"
     style="광고스타일"
     data-ad-client="계정아이디"
     data-ad-slot="광고아이디"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

이제는 구글 제공 js 파일을 한번만 불러오게 첫줄 코드를 스킨 html 의 <head>...</head> 안으로 옮겨 주어요.

...
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
</head>
<body>
...

그리고 광고 코드를 넣을 때는 상시 위에서 옮겨준 줄을 제외하고 아래 예시처럼 넣어주시면 됩니다.

<!-- 광고코드는 요만큼만... 시작 -->
<ins class="adsbygoogle"
     style="광고스타일"
     data-ad-client="계정아이디"
     data-ad-slot="광고아이디"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
<!-- 광고코드는 요만큼만... 끝 -->

이미 이렇게 사용하고 계신다면, 베리 나이스!

자, 이제 인피드 광고를 넣어봅니다.

0. 우선 어떤 목록에 광고를 넣을건지 정하세요

저는 홈의 최신글과 인기글, 그리고 카테고리 글 목록 이렇게 3군데에 넣었습니다.
인기글과 카테고리 글 목록은 모양이 똑같으니 글 목록용 1개, 최신글용 1개, 이렇게 총 2개의 광고 단위가 필요하네요
원한다면 댓글 목록에도 추가 할 수 있습니다만... (전 싫어요..ㅡㅡ)

그럼, 일단 글 목록부터 해볼까요?

1. 광고 단위 생성

애드센스 페이지에서 '인피드 광고'로 원하는 모양의 광고 단위를 생성합니다.
자신의 사이트 주소를 넣고 데스크탑 환경으로 선택해서 진행하면 거의 자동화되어 있는 과정입니다.
이 부분에 대해선 검색해 보면 기존에 올려진 글들도 많고 애드센스 페이지 툴이 깔끔하게 잘 만들어져 있는 부분이라 추가 설명은 생략하겠습니다. 이것 저것 가능한 옵션 만져 보시면서 원하는 모양을 만드시면 됩니다.
(그래봤자 이미지 크기, 공백, 테두리, 글꼴, 글자색 정도 조정하는거라..)
게다가 한번 만들면 땡이 아니라 상시 수정도 가능하니까 (수정후 코드의 '광고스타일'값을 업데이트 해줘야 하지만..) 암튼 만들자마자 좀 이상해도 괜찮습니다.

2. 스킨 html 수정

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>var gCnt1 = 0, gCnt2 = 0, gCnt3 = 0;</script>

아까 <head>...</head> 사이로 옮겨준 구글 제공 광고 js 파일 밑줄에 위처럼 기본값이 0인 변수 3개를 추가합니다.

앞서 말씀드렸듯이 인피드 광고를 노출할 위치가 총 3군데라서 3개가 필요한겁니다.

3. 광고 삽입 (스킨 html 수정)

인기 글

<s_cover name='cover-thumbnail-2'>
  <div class="cover-thumbnail-2">
    <h2></h2>
    <ul>
      <s_cover_item>									
        <li>
          <a href="">
            <figure>
              <s_cover_item_thumbnail>
                  <img src="//i1.daumcdn.net/thumb/C126x166/?fname=" alt="">
              </s_cover_item_thumbnail>
            </figure>
            <span class="title"></span>
            <span class="excerpt"></span>
            <s_cover_item_article_info>
              <span class="meta">
                  <span class="date"></span>
              </span>
            </s_cover_item_article_info>
          </a>
        </li>
        <script>
          gCnt1++; 
          if (gCnt1 % 3 == 0 && gCnt1 < 7) {
         	 document.write('<li><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="광고레이아웃" data-ad-client="계정아이디" data-ad-slot="광고아이디"></ins></li>'); 
         	 (adsbygoogle = window.adsbygoogle || []).push({});
          }
        </script>											
      </s_cover_item>
    </ul>
  </div>
</s_cover>

제 인기글 목록은 북클럽 스킨의 '뉴스레터' 커버아이템을 사용하고 있습니다.

뉴스레터는 소스상 cover-thumbnail-2 이 이름인데요, 위에 하이라이트되어 있듯이 html 에서 해당 블럭을 찾아 그 안에서 반복될 <li> 태그의 끝에 스크립트로 광고를 넣어 줍니다.

넣어준 코드에 대해 더 설명 드리자면,

<script>
gCnt1++;
if (gCnt1 % 3 == 0 && gCnt1 < 7) {
document.write('<li><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="광고레이아웃" data-ad-client="계정아이디" data-ad-slot="광고아이디"></ins></li>');
(adsbygoogle = window.adsbygoogle || []).push({});
}
</script>

document.write('...요기...'); 이 안에 내용들은 줄바꿈 없이 모두 한줄로 넣어 주셔야 하고 큰따옴표만 가능합니다.
광고레이아웃/계정아이디/광고아이디 이 3부분은 앞서 애드센스에서 생성한 인피드 광고의 코드에서 해당 부분을 가져와 넣으세요
목록의 다른 글처럼 <li>로 씌워서 광고를 출력할겁니다. 이러면 간격 스타일이 알아서 잘 맞게되죠.
gCnt1++; // gCnt1 카운터를 여기에 쓰겠습니다.
if (gCnt1 % 3 == 0 && gCnt1 < 7) //제가 스킨에서 설정한 이 목록에서 보여줄 글 수는 9개 인데요, 글 3개 마다 광고 하나 나와라, 대신 두번만 나와라!(즉, 7번글 위쪽일때만!) 를 지정해준겁니다.

[ 글1/글2/글3/광고/글4/글5/글6/광고/글7/글8/글9 ] --> 이렇게요

if (gCnt1 % 3 == 0) 이것만 넣으면 글9 뒤로도 (목록 끝에) 광고가 하나 더 나오게 되는거죠.

그러나 반복 노출은 안할거고 대신 노출될 특정 순서를 지정하고 싶다면!!

if (gCnt1 % 9 == 2) // 이렇게만 해주셔도 됩니다.
9는 목록에 노출되는 총 글 수, 2는 글2 다음으로 광고 노출하는걸 의미합니다. (2대신 0을 넣으면 글목록 끝에!)

[ 글1/글2/광고/글3/글4/글5/글6/글7/글8/글9 ] --> 이렇게요

현재 구조상 일단 글을 하나 보여주고 그 뒤에 상황에 맞춰 추가로 광고를 보여주는거라 광고가 목록의 첫 아이템으로 나오는 건 안됩니다. (글보다 광고 먼저 보여주는거 전 좀 별로던데...)

그래도 혹시 광고가 목록에서 제일 먼저 나오길 바란다면, 스크립트 추가 위치를 </s_cover_item> 위가 아닌 <s_cover_item> 아래로 옮기고 여기저기 살짝 수정하면 되는데... 포스팅이 좀 길어지니 이건 필요하시면 따로 댓글 주세요.

자~ 다 저장하고 결과를 확인합니다.

이제 감이 좀 오시죠? :) 그럼 같은 방법과 코드로 글 목록도 추가해봅시다.

카테고리 글 목록

<s_index_article_rep>
  <div class="post-item">
    <a href="/77">
      <span class="thum">
        <s_article_rep_thumbnail>
        	<img src="//i1.daumcdn.net/thumb/C230x300/?fname=https://blog.kakaocdn.net/dn/btcAaF/btqJ3iu88KZ/xO1S99jRkkV77Hkh3zjFhK/img.png" alt="">
        </s_article_rep_thumbnail>
      </span>
      <span class="title">애드센스 인피드 광고 - 글 목록 내 배치 (Adsense / in-feed ad)</span>
      <span class="excerpt">본문 내부나 사이드바에 광고를 개시하는건 그닥 어렵지 않습니다. 그쵸? 그저 광고를 생성하고 (보통은 디스플레이 광고를 선택하겠죠?), 생성된 광고의 코드를 가져다 원하는 위치에 넣어주면 되니까요. 심지어 본문 상/하단 광고 개시는 티스토리 플러그인로도 지원하고 있어서 매우 수월합니다. 그래서 딱히 이와 관련해선 글을 쓸 필요도 없을 것 같습니다. 그러나 이 인피드 광고는 글 목록의 일부로 보여지게 하는게 목적인 광고라... 스킨의 어디에 넣어야 할지 살짝 난감할 수 있습니다. 게다가 어디에 넣을지 알게되어도 목록의 시작이나 끝이 아니라면 추가적인 처리가 적용되어야 원하는 순번에 나올 수 있게 됩니다. 그리고 목록에서 너무 튀지 않게 다른 글들과 유사한 스타일로 만들어 줄려면 광고 생성시에도 자잘하게 설..</span>
      <span class="meta">
      	<span class="date">2020. 10. 1.</span>
      </span>
    </a>
  </div>
  <script>
    gCnt2++; 
    if (gCnt2 % 4 == 0 && gCnt2 < 13) {
   	 document.write('<div class="post-item"><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="광고레이아웃" data-ad-client="계정아이디" data-ad-slot="광고아이디"></ins></div>');
   	 (adsbygoogle = window.adsbygoogle || []).push({});
    }
  </script>									
</s_index_article_rep>

찾아보니 글 목록은 <div class="post-item"> 이 반복되서 나오고 있더군요.

그래서 해당 블럭을 스킨의 html 에서 찾아 위 처럼 광고 코드를 반복이 끝나는 </s_index_article_rep> 전에 넣어줬습니다.

이때, 광고레이아웃/계정아이디/광고아이디는 모두 앞서 삽입한 인기글과 동일하게 넣었습니다. 둘은 모양이 같기에 같은 광고를 사용해도 되니까요.

이번에 광고는 주변에 맞춰 <li> 가 아닌 <div class="post-item"> 로 감싸줬습니다.

if (gCnt2 % 4 == 0 && gCnt2 < 13) 요기도 위에서 설명했듯이 이 광고는 gCnt2 카운터 변수를 쓰고, 글4개 + 광고 패턴으로 반복하자, 대신 반복은 3번만 하자 (12까지만) 를 의미합니다. (목록당 총 글 수는 16으로 설정되어 있음)

[ 글1/글2/글3/글4/광고/글5/글6/글7/글8/광고/글9/글10/글11/글12/광고/글13/글14/글15/글16 ]

--> 이렇게요

이 부분은 자신의 상황에 맞게 바꾸시면 되겠습니다.

이제 최신 글 하나 남았나요?

최신 글

방법은 이전과 거의 동일합니다.

다만 제 최신 글은 커버아이템 중 커버갤러리2 를 쓰고 있어서 앞서 사용한 광고와는 모양이 많이 다르니 인피드 광고를 하나 더 만들어야 겠습니다.

애드센스로 돌아가 원하는 모양의 광고를 하나 더 만들고 옵니다.

참고: 저처럼 커버갤러리2 용으로 만드시는거라면 광고 만들때 '전체옵션' 에서 우측 패딩을 25로 주시고 나머진 모두 0으로 해주세요.

그리고선 스킨 html 수정을 통해 방금 만든 광고를 넣어보아요.

<s_cover name='cover-thumbnail-4'>
  <div class="cover-thumbnail-4">
    <h2></h2>
    <ul>
      <s_cover_item>											
        <li>
          <a href="">
          <figure>
            <s_cover_item_thumbnail>
            	<img src="//i1.daumcdn.net/thumb/C230x140/?fname=" alt="">
            </s_cover_item_thumbnail>
          </figure>
          <!-- <span class="title"></span> -->
          <s_cover_item_article_info>
            <span class="title"></span>
            <span class="excerpt"></span>
            <span class="meta">
              <span class="comment">댓글 </span>
              <span class="date"></span>
            </span>
          </s_cover_item_article_info>
          </a>
        </li>
        <script>
          gCnt3++; 
          if (gCnt3 % 9 == 2) {
            document.write('<li style="padding: 0 !important"><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="광고레이아웃" data-ad-client="계정아이디" data-ad-slot="광고아이디"></ins></li>');
            (adsbygoogle = window.adsbygoogle || []).push({});
          }
        </script>											
      </s_cover_item>
    </ul>
  </div>
</s_cover>

커버갤러리2 는 소스상 cover-thumbnail-4 이 이름입니다.

이 블럭을 찾아 반복이 끝나는 지점 (</s_cover_item>) 위에 광고 코드를 넣어 줬습니다.

여태 쓰지 않은 gCnt3 를 카운터 변수로 사용했고 노출되게 설정된 총 글 수가 9개인 상황에서 그 중에 2번 글 뒤에 한번만 광고가 나오게 하고 싶어서 (gCnt3 % 9 == 2) 조건을 걸었습니다.

주변에 맞춰 <li> 로 광고를 감싸줬는데요, 광고 최소 넓이가 250인데 우리 커버갤러리2 는 넖이 255에서 25패딩이 빠지는 230 이라 에러가 나지 않도록 광고 생성시엔 패딩이 없게 <li style="padding: 0 !important"> 를 넣어 줬습니다.

다 저장하고 확인해보니 역시 잘 나옵니다.

광고 이미지와 광고 제목과 설명 사이 간격들은 몇번 애드센스 왔다갔다 하며 수정해주니 얼추 맞춰진 것 같습니다.

해놓고 보니 광고가 페이지에 자연스레 잘 스며든 것 같아 훨 보기 좋네요.

(물론 광고가 아예 없는게 제일 좋겠지만... 쿨럭....ㅡㅡ;)

암튼, 전체 과정을 요약해보면 아래와 같습니다. (개괄적 이해를 돕기위해..)

애드센스 js 파일을 스킨 html 의 <head> 내부로 이동
스킨 html의 <head> 내부에 광고가 들어갈 글 목록당 하나씩 카운터 변수 추가
애드센스에서 사용할 인피드 광고 단위 생성 및 코드 얻기
스킨의 html 에서 해당 글 목록을 찾아 반복되는 지점의 끝에 스크립트를 통한 광고 코드 삽입
1. 3번에서 얻은 코드에서 중요 값 3개 붙여 넣기
2. if 조건문을 통해 노출 순서/위치 조정
3. 주변에 맞춰 li 나 div 등 반복되는 동일한 태그로 감싸주기
필요 시 애드센스에서 광고 모양 수정
1. 저장 후 생성된 코드에서 data-ad-layout-key 값만 가져다 스킨에 넣은 광고 코드에 업데이트 해주면 됨

하시다 안되는 부분이 있거나 문의 사항 있으시면 언제들 댓글 남겨 주세요.

저작자표시

'웹 코딩 > 티스토리' 카테고리의 다른 글

대표이미지 본문에서 감추기 (1)	2020.10.28
포스팅 내 테이블 자동 정렬 (0)	2020.10.28
사이드 바 - 달력 / 글 보관함 / 링크 (4)	2020.09.28
댓글/방명록 이모티콘 - 장려하기? (1)	2020.09.24
북클럽 스킨 - 커버 갤러리 (설명 및 버그 수정) (1)	2020.09.24

#me { visibility : hidden; }

애드센스 인피드 광고 - 글 목록 내 배치 (Adsense / in-feed ad)

잠깐만!

0. 우선 어떤 목록에 광고를 넣을건지 정하세요

1. 광고 단위 생성

2. 스킨 html 수정

3. 광고 삽입 (스킨 html 수정)

'웹 코딩 > 티스토리' 카테고리의 다른 글

댓글

티스토리툴바

애드센스 인피드 광고 - 글 목록 내 배치 (Adsense / in-feed ad)

잠깐만!

0. 우선 어떤 목록에 광고를 넣을건지 정하세요

1. 광고 단위 생성

2. 스킨 html 수정

3. 광고 삽입 (스킨 html 수정)

'웹 코딩 > 티스토리' 카테고리의 다른 글

관련글

댓글

티스토리툴바