웹 구현

참고: 페이지에 블록이 몇 개 있든 페이지당 광고 요청은 한 번만 해야 합니다.

중요: 이 코드를 사용하기 전에 이용약관을 읽어보세요.

이 코드를 사용하려면 애드센스 맞춤 검색 광고를 사용할 수 있는 활성 권한이 있는 애드센스 계정이 있어야 합니다.

개요

사이트에 애드센스 맞춤 검색 광고를 구현하는 과정은 다음과 같이 3단계로 이루어집니다.

1단계: AdSense에서 검색 광고 맞춤 스타일 만들기

로그인한 후 검색용 광고를 펼치고 검색 광고 스타일을 클릭합니다. 여기에서 새 스타일을 만들거나 기존 스타일을 업데이트할 수 있습니다.

2단계: 코드 구성하기

코드 받기를 클릭합니다. 삽입 검색 페이지의 광고 컨테이너와 일치하도록 광고 컨테이너를 구성합니다.

3단계: 코드 구현

코드 생성기에서 코드를 복사하여 페이지에 붙여넣고 query 매개변수를 업데이트합니다. 광고가 제대로 로드되려면 head 태그에서 생성된 코드를 사이트의 head 태그에 배치해야 합니다. 광고 단위 1의 코드에는 페이지에 있는 모든 광고 단위의 설정이 포함됩니다. 추가 광고 단위의 경우 광고가 표시될 페이지에 해당 광고 단위 <div>를 배치하기만 하면 됩니다.

가장 흔히 사용되는 기능은 코드 생성기에 제공되지만 일부 추가 매개변수는 참조 섹션에서 확인할 수 있습니다. 참조 섹션에는 페이지의 모든 광고 단위에 적용되는 모든 페이지 수준 옵션과 개별 광고 단위에 적용되는 모든 광고 단위 수준 옵션이 포함되어 있습니다.

샘플 코드

비동기 광고 로드

생성된 코드는 비동기식입니다. 다음은 비동기 광고 로드의 전체 작동 예입니다. 새 탭에서 이 예시를 열어도 됩니다. 자체 client-Id를 입력해야 합니다.

<html>
<head>

<script async="async" src="https://www.google.com/adsense/search/ads.js"></script>

<script type="text/javascript" charset="utf-8">
  (function(g,o){g[o]=g[o]||function(){(g[o]['q']=g[o]['q']||[]).push(
  arguments)},g[o]['t']=1*new Date})(window,'_googCsa');
</script>

</head>

<body>

<div id="afscontainer1"></div>
<script type="text/javascript" charset="utf-8">

var pageOptions = {
  'pubId' : 'test client ID', // Enter your own client-ID here
  'query' : 'flowers', // User query for this page
  'styleId': '7824176615' // Enter your own style ID here
};

var adblock1 = {
  'container' : 'afscontainer1',
  'width' : 700
};

var adblock2 = {
  'container' : 'afscontainer2',
  'width' : 700
};

_googCsa('ads', pageOptions, adblock1, adblock2);
</script>

<p>Search result 1</p>
<p>Search result 2</p>
<p>Search result 3</p>

<div id="afscontainer2"></div>
</body>
</html>

Google 검색의 관련 검색어는 현재 검색어와 관련된 검색어가 포함된 자연 검색 단위입니다. 이 단위의 링크는 새 검색 결과 페이지로 연결됩니다. 

<html>
<head>

<script async="async" src="https://www.google.com/adsense/search/ads.js"></script>

<script type="text/javascript" charset="utf-8">
  (function(g,o){g[o]=g[o]||function(){(g[o]['q']=g[o]['q']||[]).push(
  arguments)},g[o]['t']=1*new Date})(window,'_googCsa');
</script>

</head>

<body>

<div id="afscontainer1"></div>
<script type="text/javascript" charset="utf-8">

var pageOptions = {
  'pubId': 'test client ID', // Enter your own client-ID here
  'relatedSearchTargeting': 'query', // Must use 'query' for Related Search on Search pages
  'query': 'flowers', // User query for this page
  'styleId': '1234567890', // Enter your own style ID here
  'resultsPageBaseUrl': '//www.example.com/search', // Enter your own base URL here
  'resultsPageQueryParam': 'query' // Enter your own query parameter here
};

var adblock = {
  'container': 'afscontainer1',
  'number': 3,
  'width': 700
};

var rsblock = {
  'container': 'afscontainer2',
  'relatedSearches': 6,
  'width': 500
};

_googCsa('ads', pageOptions, adblock, rsblock);
</script>

