안녕하세요(～￣▽￣)～
군대 갈 날이 얼마 남지 않은 azunyaa입니다.
저번 시간에는 기본적인 애드센스 설정 방법과 자동 광고에 대해서 다뤘는데요. 모든 설정을 완료해도 이해할 수 없는 패턴으로 광고가 보였다가 사라졌다가를 반복하는 경우가 있습니다. 가능하면 수동으로 광고를 다는 방법 이외의 방법으로 해결하고 싶었지만 여러 IT 관련 블로그들의 글을 읽어도 결국은 수동으로 다는 방법밖에 없더군요... 이번 글에서는 코딩 전문가가 아닌 블로거도 수동으로 광고를 게재할 수 있는 방법을 설명해 보겠습니다.
수동 광고 단위의 이해
구글 애드 센스에서 제공하는 광고에는 크게 4가지가 있습니다.
수동으로 광고를 넣는다는 것은 홈페이지를 구성하고 있는 프로그램 언어 html을 읽고 각 위치를 설명하고 있는 코드에 광고 코드를 삽입해야 한다는 것입니다. 때문에 각 위치를 의미하는 코드를 알아야 합니다.
여기서 코드라는 이야기를 듣고 질리신 분은 자동광고로 만족하시는 것을 권합니다. 이후 html 코드를 수정할 텐데 잘못 수정하면 홈페이지에 오류가 생길 수 있습니다.
수동 광고를 넣는 순서를 정리하면
구글 애드 센스에서 신규 광고 단위 만들기 -> 광고 코드 복사 -> 홈페이지 html에서 각 위치를 표시하는 코드 찾기 -> 광고 코드 붙여 넣기 -> 광고 게재
의 순서로 이루어집니다. 다만 광고 코드 이외에 새로운 사이트 바 탭을 만들어 줘야 하는 사이드 바 광고는 티스토리에서 제공하는 배너 출력 플러그인을 사용합니다.
디스플레이 광고 수동으로 넣기
저희가 가장 많이 사용하는 광고이자 상단 디스플레이 광고는 일반적으로 가장 수익이 많이 나는 광고입니다. 우리가 티스토리에 연동하면 광고 설정에 뜨는 저 창이 디스플레이 광고 위치라고 생각하시면 됩니다. 이전에는 광고를 플러그인을 이용해서 넣을 수 있었지만 티스토리 연동이 생기고 난 이후에는 플러그인 자체가 없어져서 직접 넣어야 합니다.
1. 구글 애드 센스에서 신규 광고 단위 만들기
각 위치의 모양에 맞춰서 광고 단위를 생성해 줘야 합니다.
- 구글 애드 센스 좌측 탭에서 광고 -> 개요 -> 광고 단위 기준을 클릭합니다.
- 디스플레이 광고를 선택해 줍니다.
- 내부 설정에서는 자신이 원하는 형태를 선택하고 크기를 스킨에 맞춰 반응형, 고정형 중 하나를 선택하고 만들기를 눌러줍니다.
2. 광고 코드 복사
- 광고 코드를 복사해 줍니다.
- 만들고 광고 단위 리스트에서 <> 모양을 클릭하면 코드 창이 다시 뜹니다.
3. 홈페이지 html에서 각 위치를 표시하는 코드 찾기
여기가 난관입니다. 저는 일단 티스토리에서 제공하는 북클립 스킨을 기준으로 설명드리겠으나 다른 스킨의 경우 내용이 달라질 수 있습니다. 각 위치에 해당하는 코드를 기준으로 그 위아래에 광고 코드를 위치시키면 됩니다.
- 스킨 편집에서 html 편집을 눌러줍니다.
- 'CTRL + F'를 눌러서 아래 코드를 찾아줍니다.
a. 목록 상단 코드: revenue_list_upper
b. 본문 상하단 코드: 가장 아래줄의 article_rep_desc
c. 목록 하단 코드: revenue_list_lower
4. 광고 코드 붙여 넣기
<HTML 코드>
목록 상단 위치
...
본문 가장 상단 위치
본문 가장 하단 위치
...
목록 하단 위치
-> 빨간색으로 적은 위치에 위에서 복사한 코드를 붙여 넣으면 됩니다.
<예시>
5. 광고 게재
글을 새로 발행하면 광고가 바로 개제 되지는 않습니다. 일단 구글에 크롤링되어야 하고 이후 외부의 유입이 생기면 게재되기 시작합니다. 경험상 하루정도 걸립니다.
+ a 사이드 바에 광고 넣기
사이드 바 또한 html 편집기를 이용하여 광고를 게재할 수 있으나 다른 광고들과 다르게 위치를 특정하기 힘듭니다. 때문에 저희는 배너 출력 플러그인을 이용하여 사이드 바에 광고를 게재해 보겠습니다.
- 티스토리 관리에서 플러그인을 클릭하고 배너 출력을 찾습니다.
- 적용을 눌러줍니다.
- 그리고 나서 꾸미기 탭의 사이드 바로 들어가면 HTML 배너 출력이라는 모듈이 생성됩니다. 우측 + 버튼을 눌러 원하는 위치에 사이드바 모듈을 생성시켜 줍니다.
- 편집을 눌러 이름을 지정하고 HTML소스에 복사해둔 광고 코드를 붙여 넣기 해주고 저장을 눌러주세요.
- 광고가 실제로 출력되기까지는 시간이 조금 걸립니다. 한두시간 후에 확인해 주세요.
인피드 광고 수동으로 넣기
인피드 광고는 글목록 사이에 마치 글처럼 들어가 있는 광고를 의미합니다. 티스토리에서는 기본적으로 막아 놓은 방식의 광고이기 때문에 무조건 수동으로 넣어야 하는 광고 단위입니다.
1. 구글 애드 센스에서 신규 광고 단위 만들기
- 광고 단위 기준에서 인피드 광고를 클릭해 줍니다.
- 페이지 스캔하기를 눌러줍니다.
- 자동으로 만들어진 미리보기를 확인하고 다음을 눌러주세요.
- 광고 단위 이름을 지정 후 취향에 맞게 설정을 바꾸고 저장 및 코드 생성을 눌러주세요.
2. 광고 코드 복사
디스플레이 광고와 마찬가지로 코드를 복사해 줍니다.
3. 홈페이지 html에서 각 위치를 표시하는 코드 찾기
- 스킨 편집에서 html 편집을 눌러줍니다.
- 'CTRL + F'를 눌러서 아래 코드를 찾아줍니다.
메인 목록 코드: /s_index_article_rep
4. 광고 코드 붙여 넣기
인피드 광고의 경우 디스플레이 광고와 다르게 추가적으로 코드를 수정해 줘야 합니다.
- 인피드 광고 코드에서 는 아래와 같습니다.
- 기존 광고 코드에서 별, 네모, 하트에 있는 코드를 아래 코드에 복사, 붙여 넣기 해줍니다.
-그리고 찾아놓은 </s_index_article_rep>에 코드를 넣어줍니다.
- 그리고 추가로 아래의 코드를 </head> 위에 넣어야 합니다.
5. 광고 게재
광고는 목록 사이에 게재됩니다. 다만 개인적으로 사용자의 입장이었을 때 괘씸하다는 느낌도 들었고 글의 흐름에 방해를 하기 때문에 저는 현재 사용하고 있지는 않습니다.
콘텐츠 내 자동 삽입 광고 수동으로 넣기
콘텐츠 내 자동 삽입 광고 즉 글 본문 사이에 광고를 넣는 방법은 다른 광고와는 다른 서식을 이용한 방법을 사용합니다.
1. 구글 애드 센스에서 신규 광고 단위 만들기
각 위치의 모양에 맞춰서 광고 단위를 생성해 줘야 합니다.
- 구글 애드 센스 좌측 탭에서 광고 -> 개요 -> 광고 단위 기준을 클릭합니다.
- 콘텐츠 내 자동 삽입 광고를 선택해 줍니다.
- 내부 설정에서는 자신이 원하는 형태를 결정하고 저장 및 코드 생성을 눌러줍니다.
2. 광고 코드 복사
- 광고 코드를 복사해 줍니다.
3. 서식으로 만들기
- 티스토리 관리에서 서식 관리로 들어가 서식 쓰기를 클릭합니다.
- 우측 상단에 글쓰기 모드를 HTML로 바꿔줍니다.
- 광고 코드를 붙여 넣기 해줍니다. 이때 오류를 막기 위해 광고 코드 앞뒤에 <div>와 </div>를 적어주고 저장해 줍니다.
4. 본문에서 사용하기
- 글을 쓰고 광고를 넣을 곳에 커서를 움직인 후 서식 메뉴에서 방금 만든 서식을 불러옵니다.
- 그럼 아래와 같은 스크립트가 뜨고 이후 발행하면 스크립트 있는 위치에 광고가 게재됩니다.
- 광고가 게재되기까지는 하루정도 소요되니 조급해 하지말고 기다려 주세요.
일치하는 콘텐츠 수동으로 넣기
일치하는 콘텐츠 광고를 넣는 방식은 디스플레이 광고와 같습니다. 다만 이는 애드 센스를 승인받은 이후 바로는 사용할 수 없습니다. 정확한 기준은 모르겠지만 일정 시간이 지난 이후 광고 단위 기준에 들어가면 버튼이 생성되어 있습니다. 문제는 이를 메일이나 알람으로 알려주지 않는다는 점이죠...
1. 구글 애드 센스에서 신규 광고 단위 만들기
각 위치의 모양에 맞춰서 광고 단위를 생성해 줘야 합니다.
- 구글 애드 센스 좌측 탭에서 광고 -> 개요 -> 광고 단위 기준을 클릭합니다.
- 일치하는 콘텐츠 광고를 선택해 줍니다.
- 내부 설정에서는 자신이 원하는 형태를 선택하고 저장 및 코드 생성을 눌러줍니다.
2. 광고 코드 복사
- 광고 코드를 복사해 줍니다.
3. 홈페이지 html에서 각 위치를 표시하는 코드 찾기
여기가 난관입니다. 저는 일단 티스토리에서 제공하는 북클립 스킨을 기준으로 설명드리겠으나 다른 스킨의 경우 내용이 달라질 수 있습니다. 각 위치에 해당하는 코드를 기준으로 그 위아래에 광고 코드를 위치시키면 됩니다.
- 스킨 편집에서 html 편집을 눌러줍니다.
- 'CTRL + F'를 눌러서 아래 코드를 찾아줍니다.
목록 하단 코드: revenue_list_lower
4. 광고 코드 붙여 넣기
5. 광고 게재
일치하는 콘텐츠를 사용하면 광고를 추가적으로 게재할 수 있을 뿐만 아니라 최근에 올린 글이 아래 관련 항목으로 같이 뜨기 때문에 자신의 글을 홍보할 수도 있습니다.
마무리
모든 광고단위를 한 번에 정리하려 하니 하루 종일 글만 적었네요. 티스토리 플러그인이 사라진 지 얼마 되지 않아서 html 편집을 이용한 수동 광고 게재에 대한 글은 찾기 힘들었습니다. 아무쪼록 같은 문제에 처하신 분에게 도움이 됐으면 합니다. 다음 글에서는 애드센스를 활용하는 방법과 쿠팡 파트너스에 가입하는 방법을 다뤄보도록 하겠습니다.
이 글만큼은 도움이 되셨으면 하트를 눌러주세요!!라는 멘트를 남기고 싶네요.. ヾ(￣▽￣) Bye~Bye~
[A.A.F 이사 시리즈] 티스토리 구글 애드센스 연동과 자동 광고(로고만 뜨는 문제 해결)
안녕하세요ˋ( ° ▽、° ) 블로그 틀 잡는데 또 한참 걸린 azunyaa입니다. 에드센스 고사는 2~3주 만에 통과했는데 현재 레이아웃처럼 광고를 다는데만 2주 꼬박 걸렸습니다. 티스토리 수익 메뉴와
azunyaa.tistory.com
[A.A.F] 애니 추천 100선(feat. azunyaa)
이 글은 지극히 주관적이고 개인적인 평가입니다. - 추천 순서는 가나다 순입니다. - 평가는 작화(연출, 캐릭터디자인,작붕...), 스토리, 캐릭터성 3가지 면에서 하도록 하겠습니다. - 약간의 스포
azunyaa.tistory.com
'내꺼 > 블로그 이사' 카테고리의 다른 글
| [A.A.F 이사 시리즈] 티스토리 블로그 다음 저품질 확인하고 해결하기 (10) | 2021.05.20 |
|---|---|
| [A.A.F 이사 시리즈] 티스토리 구글 애드센스 연동과 자동 광고(로고만 뜨는 문제 해결) (3) | 2021.05.01 |
| [A.A.F 이사 시리즈] 구글 애드센스 가입 및 승인 (5) | 2021.04.17 |
| [A.A.F 이사 시리즈] 티스토리 블로그 로딩 속도 개선(이미지 확장자 변환) (0) | 2021.03.11 |
| [A.A.F 이사 시리즈] 티스토리 블로그 구글 애널리틱스 연결하는 법(GA4, UA, 애드센스 연동까지) (0) | 2021.03.10 |
댓글