오늘은 인피드 광고와 설정 방법에 대해 알아보려고 한다. 애드센스 승인만 나면 끝날 줄 알았는데 그렇지 않다. 광고 세팅부터 설정까지.. 그리고 효율도. 무조건 광고를 설정한다고 해서 수익이 나는 건 아닌가 보다ㅠ
그래도 포기란 없는 법. 포스팅을 계속하다 보면 더 좋은 방법이 생각나지 않을까 한다. 설정 방법을 포스팅하기에 앞서 우선 이 광고에 개념에 대해서 알아보고 시작해보자.
1. 인피드 광고란?
말 그대로 '인(IN)' + '피드(FEED)' 즉, 피드 안에 있는 광고를 일컫는 말이다.
대표적인 예시가 페이스북, 인스타그램, 유튜브, 틱톡 등 다양한 플랫폼에서 사용되는 광고 중 하나이다. 페이스북 예로 들어보자면 페이스북 피드 중간중간에 나오는 광고를 흔하게 볼 수 있다. 이런 것처럼 피드 내에 자연스럽게 노출되는 광고가 인피드 광고이다. 피드 내에 콘텐츠와 자연스럽게 게시되어 클릭률이 더 높은 광고라 효율도 좋다고 한다.
티스토리에서는 이런 광고를 카테고리 목록 또는 메인 페이지에 넣을 수 있다. 개인적인 생각으로는 블로그 포스팅을 볼 때 목록까지 보는 경우는 정말 궁금한 게 있지 않는 이상 잘 보지는 않는다. 그래도 나와는 다른 사람이 있을 수 있으니, 인피드 광고를 안 넣는 거 보다는 좋을 것 같아 넣으려고 한다.
2. 인피드 광고 생성하기
① 애드센스 접속 > 로그인 > 개요 > 광고 단위 기준 > 인피드 광고를 클릭해 준다.
② 내 티스토리 URL을 복사한 후 아래 URL영역에 입력해 줍니다. 그리고 '데스크톱' or '모바일'을 선택한 후 [페이지 스캔하기] 버튼을 눌러준다. 그럼 자동으로 사이트에 맞는 광고 스타일로 만들어준다.
만약 내가 원하는 스타일로만 지정하고 싶다면 아래 '광고 스타일 직접 만들기'를 클릭해주면 아래와 같은 스타일을 직접 만들 수 있다.
③ URL을 입력하고 나면 아래와 같은 화면이 나온다. 좌측엔 어디에 광고가 노출되는지 우측엔 노출되는 광고가 어떻게 나오게 되는지 미리 보기 화면이 나온다. 나의 블로그 피드 목록과 비슷하다면 [다음] 버튼을 눌러준다.
④ 이제 광고 스타일 설정만 해주면 된다. 우선 광고 이름을 알아볼 수 있게 설정해 주고, 내 블로그 피드와 맞게 설정을 해준 다음 하단에 [저장 및 코드 생성] 버튼을 클릭해준다.
⑤ 생성된 코드들을 복사해 준 다음 메모장에 복사해 준다. 이렇게 되면 인피드 광고 생성은 완료되었다. 모바일 버전도 생성하기 위해 인피드 광고를 추가로 하나 더 생성해 주었다.
위에 코드를 그대로 넣어준다면 적용이 되지 않는다. 그래서 아래 3번처럼 코드를 수정하여 적용해 주어야 한다.
3. 인피드 광고 티스토리 적용하기 (feat. Odyssey 스킨)
① 티스토리 블로그 관리 홈 > 스킨 편집 > HTML 편집으로 접속해 줍니다. 그러고 난 후 우선 <head></head> 사이에 아래 코드를 입력해 줍니다.
<!--인피드광고설정-->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script> var InfeedCount = 0; </script>
<!--인피드광고설정-->
② 2번에서 복사한 코드 중 <ins></ins>까지의 코드를 복사하여, 아래 스크립트 코드 중 document.write(' ') 코드 사이에 복사해 준다. 첫 번째는 데스크톱 코드를 넣어주고, 두 번째는 모바일 코드를 넣어주면 된다. 아니면 ★★★ 부분의 코드만 확인하여 별도로 입력해 주어도 된다.
<!--인피드광고-->
<script>
if (window.innerWidth >= 768) {
InfeedCount++; if (InfeedCount % 3 == 0) // PC 인피드 광고 단위 삽입
{
document.write('<ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="★★★" data-ad-client="ca-pub-★★★" data-ad-slot="★★★" data-language="ko"></ins>');
(adsbygoogle = window.adsbygoogle || []).push({});
}
}
else {
InfeedCount++; if (InfeedCount % 3 == 0) // MO 인피드 광고 단위 삽입
{
document.write('<ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="★★★" data-ad-client="ca-pub-★★★" data-ad-slot="★★★" data-language="ko"></ins>');
(adsbygoogle = window.adsbygoogle || []).push({});
}
}
</script>
<!--인피드광고 끝-->
③ 위에서 입력한 코드를 HTML 편집 화면에서 Ctrl+F 찾기 버튼을 통해 </s_list_rep> 찾은 후 그 위에 작성된 코드를 넣어 주고 [적용] 버튼을 눌러준다.
TIP. 글 목록에서 N개일 때 광고가 나오게 설정할 수 있는 방법은 없을까?
> 그럼 Infeedcount % 3 == 0 부분을 수정해 주면 된다. 여기서 0은 광고가 시작되는 위치이고, 3은 글 목록의 개수입니다. 요 숫자를 수정하면 원하는 위치에 광고를 노출시킬 수 있다. 예시는 아래와 같다.
| infeedcount % 3 == 0 | infeedcount % 3 == 1 | infeedcount % 3 == 2 |
| 글 | 글 | 글 |
| 글 | 광고 | 글 |
| 글 | 글 | 광고 |
| 광고 | 글 | 글 |
| 글 | 글 | 글 |
| 글 | 광고 | 글 |
이상 애드센스 인피드 광고에 대해 알아봤다. 쉬운 것 같으면서도 어려운 광고 설정 방법 그래도 노출되니 잘 해결된 것 같다. 그럼 이만! 다음엔 더 좋은 정보로 찾아뵙겠습니다!
▶티스토리 블로그 관련 글
티스토리 블로그 구글 서치 콘솔 검색등록으로 노출량 늘리기
티스토리 블로그 네이버 웹사이트 검색 등록 하기 (feat. 검색로봇 오류해결)
티스토리 블로그 줌 (ZUM), 빙 (Bing) 검색 등록 하기