<p>Search result 1</p>
<p>Search result 2</p>
<p>Search result 3</p>

<div id="afscontainer2"></div>
</body>
</html>

콘텐츠 페이지의 관련 검색어

콘텐츠 관련 검색어는 페이지의 콘텐츠와 관련된 검색어를 사용자에게 제공합니다. 이를 통해 사용자는 관련 주제를 탐색하고 검색 광고 또는 사이트 탐색에 참여할 수 있습니다. 콘텐츠 페이지의 관련 검색어에 'query' 매개변수를 사용하면 예상치 못한 결과가 발생하므로 사용하지 마세요.

참고: 사이트에 관련 검색어가 표시되려면 Google에서 페이지를 크롤링하여 검색어가 문맥상 관련이 있는지 확인해야 합니다. 페이지가 아직 크롤링되지 않았거나 Mediapartners-Google 크롤러에 의해 크롤링이 차단된 경우 (예: robots.txt에 의해) Google에 제공한 관련 검색어 추천이 표시되지 않습니다.

콘텐츠의 관련 검색어 제품은 Google의 콘텐츠 크롤링 시스템을 사용하여 페이지를 색인하고 관련 검색어를 생성합니다. 추적 변수, 사용자 ID, 세션 ID, 기타 동적 식별자 등 검색어 매개변수가 포함된 콘텐츠 페이지 URL은 페이지의 핵심 콘텐츠를 평가하는 크롤러의 기능을 방해할 수 있으며, 관련 검색어의 부정확성 또는 관련성 부족으로 이어질 수 있습니다. 'ignoredPageParams' 매개변수를 사용하여 이러한 비필수 매개변수를 식별하면 콘텐츠 색인이 올바르게 생성되고 불필요한 크롤링 부하가 줄어듭니다. 이를 통해 Google은 페이지가 이미 크롤링되었음을 더 잘 인식하고 추천 검색어 (Google 및 파트너의 검색어, 자격 요건을 충족하는 경우)를 표시할 수 있습니다. 

<html>
<head>

<script async="async" src="https://www.google.com/adsense/search/ads.js"></script>

<script type="text/javascript" charset="utf-8">
  (function(g,o){g[o]=g[o]||function(){(g[o]['q']=g[o]['q']||[]).push(
  arguments)},g[o]['t']=1*new Date})(window,'_googCsa');
</script>

</head>

<body>

<p>Page content</p>

<div id="afscontainer1"></div>

<script type="text/javascript" charset="utf-8">

var pageOptions = {
  'pubId': 'test client ID', // Enter your own client-ID here
  'relatedSearchTargeting': 'content', // Must use 'content' for Related Search on Content pages
  'hl': 'en', // The preferred language for related terms (default to 'en' if not specified)
  'styleId': '1234567890', // Enter your style ID
  'resultsPageBaseUrl': '//www.example.com/search', // Enter the base URL of your results page
  'resultsPageQueryParam': 'query', // Specify the query parameter on your results page
  'terms': 'term a,term b', // Optionally provide your own related terms in a comma-delimited list
  'referrerAdCreative': 'example ad title' // Only used when a user comes from a source you control;
                                           // required when 'terms' is present.
};

var rsblock1 = {
  'container': 'afscontainer1',
  'relatedSearches': 6
};

_googCsa('relatedsearch', pageOptions, rsblock1);
</script>

<p>More page content</p>

</body>
</html>

피해야 할 사항

모든 게시자는 애드센스 맞춤 검색 광고 구현에 관한 Google 가이드라인을 준수하고 광고 렌더링을 방해하여 예상치 못한 결과나 최적화되지 않은 실적을 초래할 수 있는 특정 구현 방법을 피해야 합니다.

  • 무한 스크롤 구현이 아닌 경우 페이지에서 여러 광고 호출을 하지 마세요.
  • 광고가 렌더링되기 전후에 광고 블록을 숨기지 마세요.
  • 페이지에서 광고 블록을 이동하지 마세요.
  • 페이지에 표시하려는 광고 블록보다 많은 광고 블록을 요청하지 마세요.
  • 광고 블록의 DOM을 조작하지 마세요.
  • 자체 지연 로딩을 구현하지 마세요 (대신 Google의 지연 로딩 사용)
  • 사이트에서 Google의 JS 리소스를 캐시하지 마세요.
  • 콘텐츠 페이지의 관련 검색어에 'query' 매개변수를 사용하면 예상치 못한 결과가 발생하므로 사용하지 마세요.