구글의 광고 승인 요건을 갖추면 구글과 블로거에 광고를 연결 할 수 있습니다.
이번 포스트에서는 유료 구글 블로거 템플릿(Template)을 사용할때 자동 광고가 아닌 수동으로(광고단위) 광고를 넣는 방법에 대해 알아보겠습니다. 티스토리, 네이버 블로그 등에 광고를 연결하는 방법이 아니고 구글 블로거(Google Blogger)에만 해당됩니다.
1. 광고 승인 요건
▶ 구글 블로거(Blogger/Blogspot)에서 구글 애드센스 광고 승인을 받으려면 만 18세 이상(국내 기준 만 19세 이상)이어야 하며, 사이트의 HTML 소스 접근 권한과 고품질·독창적 콘텐츠를 갖추어야 합니다.
▶ 애드센스 프로그램 정책에 위배되는 내용(성인물, 불법 콘텐츠, 폭력성, 저작권 침해 등)이 없어야 합니다.
▶ 1,500~2,000자 이상의 분량으로 정성스런 글을 15~20개 이상 충분히 발행한 뒤 신청하는 것이 유리합니다
▶ 여러 주제를 무분별하게 섞기보다 한두 가지 전문적인 분야에 집중하는 것이 신뢰도를 높입니다.
▶ 모바일과 PC에서 모두 잘 보이는 깔끔한 레이아웃이면 좋습니다.
★ 여러 조건이 있지만 반드시 모든 조건을 맞추어야 하는것은 아닙니다. 저도 몇가지 조건을 맞추지 못했는데 광고 승인이 떨어졌죠 제가 생각할때는 블로거 자체가 깔끔하게 보기좋고 게시물 수가 적더라도 게시물 하나하나에 정성이 들어간 블로거라면 승인이 되는것으로 보입니다.
2. 광고 승인 방법
① Blogger에 로그인 후 좌측 메뉴에서 '수익'을 클릭합니다.
② 광고 승인 절차 링크 를 참조 하십시요. 정리 하면 이렇습니다. 특별히 대단한 양식을 제출하고 그런것은 없습니다. 신청은 쉽습니다.
▶ Blogger에 로그인 후 좌측 메뉴에서 '수익'을 클릭합니다.
▶ '애드센스 계정 만들기'를 선택하여 구글 이메일 계정과 연동하고 양식을 제출합니다.
▶ 승인 검토는 보통 며칠에서 2~4주까지 소요되며, 애드센스 대시보드의 '사이트' 탭에서 상태를 확인 할 수 있습니다.
♣ 광고 승인이 되면 메일로 연락이 옵니다. 또한 '게시자아이디' 가 생깁니다. (예 : ca-pub-38467566928)
3. 광고 연결 개요
♣ 광고는 크게 두가지 방법이있습니다. 바로 '자동광고' 와 '광고 단위 기준' 가 있죠.
▶ '자동광고'는 자동으로 블로거에 광고가 연결이 됩니다. 구글에서 권장하는 방식이고 꽤 괜찮게 알아서 광고가 나옵니다. 다만 이번 포스트에서는 유료 템플릿에 광고를 연결하는 것이고 유료 템플릿에는 정해진 광고 위치가 있습니다. 저는 처음에는 자동 광고를 넣었는데 광고가 유료 템플릿의 정해진 광고 박스(레이아웃)에 들어가지 않더군요. 그래서 블로거가 지저분 해졌습니다.
물론 자동 광고를 일단 넣고 유료 템플릿의 정해진 광고 레이아웃을 지워버리면 되는데, 문제는 지워버린 레이아웃 부분이 공백으로 남아서 이것도 이상합니다.
 |
| 자동 광고는 'AMP 설정'에 들어가면 된다 |
 |
