애드센스 수동광고를 적용하는 방법과 위치, 그리고 광고가 올라오는 속도가 빠른 광고 형태는 어떤 것일까요.
구글 블로그를 만들고 이제 마지막 과정인 것 같아요. 애드센스 신청하는 화면이 빠졌는데 나중에 다시 설명해 드릴 기회가 있을 것 같습니다만, 오늘은 애드센스 광고를 수동으로 넣는 방법과 위치를 알아보겠습니다.
수동 광고를 넣은 위치로 구분하면
1. 본문 상단과 하단
2. 멀티 플렉스 광고
3. 본문 임의의 위치
4. 사이드바
5. 사이트 이름 옆
그리고 구글 블로그의 특징은 광고를 넣는 자리는 엄청 많습니다. 광고 위치마다 빠지지 않고 다 넣으면 이건 블로그가 아니라 광고판이 될지도 모를 정도로 사용자의 입맛에 맞는 위치에 넣을 수 있게 만들어져 있습니다.
먼저 앞서 만든 애드센스 광고 코드를 가져오는 방법입니다.
만든 애드센스 좌측 메뉴 광고에서 오른쪽에 지금까지 만든 광고 이름이 있습니다. 여기서 <> 이 표시에 코드를 가져올 수 있습니다. 광고 이름이 이상하게 긴 것은 자동 광고를 설정하면 만들어지는 광고입니다.
구글 블로그 HTML 편집으로 들어갑니다. 경로는 관리자 메뉴에서 테마, 맞춤 설정 옆 역삼각형 HTML 편집입니다.
html 코드에서 <data:post.body/>이 부분을 찾아 이 코드 기준으로 위에는 본문 상단, 아래는 본문 하단에 광고가 나옵니다. 코드는 그냥 넣으면 됩니다. 다만 광고 크기가 고정형으로 만들었다면 중앙 정렬을 위해 <div align='center'> 애드센스 광고 코드 </div>로 감싸면 됩니다. 이 코드가 HTML5 표준이 아니라는 이야기도 있지만 구글 블로그에서 정상적으로 작동하니 걱정하지 않아도 됩니다.
멀티 플렉스 광고 위치는 사용자 선택입니다.
<a class='label-link' expr:href='data:label.url' rel='tag'><data:label.name/></a>
이 코드 아래에 멀티 플렉스 광고를 넣었습니다. 위치를 보여드리겠습니다.
현재 이 블로그에 적용된 멀티플렉스 광고는 본문 하단 광고 아래 태그, 즉 카테고리 이름과 이전 글 링크가 있는 사이에 들어갑니다. 다른 위치에 비치하고 싶다면 F12 키, 개발자 도구를 이용해서 찾으면 쉽게 원하는 위치의 클래스를 찾을 수 있습니다. 아래 개발자 도구 사용 방법을 참고하세요. 쉽습니다.
애드센스 광고를 수동으로 넣는 것은 티스토리에서는 쉽습니다. 글쓰기 화면에서 서식으로 등록한 애드센스 코드를 클릭하면 되지만, 구글 블로그에서는 직접 코드를 붙여 넣어야 합니다. 그래서 수동으로 광고를 넣을 때마다 광고 코드를 넣은 메모장을 띄워놓고 사용합니다. 불편하지만 몇 번 해보니 손에 익네요.
광고 코드는 글쓰기 화면에서 광고 코드를 넣으면 단순한 텍스트로 처리됩니다. 스크립터가 구동되기 위해서는 HTML 보기로 들어가서 광고 코드 넣어야 하는데 많은 글자 중에서 어디에 광고를 넣어야 하는지 찾기 어렵습니다. 그래서 일반적으로 사용하는 것은 광고가 들어가는 자리를 글쓰기 하면서 표시합니다.
(광고)
이렇게 표시합니다. 이 광고 표시도 본인만의 알기 쉬운 단어나 표시를 사용하면 됩니다. 이렇게 적은 것을 HTML 보기에서 살펴보겠습니다. 지금 여기 보여드린 것처럼 광고를 넣고 한 줄을 띄웁니다. 이것도 사용자의 선택입니다만, 광고와 텍스트의 간격 없으니 갑갑해 보여서 무조건 광고의 위아래는 한 줄을 띄우고 있습니다.
HTML 보기 화면으로 들어왔습니다.
HTML 태그가 섞여 있어 광고를 넣을 자리를 찾는 것이 쉽지 않습니다. 그래서 광고를 넣을 자리를 표시하고 Crrl + F 로 광고를 찾습니다. 광고 코드를 넣을 때는 <p>광고</p>, <p></p>를 포함해서 광고 코드를 붙여 넣습니다. 텍스트와 태그가 섞여 엉망이니 광고를 넣을 자리는 이렇게 표시하면 편합니다.
그리고 중요한 것이 있습니다.
글쓰기 HTML 보기에서 애드센스 또는 HTML 등의 코드를 넣고 다시 새 글 작성하기 보기로 빠져나올 때 이런 알림이 나오면 조금 전 삽입한 코드에서 오류를 나타냅니다. <script>를 사용하고 마칠 때 </script> 를 사용하지 않았는지 살펴봐야 합니다. 이 오류는 처음에 본문 상단과 하단 광고를 만들 때 들어갔던 HTML 편집에서도 마찬가지입니다. 반드시 수정해서 이 오류 알림을 없애야 합니다.
사이드바는 관리자 화면 레이아웃에서 설정합니다.
지금, 이 화면에서도 게시판 위에 광고 자리가 하나 있는데요, 이곳은 상단 메뉴와 포스팅 제목 사이에 들어가는 곳입니다. 컴퓨터 화면이라면 고정으로 보이는 광고가 됩니다.
오른쪽 사이드바에 광고를 적용한 모습이 보이죠, 사이드바에는 블로그 검색 한 줄과 카테고리가 있는데, 전문 블로그로 사용하다 보니 카테고리도 3개입니다. 그러니 본문 글 목록 개수보다 사이드바가 너무 짧다 보니 글 목록 길이에 맞추기 위해 광고를 세 개나 넣었습니다. 세 개의 광고 중 맨 아래는 멀티광고입니다.
사이드바 광고는 가젯 추가해서 넣었습니다.
가젯 추가에는 애드센스도 있는데 그 아래 HTML/자바스크립트가 편합니다.
반응형 코드를 그대로 넣으면 됩니다. 빠져나오면서 저장, 그리고 레이아웃 전체 저장을 누르면 적용됩니다.
여기까지는 설명이 길어서 그렇지, 만들고 적용하는 것은 간단합니다.
이곳은 처음에는 반응형 광고로 만들었습니다. 반응형이라는 것은 형태가 맞들어져 있으면 그 크기에 맞게 광고가 노출됩니다. 하지만 아무리 코드를 변경해도 상단 메뉴에 겹치거나 잘리는 형상이 없어지지 않네요. 인공지능마다 질문하고 답을 적용해도 안 되더군요. 코드에는 똑똑하다고 알려진 챗GPT로도 해결이 안 되더군요. 아마도 구조적으로 문제가 있는 것 같다고 하는데, 결국은 고정형으로 만들었습니다. 그리고 나니 깔끔하게 나오네요.
광고 수입 노출 배분 방식이라면 고정적으로 보일 수 있는 자리에 광고가 노출될 수 있도록 배치하는 것이 중요한데, 이 자리와 앞에서 설명한 상단 메뉴와 게시물 제목 사이에 들어가는 광고는 고정으로 노출되는 곳입니다. 방문자가 어떤 글을 선택하더라도 광고가 그대로 있다는 거죠. 당연히 광고 수입으로 잡히는 곳입니다. 이런 틈새 자리를 찾는 것이 광고 수입에 상당히 도움이 될 겁니다.
아, 광고 넣는 설명 하느라 한가지 빠뜨렸는데요, 본문 광고에서 어떤 광고가 로딩이 빠를까요. 본문 광고에는 반응형 전체 크기로 넣는 것보다는 고정형으로 넣는 것이 광고가 뜨는 것이 훨씬 빠릅니다. 테스트해 보세요. 상당히 차이가 납니다. 그러니까 본문 상단에는 고정형 광고를, 본문 중간 아래는 방문자가 글을 읽고 내려가는 동안에 광고는 충분히 올라올 시간이 되니 반응형, 전체 크기로 넣어도 됩니다. 확인해 보세요. 그럴 가치는 있습니다.
다음은 본문 상단 광고를 넣으면서 컴퓨터 상단과 모바일 상단에 다른 광고를 넣는 방법을 알아봅니다.
애드센스 수동광고 넣는 방법과 로딩이 빠른 광고 크기는
개발자 도구로 HTML 소스 위치 찾는 방법, 이렇게 쉬운 것을