티스토리 오디세이 스킨의 리스트에 넣을 인피드 광고와, 리스트의 마지막 부분에 고정할 디스플레이 광고 설정 방법에 대해 설명한 정리 하였습니다.. 오디세이 스킨에서 글의 가독성을 방해하지 않는 범위 내에서 광고를 삽입하고 있으며, 이번 설정으로 오디세이 스킨의 광고 설정 작업을 마무리가 될 것 같습니다.
- 목차
1) <head> <head> 영역 리스트 카운팅 전역 변수코드 넣기
1. 리스트 광고 위치 잡기
인피드 광고는 리스트 목록에서 글과 글 사이에 에드센스 광고를 송출하는 기능입니다. 리스트에 2개의 광고를 넣고 싶은데 인피드 광고를 2개를 자동 광고로 송출하니 리스트의 원하는 공간에 삽입되는 게 아니다 보니 가독성이 떨어져 리스트에는 인피드 광고 1개, 리스트 이동메뉴 바로 위에 고정 광고 하나를 넣기로 결정하였습니다.
오디세이의 리스트 너비는 640px인데 전 720px으로 늘려서 사용 중입니다. 전 블로그에 사이드 레일 광고를 넣지 않기로 결정하였기 때문에 가독성을 높이기 위해 너비를 늘렸습니다. 720px 정도를 늘린다고 해도 사이드 레일 광고를 송출할 수는 있으며 제 개인 취향이니 꼭 사이드 레일 광고를 뺄 필요는 없습니다.
저처럼 리스트 너비가 늘어난 분들은 고정 광고를 넣기 위해 리스트 너비를 확인하셔야 합니다.
리스트 너비는 area-main 영역을 개발자 도구로 선택하시면 아래와 같이 확인이 가능합니다.
참고로 리스트 너비를 수정하고 싶다면 티스토리 관리자 → 스킨 편집 → CSS에서
아래와 같이 area-main 부분의 max-width 수치를 조정해 주시면 됩니다.
/* area-main */
.area-main {
width: 100%;
max-width: 720px; // 최대 너비 수정
}
2. 에드센스 광고 단위 만들기
광고 삽입 위치가 결정되었으니 광고단위를 생성해 보겠습니다. 에드센스 페이지로 접근하여 광고 단위 기준 메뉴에서 신규 광고를 생성합니다.
1) 인피드 광고 생성
주소를 입력하고 스캔을 하면 인피드 광고가 어떤 식으로 들어가는지 볼 수 있습니다.
오디세이 스킨은 반응형 스킨이기 때문에 Desktop, 모바일 모두 하나의 광고 코드로 사용할 수 있습니다.
전 상세 설정은 별도로 건드리지 않고 광고 내 표기되는 글꼴만 Arial로 변경했습니다. 광고 단위를 생성하고 코드를 생성해 둡니다.
디스 플레이 광고는 에드센스에서 생성한 코드를 그대로 사용했지만 티스토리 구조상 바로 쓸 수는 없습니다. 코드 내용은 메모장이나 별도의 파일에 잘 정리해 주세요 아래 화면의 박스 친 부분의 코드를 편집해서 넣을 예정입니다.
2) 디스플레이 광고 생성
디스플레이 광고는 기존 상단, 하단 광고 메뉴 생성과 동일합니다. 다만 너비와 높이 사이즈를 좀 조정하겠습니다.
광고 폭은 위에 언급 한대로 리스트 너비에 맞춰서 720이고 높이는 100으로 설정하여 생성하였습니다.
3. 인피드 광고 코드 삽입
티스토리 구조상 구글에서 생성된 인피드 광고 코드를 그대로 넣으면 리스트 카운팅이 초기화가 안되기 때문에 광고 송출이 안 되는 문제가 있습니다. 코드 수정 없이 간단히 넣을 방법을 강구해 봤지만 티스토리 구조상 코드 수정 없이 처리는 불가능하였습니다. 대부분의 인피드 광고를 넣듯이 해더에 카운터 변수를 전역 변수로 설정하여 송출 영역에서 광고를 몇 개 송출할지 결정하는 방식을 사용했습니다. 광고 코드 예제의 이 부분은 사용자의 광고 송출 코드로 변경해서 사용하셔야 합니다. 2가지 단계로 진행됩니다.
1) <head> <head> 영역 리스트 카운팅 전역 변수코드 넣기
티스토리 스킨 편집의 HTML 편집의 <head> 영역에 아래 코드를 넣습니다.
<!-- 인피드 광고 head 영역 코드 -->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script> var listCount = 0;</script>
<!-- 인피드 광고 head 영역 코드 -->
2) 리스트 영역에 광고 송출 코드 넣기
중요한 건 생성된 인피드 광고 코드 중 아래 부분을 본인의 광고 코드 내용으로 변경해주셔야 합니다.
data-ad-layout-key="생성된 코드로 변경"
data-ad-client="생성된 코드로 변경"
data-ad-slot="생성된 코드로 변경"
코드 내용 중 listCount % 10 == 1 부분은 리스트 10개 이하 일 때 1개의 광고를 송출한다는 내용입니다. 전 10개의 리스트를 출력 중이고 리스트에 1개의 인피드 광고만 송출하고 싶기 때문에 이와 같이 설정했고 원하시는 노출 개수가 있다면 출력 중인 글개수에 따라 수정하여 사용하시면 됩니다.
<!--인피드 광고 코드 시작-->
<script>
listCount ++;if ( listCount % 10 == 1 )
{ document.write('<ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="생성된 코드로 변경" data-ad-client="생성된 코드로 변경" data-ad-slot="생성된 코드로 변경" data-language="ko"></ins>');
(adsbygoogle = window.adsbygoogle || []).push({}); }
</script>
<!--인피드 광고 코드 끝-->
리스트 송출 코드를 넣을 위치는
</article> 인피드 광고삽입 위치 </s_list_rep>로 넣어주시면 됩니다.
4. 리스트 하단 디스플레이 고정 광고 삽입
고정 광고 삽입 위치는 </article> 인피드 광고삽입 위치 </s_list_rep> 리스트 하단 고정 광고로 넣어주시면 됩니다.
광고 코드는 에드센스에서 생성한 광고 코드를 수정 없이 쓰시면 됩니다. 그리고 리스트 하단 고정 광고와 페이지 이동 메뉴가 너무 붙을 수 있기 때문에 마지막 라인에 <p> 태그를 넣어주시는 게 좋습니다.
5. 삽입된 광고 확인
광고가 모두 삽입되었으니 어떻게 나오는지 확인해 보겠습니다.
티스토리 오디세이(Odyssey) 리스트 영역의 인피드 광고 설정 및 리스트 하단 고정 광고 설정을 마무리했습니다. 오디세이 스킨에서의 광고 설정이 모두 완료된 상태이며, 앞으로는 일정 기간 동안 추가적인 광고 설정은 하지 않을 예정이며, 대신 현재 상태를 지켜보려고 합니다. 다음 게시글에서는 스킨 영역과 본문 광고 설정에 대한 전반적인 내용을 정리해 볼 예정입니다. 이 글이 티스토리 광고 설정에 있어서 많은 도움을 주면 좋겠습니다.
'티스토리 블로그' 카테고리의 다른 글
| 티스토리 2차 도메인 접속 장애: 긴급 해결 방법 (0) | 2023.08.13 |
|---|---|
| 티스토리 오디세이(Odyssey) 표, 테이블 글자 크기 변경 방법 (0) | 2023.08.12 |
| 티스토리 오디세이(Odyssey) 다른글 메뉴 삭제 방법 (0) | 2023.06.20 |
| 티스토리 오디세이(Odyssey) 하단 광고 설정 (0) | 2023.06.17 |
| 티스토리 오디세이(Odyssey) 상단 광고 설정 (0) | 2023.06.16 |