| AMP 코드가 중요하다. |
예를들어 <head></head> 사이에 광고 코드를 넣으라고 되있죠. 그러면 그냥 <head>를 찾아서 바로 <head> 밑줄에다가 코드를 넣으면 됩니다. 이렇듯이 ~사이라고 해서 어렵게 생각 하지말고 그냥 ~사이 아무위치에 넣으면 됩니다.
HTML 찾기 넣기 방법 링크
4. 디스플레이 광고(광고 단위 기준) 연결 방법
▶ 우리는 자동광고가 아니라 수동으로 광고를 넣을 겁니다. 광고 메뉴에 가시면 '자동 최적화' 는 해주시구요. '자동 광고' 는 사용안 함으로 되어 있는지 확인 하십시요.
다른것은 신경 안쓰시면 됩니다
① '광고-광고 단위 기준' 으로 갑니다. 여러가지가 보이죠. 각각의 설명은 직접 눌러보시면 직관적으로 설명이 되어있습니다
② '디스플레이 광고' 는 블로거 템플릿 어느곳에서든 잘 들어갑니다. 저도 주로 이 광고를 대부분 사용 했습니다.
- '사각형, 수평형, 수직형' 은 블로그 템플릿의 레이아웃을 보고 판단하셔서 고르시면 됩니다.
- '광고 단위 이름' 은 나중에 수정할 일이 있을때 알아보기 쉽게 이름을 정하세요. 정해진 것은 없지만 웬만하면 영문으로 하시고 띄어쓰기를 하실때는 '_'를 넣어 주십시요. (예 : display_1)
- '광고크기는' '반응형' 으로 하십시요 구글에서 제공되는 광고는 크기가 여러가지가 있죠. 그러한 광고들을 반응형으로 해야 데스크탑, 모바일 레이아웃에 맞추어 계시됩니다.
③ 설정을 하고 '만들기' 를 하시면 코드가 나옵니다. 이 코드를 템플릿의 HTML에 넣으면 되는데......여기서 약간의 문제가 발생합니다.
▶ 블로거에 템플릿을 새로 적용 했다면(사용하시는 브라우저에서 광고차단이 되어 있다면 해제 해야함) 광고 박스(레이아웃)가 보일겁니다. 아래 이미지를 보시면 'Responsive Advertisement' 이라는 박스가 보이죠. 템플릿에 군데군데 보일겁니다. 이 박스에 광고 코드를 모두 넣어야 한다는 것입니다.
④ '테마- 맞춤설정-HTML편집' 에 들어갑니다.
⑤ HTML편집 창이 뜨면 이제 'Responsive Advertisement' 를 찾아줍니다.
컨트롤 F(Ctrl + F) 를 하면 'Search :' 가 상단에 나타납니다. 'Responsive Advertisement' 를 넣고 키보드 '엔터'를 칩니다.HTML 찾기 넣기 방법 링크
 |
| 'Responsive Advertisement' 를 찾았다 |
⑥ 'Responsive Advertisement' 를 찾았으면 주위를 잘 보십시요. 주위의 텍스트를 보시면 '~~ads' 단어가 보입니다. 이렇듯이 'ads'가 보인다면 광고를 넣는 곳이라는 겁니다.
이제 수정을 해보죠. 위에 구글에서 제공한 디스플레이 광고 코드를 잘 나두셨을 겁니다. 그 코드를 HTML 일부분을 지우고, 지운 자리에 끼워 넣으면 됩니다.
▶ 템플릿에서 '<a class="ads-here" href="javascript:;">Responsive Advertisement</a>' 를 지우고, 지운 자리에 구글 디스플레이 광고 코드를 붙혀넣기 합니다.
 |
| <a class="ads-here" href="javascript:;">Responsive Advertisement</a> 문장을 지운다 |
 |
| 지운 문장 대신 구글 광고 코드를 끼워 넣었다 |
▶ 이렇게 하나의 광고를 넣었으면 블로거에 가서 새로고침(F5)을 하고 광고가 제대로 나왔는지 확인 하시면 됩니다.
▶ 광고가 잘 보인다면 계속 'Responsive Advertisement' 를 찾아서 위와 같이 수정 합니다. 저의 경우 4군데 정도 있었습니다. 'Responsive Advertisement' 즉 광고를 넣는 부분이 5군데라면 디스플레이 광고를 5개 만드시면 됩니다.
⑧ 광고 넣는 부분이 2군데라면 정리를 해봅시다.
- 디스플레이 광고를 만들어 코드를 생성합니다.
- 템플릿 HTML편집 창에서 'Responsive Advertisement' 찾습니다.
- '<a class="ads-here" href="javascript:;">Responsive Advertisement</a>' 지웁니다.
- 디스플레이 광고 코드를 삽입합니다.
- 광고 1군데는 완성
- 다시 디스플레이 광고를 만들어 코드를 생성합니다.
- 템플릿 HTML편집 창에서 'Responsive Advertisement' 찾습니다.
- '<a class="ads-here" href="javascript:;">Responsive Advertisement</a>' 지웁니다.
- 디스플레이 광고 코드를 삽입합니다.
- 두번째 광고도 완성입니다.
⑨ 완성되면 이런 모습입니다.
 |
| 디스플레이 '수평형' 으로 만들었다 |
5. 멀티플렉스 광고(광고 단위 기준) 연결 방법
① 저는 멀티플렉스 광고를 주로 사이드바에 가젯을 만들어 넣었습니다. 물론 디스플레이 광고를 사용해도 됩니다. 사이트바에 넣는 광고라서 수평형 말고 '사각형', 또는 '수직형' 으로 하시면 됩니다.
우선 가젯을 하나 만듭니다.
 |
