구글 애드센스의 검색엔진 광고는 아래와 같이 자신의 웹사이트에 구글 검색창을 적용하고, 웹사이트 방문자가 이 구글 검색창을 통해 검색할 경우 검색 결과 페이지(SERP) 상단에 광고도 함께 송출되게 하여 수익을 창출할 수 있는 광고다.
검색엔진 광고는 웹사이트 방문자가 웹사이트를 방문한 후 검색창으로 직접 검색하기까지 많은 허들이 존재하기 때문에 효용성이 있을까 싶어 등한시되는 것이 사실이다.
그럼에도 불구하고 없는 것보다는 좋지 않겠냐라는 생각에 적용할지 말지 고민하고 있다면 본 콘텐츠가 하나의 방향성을 제시해 줄 것이라 생각한다.
1] 광고 코드 생성
먼저 광고 코드를 생성해 보겠다.
구글 애드센스 ▶ 광고 ▶ 개요 ▶ 광고 단위 기준에서 '검색엔진'을 클릭한다.
좌측 상단에 광고 이름을 입력한다.
'검색 범위'에서 '전체 웹'과 '선택한 사이트만' 중에서 '전체 웹' 클릭 후 만들기를 클릭한다.
('전체 웹'은 검색 시 구글에서 검색하는 것과 같고 '선택한 사이트만'은 검색 시 해당 사이트 내에서 검색하는 것과 같다. 당연히 알겠지만 해당 사이트의 콘텐츠 수가 충분하지 않다면 '전체 웹' 선택을 추천한다.)
아래와 같이 코드가 생성되었다.
이 코드를 HTML의 <body> ~ </body> 태그 사이에 삽입하라고 되어 있는데, <body> 내 삽입 위치에 따라 검색창 생성 위치가 달라진다.
2] 검색창 위치 선정
우선 스크롤을 내렸을 때 검색창이 사라진다면 기껏 적용한 의미가 없기 때문에, 검색창을 화면 상단에 고정된 플로팅 형태로 운영하는 것을 추천한다.
다음으로 검색창을 본문에 적용할지 사이드바에 적용할지를 정해야 하는데, 만약 Mobile을 통한 방문자가 많다면 본문에 적용, PC를 통한 방문자가 많다면 사이드바에 적용할 것을 추천한다.
2-1] 본문 적용
본문에 적용하는 방법은 크게 2가지가 있다.
2-1-1] 모든 페이지에 적용
<body> 바로 아래 또는 <div class="content-wrap"> 바로 아래에 삽입하면 아래와 같이 검색창이 모든 페이지에 적용된다.
2-1-2] 콘텐츠 페이지에만 적용
<div class="entry-content"> 바로 위에 삽입하면 콘텐츠 페이지에만 적용된다.
2-2] 본문 상단 고정
CSS에 sticky 코드를 삽입하면 스크롤을 내릴 때 검색창이 화면 상단에 고정된다.
코드는 HTML에 삽입했던 <div class="gcse-search">가 아니라 아래 이미지와 같이 <div id="___gcse_0">이다.
아래 코드를 CSS에 삽입한다.
#___gcse_0 {
position: sticky;
top: 10px;
z-index: 9999;
}
아래와 같이 스크롤을 내릴 때 검색창이 화면 상단에 고정된다.
2-3] 사이드바 적용
다음은 사이드바에 적용하는 방법이다.
아래와 같이 꾸미기 ▶ 사이드바 ▶ HTML 배너 출력에서 'HTML 소스'에 광고 코드를 삽입하고 저장한다.
아래와 같이 사이드바에 검색창이 적용된다.
2-4] 사이드바 상단 고정
검색창을 사이드바에 적용했을 때도 화면 상단에 고정할 수 있다.
아래 코드를 CSS에 삽입하면 스크롤을 내릴 때 사이드바 자체가 화면 상단에 고정된다.
#aside {
position: sticky;
top: 0px;
}
3] 검색 결과 페이지 설정
검색창을 본문에 적용할지 사이드바에 적용할지에 따라 검색 결과 페이지(SERP)의 스타일도 설정해야 한다.
3-1] 본문 적용의 경우
검색창을 본문에 적용한 경우 기본적으로 아래와 같이 검색창 바로 아래에 검색 결과 페이지가 나타난다.
검색창을 화면 상단에 고정한 경우에는 아래와 같이 검색 결과 페이지도 함께 고정된다.
3-2] 사이드바 적용의 경우
검색창을 본문에 적용한 경우에는 위의 기본 스타일대로 사용해도 괜찮은데, 사이드바에 적용한 경우는 아래와 같이 나타나기 때문에 별도의 스타일 설정이 필요하다.
3-3] 스타일 설정
구글 애드센스 ▶ 광고 ▶ 개요 ▶ 광고 단위 기준에서 '검색엔진 광고' 수정을 클릭한다.
편집기로 이동한다.
아래와 같이 검색 결과 페이지의 스타일을 설정할 수 있으며, 7개 중에서 하나를 선택 후 '저장' 또는 '저장 및 코드 생성'을 클릭하면 된다. ('전체 화면'은 기본 스타일이다.)
예시로 '두열' 스타일을 적용해 보겠다. '두열' 선택 후 '저장 및 코드 생성'을 클릭하면 아래와 같이 나타난다.
'검색창' 코드는 '2-3'과 같이 적용하고, '검색 결과' 코드는 '2-1-2'와 같이 적용한다.
검색해 보면 아래와 같이 본문 영역에 검색 결과 페이지가 나타난다.
그런데, 스크롤을 내렸을 때는 아래와 같이 검색 결과 페이지가 바로 보이지 않는 문제가 있다.
대안으로 '오버레이' 스타일을 적용한다고 해도 아래와 같이 나타나서 문제인데,
간단히 아래 코드를 삽입하면 정상 작동하는 것을 확인할 수 있다. 사이드바 자체의 Z 축을 제일 위로 올리는 것이다.
#aside {
z-index: 9999;
}
