티스토리 애드센스(4-1) 인피드 광고 넣기(단위기준설정)

구글 애드센스(Google AdSense) 광고 중 이번에는 인피드 광고에 대해 설명하도록 하겠습니다.

인피드 광고는 블로그 홈, 카테고리 리스트 중간에 리스트 모양과 동일한 형태로 삽입되는 광고입니다.

그렇기 때문에 사용자로부터 마치 블로그 글 중 하나로 인식하여 클릭을 유도할 수 있습니다.

 

인피드 광고를 적용할 수 있는 곳은 홈, 카테고리 두 곳인데 설정 방법은 비슷하나 설정하는 html 위치가 다릅니다.

두 가지 모두 설명하도록 하겠습니다.

만약 블로그에 홈 설정을 하지 않으신 분들은 카테고리 부분만 적용하시면 됩니다.

 

 

 

 

 

인피드 광고 생성 방법

우선 들어가기 앞서 구글 애드센스로 접속하여 인피드 광고를 생성해 줍니다.

생성할 리스트는 총 4가지(홈 화면 미설정시 2가지)를 생성하겠습니다. 

아래 내용을 반복해서 작업해 주시면 됩니다.

 

 

 

홈 > 광고 > 광고 단위 기준에서 "인피드 광고"를 클릭합니다.

 

 

 

그러면 현재 내 블로그의 홈 또는 카테고리의 리스트 모양과 동일하게 보여주기 위해 스캔 작업을 하는 화면이 나타납니다. 총 4개(홈 미사용시 2개)를 생성할 때마다 그에 맞는 URL과 디바이스 타입을 입력해 주셔야 합니다.

그래야 해당 화면에 맞는 모양으로 광고가 생성이 됩니다.

홈 - 최신 글(인피드 광고) PC               : 예시) https://leeys.tistory.com                 -     Desktop
홈 - 최신 글(인피드 광고) 모바일          : 예시) https://leeys.tistory.com                 -     모바일
카테고리 - 리스트(인피드 광고) PC       : 예시) https://leeys.tistory.com/category    -     Desktop
카테고리 - 리스트(인피드 광고) 모바일  : 예시) https://leeys.tistory.com/category    -     모바일

 

 

페이지 스캔이 완료되면 미리 보기 화면이 나타나는데 확인 후 다음 버튼을 클릭합니다.

 

 

 

다음으로 광고 이름과 상세 설정 화면이 나타납니다. 광고 이름만 입력 후 저장 및 코드 생성 버튼을 클릭합니다.

 

 

 

그러면 광고 코드가 생성이 되는데 리스트 화면에서 "<>" 버튼으로 복사할 수 있기 때문에 완료만 하시고 반복해서 광고를 만들어 줍니다.

 

 

 

 

 

인피드 광고 카테고리 적용 방법

광고 생성은 PC, 모바일 두 가지로 생성을 했지만 우선 PC용 인피드 광고 삽입 방법부터 설명드리겠습니다.

PC용 광고를 설정하면 모바일에도 적용이 되지만 광고 모양이 PC용이기 때문에 모바일에서 크게 보이는 문제가 있습니다. 이문제를 해결하는 방법은 다음 포스팅에서 설명하도록 하겠습니다.

 

티스토리 스킨 편집으로 돌아와 html 편집 화면으로 이동합니다.

스킨마다 적용해야 하는 부분이 다르기 때문에 스킨에서 광고를 넣어야 하는 곳을 찾는 방법을 알려드리겠습니다.

결론은 "post-header" 검색 후 아래 부분에 삽입을 합니다.

 

 

 

광고 삽입 부분을 찾는 방법은 html 편집 화면에서 카테고리를 선택 후 F12를 클릭하면 개발자 도구가 시작됩니다.

그럼 개발자 도구 좌측 상단에 마우스 모양의 버튼을 클릭하고 인피드 광고를 넣을 리스트 부분으로 마우스를 가져가면 파란 생으로 영역이 표시가 됩니다. 그 상태서 클릭을 하면 개발자 도구 화면에서 해당 부분의 html 코드가 선택이 됩니다. 위아래로 옮겨가며 위치를 파악해 볼 수 있습니다.

 

 

 

 

 

 

인피드 광고 홈 적용 방법

홈에 적용하는 방법도 카테고리 적용방법과 같은 방법으로 적용하면 되는데 적용하는 위치만 다릅니다.

홈 광고도 PC용 광고를 설정하면 모바일에도 적용이 되지만 광고 모양이 PC용이기 때문에 모바일에서 크게 보이는 문제가 있습니다. 이문제를 해결하는 방법은 다음 포스팅에서 설명하도록 하겠습니다.

 

티스토리 스킨 편집에서 html 편집을 통해 cover-list > inner > ul 바로 밑에 아래와 같이 삽입합니다.

 

 

 

홈 설정의 광고 삽입 위치를 찾는 방법도 카테고리와 동일합니다.

다만 스킨 편집의 "홈"을 선택 후 개발자 도구를 통해 찾으시면 됩니다.

 

 

지금까지 홈, 카테고리에 인피드 광고 삽입하는 방법에 대해 설명했습니다.

위 방법으로 설정하게 되면 모바일에서는 PC와 다르게 글 리스트와는 디자인 형태가 차이가 있습니다.

다음 포스팅에서 이를 해결하는 방법을 작성하도록 하겠습니다.