| 레이아웃-가젯추가-HTML/자바스크립트 |
레이아웃-가젯 추가-HTML/자바스크립트 를 클릭하시면 가젯이 하나 만들어집니다.(그런데 잘보시면 에드센스라는 옵션도 위에 보입니다. 그것을 사용해도 됩니다)
② 광고-광고 단위 기준-멀티플렉스 광고를 선택합니다. 이후에는 디스플레이 광고 만드는 과정과 같습니다. 설명은 생략합니다.
③ '멀티플렉스 광고'를 만들 했으면 광고 코드가 생깁니다. 마찬가지로 코드를 복사합니다. 복사를 하신 후에 위에 만든 가젯을 클릭해서 창을연 후 코드를 붙혀넣기 하시고 '저장' 하면 됩니다.
▶ 이렇게 광고를 넣었으면 블로거에 가서 새로고침(F5)을 하고 광고가 제대로 나왔는지 확인하시면 됩니다.
6. 앵커 광고(광고 단위 기준) 연결 방법
▶ 앵커 광고(Anchor Ads)는 사용자 화면의 가장자리에 고정되어 스크롤을 내려도 항상 따라다니는 고정형 웹/모바일 광고 형식입니다
▶ 고정 위치: 주로 모바일 웹 화면의 상단이나 하단 가장자리에 고정됩니다.
▶ 높은 가시성: 사용자가 페이지를 스크롤하거나 상호작용할 때 계속 노출되어 주목도가 높습니다.
▶ 애드센스의 실험에서 앵커 광고는 사용자 화면 상단에 게재될 때 광고 효과가 더 좋은 것으로 나타났습니다.(참고로 저는 하단이 더 깔끔해 보여서 하단으로 함)
♣ 구글 블로거 광고는 '자동 광고'를 사용할때 앵커 광고(Anchor Ads)가 됩니다. 자동으로 되죠. 하지만 '광고 단위 기준' 에서는 안됩니다. 아예 '광고-광고 단위 기준' 에서 설정 자체가 없습니다. 하지만 다 방법이 있습니다. 광고 코드를 찾아서 직접 넣으면 됩니다.
과거에는 앵커 광고(Anchor Ads) 코드를 수동으로 넣으면 데스크탑에는 광고가 안나왔습니다. 모바일에서만 광고가 보였습니다. 그러나 이제는 구글에서 테스크탑에서도 허용을 했습니다. 그래서 앵커 광고(Anchor Ads) 코드를 수동으로 넣으면 테스크탑, 모바일 두군데서 잘나타납니다. 광고 코드를 수정하여 페이지 하단에 앵커 광고가 표시되는 방식 변경하기 링크
① 앵커 광고를 넣는 방법은 상단에 넣는 방법과 하단에 넣는 방법이 있습니다.
▶ 상단
- 아래 코드를 복사해서 위에 설명한 '태마-맞춤설정-HTML 편집' 으로 가서 '<head>와 </head>' 사이에 넣으면 됩니다. (</head> 텍스트를 찾은 후에 </head> 바로 위에 넣으면 된다)
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-게시자아이디" data-overlays="bottom" crossorigin="anonymous"></script>
▶ 하단
- 아래 코드를 복사해서 위에 설명한 '태마-맞춤설정-HTML 편집' 으로 가서 '<head>와 </head>' 사이에 넣으면 됩니다. (</head> 텍스트를 찾은후에 </head> 바로 위에 넣으면 된다)
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-게시자아이디" data-overlays="collapsed-bottom" crossorigin="anonymous"></script>
7. 인피드 광고(광고 단위 기준) 연결 방법
 |
| 다른 광고와 마찬가지로 만들기를 하면 광고 코드를 얻는다 |
◆ '인피드(In-feed) 광고'는 웹사이트의 글 목록(피드) 사이에 자연스럽게 녹아들도록 배치하는 광고입니다. 따라서 구글에서 광고 코드를 받은 후에 HTML 코드에서 게시글 목록을 반복해서 출력하는 루프(Loop) 코드 내부 또는 목록 태그(<ul>, <ol>, <div>) 사이에 삽입해야 합니다.
- 구글 설명을 보아도 어렵습니다. 디스플레이, 멀티플렉스, 앵커 광고 까지는 쉬웠지만 인피드 광고는 어렵습니다. 또한 정보를 찾아보면 수동으로 HTML 편집에서 수정하는 것보다 플러그인을 별도로 사용하라는 정보도 있었습니다.
♣ 우리가 유료 템플릿을 사용하는 이유가 있죠. 바로 편리합니다. 유료 템플릿에는 이미 인피드 광고 기능이 포함이 되어있습니다. 클릭 몇번으로 해결이 됩니다.
① '레이아웃-블로그 게시물-게시물 사이에 광고 표시 ON-원하는 광고 선택' 을 하면 끝입니다. 여러가지 광고 사이즈가 나옵니다. 하나하나 적용해 보시고 자신의 블로그 템플릿에 가장 어울리는것으로 선택하세요.
② 완성된 모습입니다.
댓글 쓰기