웹 구현

참고: 블록 수에 관계없이 페이지당 하나의 광고 요청만 합니다.

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

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

개요

사이트에 애드센스 맞춤 검색 광고를 구현하려면 다음 3단계를 따르세요.

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

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

2단계: 코드 구성하기

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

3단계: 코드 구현

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

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

샘플 코드

비동기 광고 로드

생성된 코드는 비동기식입니다. 다음은 비동기 광고를 로드하는 전체 예시입니다. 새 탭에서 이 예시를 열 수 있습니다. 자체 클라이언트 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>

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

<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에서 페이지를 크롤링하여 검색어가 문맥상 관련이 있는지 확인해야 합니다. 페이지가 아직 크롤링되지 않았거나 애드센스 크롤러가 크롤링하지 못하도록 차단하는 경우 (예: 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 clicked an ad to arrive here;
                                           // required when 'terms' is present.
};

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

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

<p>More page content</p>

</body>
</html>

피해야 할 사항

모든 게시자는 애드센스 맞춤 검색 광고 구현에 대한 가이드라인을 준수하고 광고 렌더링을 방해하거나 예상치 못한 결과 또는 성능 저하를 일으킬 수 있는 특정 구현 방식은 피하는 것이 좋습니다.

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