홈페이지, 블로그 꾸미기 팁 정보 게시판입니다.
  • 목록
  • 아래로
  • 위로
  • 쓰기
  • 검색

구글 애드센스 '검색엔진' 광고 단위 설정과 사이트 적용 방법

이윰
19 0 0 10

구글 애드센스의 '검색엔진' 광고 단위는 소유한 사이트나 블로그에 구글 검색창을 삽입해서 검색한 내용과 함께 광고가 출력되어 광고 수익을 낼 수 있도록 유도하는 형태입니다.  '사이트 내 검색' 기능만으로도 훌륭한데 수익까지 낼 수 있다니 너무 좋네요!


광고 단위를 만드는 것은 어렵지 않지만, 사이트 적용 방법에 대한 구글의 설명이 그리 착하지는 않아서 헷갈릴 수 있기 때문에 한 번에 성공할 수 있게 방법을 알려드릴게요.


 

  • 구글 애드센스에 접속합니다.
  • 좌측 메뉴 광고 > 개요 > 상단 메뉴 '광고 단위 기준 '> '검색엔진'을 클릭합니다.


  • 좌측 상단에 있는 '광고 단위 이름 지정'에 단위 이름을 작성합니다.
  • 우측에서 검색 범위를 정할 수 있습니다.
  • 전체 웹: 구글 검색 그 자체 - 구글의 검색창을 내 사이트에 달았을 뿐 내부 검색 기능은 꽝이라고 할 수 있죠. 상위에 출력되는 글은 내 글이 아닐 테니까요.. 이탈률이 + 되는 건 덤입니다. "내 사이트를 껍데기만 다른 구글로 만들겠다" 한다면 '전체 웹'을 선택해도 좋습니다. 
  • 선택한 사이트만 : 선택한 사이트 글 중에서만 검색 결과를 출력합니다. 위와 같이 보면 좌측에 검색 결과를 미리 확인 해 볼 수 있습니다. 10000lab.net/* 은 루트 밑으로 사이트 전체를 검색대상에 포함시키겠다는 의미입니다. 게시판 혹은 페이지가 될 수 있겠죠. *.10000lab.net 은 가령 blog.도메인.com과 같이 하위 섹션이 있는 경우 하위 도메인을 포함한 도메인 전체가 검색대상이 되는 것입니다.


저는 사이트 내에 검색 기능으로 이용할 것이라 '선택한 사이트만'을 체크하고 사이트 도메인/*(그 하위까지 검색)을 적었습니다.

  • 코드를 복사해 주고 (이 화면에서 굳이 하지 않아도 됩니다. 그 이유는 뒤에서 설명) 완료를 누릅니다.

광고 단위가 생성된 것을 확인할 수 있습니다.  

  • 연필 아이콘을 클릭해서 편집기로 이동합니다.
  • 검색엔진 기본설정 탭에서는 적당한 설명과 키워드를 작성합니다.

  • 애드센스와 연결이 잘 되었는지 확인하려면 '광고'탭으로 이동합니다. 잘 되었군요!

이제 사이트에 적용을 해 줘야 하는데, 아까 처음에 복사한 코드만 <body></body> 사이에 잘 넣으면 될 것 같았지만.. 끝이 아녔습니다. 처음에 복사한 코드는 standard type으로 한 화면에 검색창과 검색 결과를 다 보여주게 됩니다.

그렇게 되면 생기는 문제가 검색창을 넣은 위치에 검색 결과가 쭉 쌓이게 되는 것이죠. 

예를 들어 '사이드바(sidebar)'에 코드를 넣고 검색을 하면 검색 결과도 사이드바에 출력되는 것입니다. 

혹은 특정 페이지를 만들어 코드를 따로 넣었다 하더라도 그 페이지를 벗어나면 검색을 할 수 없게 됩니다.


보기좋고 이용하기 편리하도록 검색창은 사이드바나 레이아웃 상단에, 검색 결과는 본문 콘텐츠가 출력되는 위치에 따로따로 나올 수 있도록 설정을 하겠습니다.

  • 검색엔진 수정 > 디자인> 레이아웃> 두 페이지(레이아웃)를 선택합니다. 
  • (또는 2열을 선택합니다. 적용 방법은 거의 같습니다.)

  • '저장 및 코드 생성'을 클릭하고 코드를 복사해서 메모장에 적어둡니다.
  • '다음: 검색 결과에 대한 코드 가져오기'(파란색 버튼)를 클릭합니다. 코드의 class값이 아래 그림과 같이 달라지는 것을 볼 수 있습니다.

<div class="gcse-searchbox-only"><div class="gcse-searchresults-only">

즉, 검색창 출력 코드와 검색 결과에 대한 코드를 각각 따로 원하는 위치에 넣어야 하는 것이죠.

  • 코드를 각각 <body></body> 사이 원하는 위치에 넣어줍니다.
/* sidebar */
<script async src="https://cse.google.com/cse.js?cx=XXXXXXXXXXXXXXXX"></script>
                        <gcse:searchbox-only></gcse:searchbox-only>
												/* search page */
<script async src="https://cse.google.com/cse.js?cx=XXXXXXXXXXXXXXXX"></script>
                        <gcse:searchresults></gcse:searchresults>

코드는 위와 같은 방법으로 작성해도 됩니다.

저는 검색창은 항상 보일 수 있는 사이드바에, ./search_page로 검색 결과가 출력될 수 있도록 페이지를 생성해서 코드를 넣었습니다.



  • 마지막으로  '검색 결과 세부 정보'를 클릭하고 생성한 페이지 주소를 입력합니다.

이제 작동 확인을 한 후 버튼, 글꼴 색상 등을 꾸미기 설정을 하면 됩니다.

  • 검색엔진 수정 > 디자인 > 테마(=스킨)
  • 검색엔진 수정 > 디자인 > 맞춤 설정  글꼴, 글자색 


검색엔진 수정 > 디자인> 미리 보기 이미지 (활성화, 비활성화) 옵션 - 검색결과에 썸네일을 표시할 것인지 여부를 선택합니다.

나머지 디자인은 개발자 도구에서 수정해서 사용하면 될 것 같네요!

미리보기 : 적용된 페이지를 확인하려면 우측 사이드 검색창에 검색어를 입력해 보세요! 


(참고) 설치 후 바로 광고가 나오지는 않습니다.  '수익 공유가 시작되는데 몇 주가 걸릴 수도 있다'고 합니다. 


도움말:  developers.google.com/custom-search/docs/element

신고공유스크랩

댓글 0

댓글 쓰기
내 이름은 코난. 탐정이죠!
권한이 없습니다. 로그인

신고

"님의 댓글"

이 댓글을 신고하시겠습니까?

댓글 삭제

"님의 댓글"

이 댓글을 삭제하시겠습니까?

공유

퍼머링크