구글의 애드센스 광고 중 가장 효과가 좋은 광고가 앵커 광고와 전면 광고, 그리고 인피드 광고라고 합니다. 앵커 광고와 전면 광고의 경우 자동 광고 설정을 하면 쉽게 개제할 수 있지만 인피드 광고는 별도의 설정 과정이 필요합니다. 어떻게 하면 인피드 광고를 게재할 수 있을까요?
먼저, 인피드 광고란 말 그대로 해석했을 때 피드 내에 개제가 되는 광고를 뜻합니다. 우리가 블로그를 돌아다니면서 포스팅 목록에서 볼 수 있는 광고입니다.
그런데 의외로 인터넷에 인피드 광고 설정하는 법에 대해 많이 나와있는데 오디세이 스킨에 대해서는 없더라구요. 본인도 약 3일 정도 검색하고 시도하면서 결국에는 설정하는 데 성공하였는데요. 다른 분들을 위해 최대한 쉽게 포스팅으로 소개해 보도록 하겠습니다.
1. 인피드 신규 광고 단위 만들기
먼저 구글 애드센스 홈페이지를 가셔서 인피드 광고 신규 단위를 만들어야 합니다.
URL에 본인의 티스토리 블로그 주소를 입력 후 페이지 스캔하기를 눌러주세요.
그리고 광고 스타일 맞춤설정에서 광고 단위 이름을 생성하여 주시고 저장 및 코드 생성을 통해 인피드 광고 단위를 신규로 생성해 주세요.(광고 스타일은 나중에 수정할 수 있습니다.)
개인적으로는 인피드 광고를 데스크톱용과 모바일용 두 개로 만들어서 관리하고 있습니다. 모바일용의 경우 반응형 스킨을 사용할 때 자동적으로 조절이 되기는 하지만 이미지 사이즈가 안맞아서 어색한 부분이 있어요. 그리고 데스크톱과 모바일용의 이미지 크기가 다르기 때문에 인피드 광고가 자연스럽게 보이기 위해서는 두 개를 만들어서 관리해 주시는 게 편합니다.
데스크톱과 모바일용 두개의 인피드 광고단위를 만드신 후, 위에 코드 가져오기를 눌러서 데스크톱용과 모바일용 코드 두개를 준비해 주세요. 여기서 필요한 것은
data-ad-layout-key=" key 값 "
data-ad-client=" client 값 "
data-da-slot=" slot 값 "
코드 안의 큰따옴표의 코드입니다. clien 값을 제외하고 key 값과 slot 값은 데스크톱과 모바일용이 차이가 있으므로 메모장에 복사, 붙여 넣기 해서 미리 준비해 주세요.
2. 블로그 html 편집
다음으로 [블로그 관리] → [스킨 편집] → [html 편집] 메뉴를 클릭해 주세요. html 편집이 필요합니다.
▷인피드 광고 코드 1
먼저, <head> </head> 사이에 아래 코드를 복사, 붙여 넣기 해주세요.
<!-- 인피드 광고 head 코드 시작 -->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script> var InfeedCount = 0; </script>
<!-- 인피드 광고 head 코드 끝 -->
▷인피드 광고 코드 2
그리고 다음 단계로 html 편집 화면에서 CTRL+F 를 눌러 </s_list_rep> 를 검색 합니다.
</s_list_rep>
검색 후 화면에 보이는 </article>과 </s_list_rep> 사이에 아래의 인피드 광고 코드2 를 복사, 붙여 넣기 해야 하는데요. 여기서 중요한 것이 인피드 광고 코드 2를 약간 수정해야 합니다. 아까 인피드 신규 광고 단위를 만들 때, 데스크톱과 모바일의 key 값, clien 값, slot 값을 메모장에 입력해놓으란 것을 기억하시나요? 그 값을 인피드 광고 코드 2에 입력을 해주셔야 합니다.
<!--인피드 광고 코드 시작-->
<script>
if(window.innerWidth>=768){
InfeedCount ++;if ( InfeedCount % 5 == 1 ) // 데스크톱 광고 단위
{
document.write('<ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="데스크톱 key" data-ad-client="데스크톱 client" data-ad-slot="데스크톱 slot" data-language="ko"></ins>');
(adsbygoogle = window.adsbygoogle || []).push({}); }
}
else {
InfeedCount ++;if ( InfeedCount % 5 == 1 ) // 모바일 광고 단위
{
document.write('<ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="모바일 key" data-ad-client="모바일 client" data-ad-slot="모바일 slot" data-language="ko"></ins>');
(adsbygoogle = window.adsbygoogle || []).push({}); }
}
</script>
<!--인피드 광고 코드 끝-->
코드 내를 보시면 아래 사진 처럼 데스크톱, 모바일의 key, client, slot 값을 입력하게 되어 있습니다. 앞서 메모하였던 값들을 순서에 맞게 입력해 주세요.
그리고 나서, </article>과 </s_list_rep> 사이에 복사, 붙여넣기 해주시면 인피드 광고 코드 삽입이 완료됩니다.
※ 인피드 광고 코드 2에 대해 잠깐 설명하자면
코드 내에 InfeedCount % 5 == 1 이라는 구문이 있습니다. 이 말의 의미는 글목록 5개당 1개의 인피드 광고를 게재 하겠다는 의미 입니다. 가독성을 해치지 않는 선에서 코드를 수정해 주시면 됩니다.
3. 인피드 광고 디자인 하기
인피드 광고 코드를 삽입을 완료하면 얼마 후 인피드 광고가 게재가 됩니다. 하지만 조금은 어색할 수 있습니다. 이미지 사이즈가 안 맞는다던지 아니면 글자 간격이 안 맞을 수 있어요. 이것은 구글 애드센스의 기존 광고 단위의 연필 표시를 클릭해서 수정할 수 있습니다.
오른쪽 편에 광고 스타일 맞춤설정을 통해 데스크톱과 모바일 광고 스타일을 각각 개인 입맞춤에 맞춰서 설정해 주시면 조금은 더 깔끔한 모양의 인피드 광고 스타일을 만들 수 있습니다.
'블로그잡담' 카테고리의 다른 글
| 티스토리 블로그 애드센스 본문 상단 광고 수동 배치하기 (1) | 2023.05.02 |
|---|---|
| 다음 메인에 올랐습니다. 하지만 표시할 수 있는 광고의 수가 제한되었습니다. (0) | 2023.04.19 |
| 티스토리 오디세이 스킨 본문 제목, 본문 폰트 변경하기 (3) | 2023.04.13 |
| 티스토리 오디세이 스킨 - 본문 제목 배경색 변경, 블러 처리하기 (0) | 2023.04.10 |
| 티스토리 오디세이 스킨 - 본문 현재글/이전글, 관련글 삭제 방법 (0) | 2023.04.10 |